Video not loading in Electron Webpack + Typescript App | electronjs.org | Page 1

gritty sinew Sep 8, 2023, 10:46 PM

#

Previously I loaded video's by getting them with 'fs', this means they get loaded into the RAM. But I also bumped into another problem where the max video size was 2GB.
Now I'm trying to load them straight from the drive.

  // Create a new video element
  const videoElement = document.createElement("video");
  // Set the video source
  videoElement.src = "file:/" + videoPath;
  videoElement.load();

In my regular Electron App with just javascript, this works fine.
But in Typescript I get the error:
"Refused to load media from 'file://users/jules/Documents/FuneralDesigner/AMPS_TEST/TEMP/VIDEO_1694202616957.mp4' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'media-src' was not explicitly set, so 'default-src' is used as a fallback."

I tried a lot but can't seem to solve it.
I also can't remake the project in a regular electron app because it's already in project and the project got quite big now.

What is usually the best way to load video's in a typescript + webpack electron app?

PS: "webSecurity: false" This is already set for other reasons.

woeful shale Sep 9, 2023, 12:53 PM

#

https://www.electronjs.org/docs/latest/tutorial/security#7-define-a-content-security-policy

Security | Electron

A set of guidelines for building secure Electron apps

gritty sinew Sep 9, 2023, 1:14 PM

#

I also found this link but it also didn't seem to help

woeful shale Sep 9, 2023, 1:15 PM

#

Still same error?

gritty sinew Sep 9, 2023, 1:16 PM

#

When I for example add this:

  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({
      responseHeaders: {
        ...details.responseHeaders,
        // Allow loading assets from `file://` URLs. and allow to load inline styles alos images
        "Content-Security-Policy": ["*"],
      },
    });
  });

This happens: "GET file://users/jules/Documents/FuneralDesigner/AMPS_TEST/TEMP/VIDEO_1694202616957.mp4 net::ERR_FAILED"

#

woeful shale Sep 9, 2023, 1:17 PM

#

your path is wrong

gritty sinew Sep 9, 2023, 1:17 PM

#

what do you mean?

woeful shale Sep 9, 2023, 1:18 PM

#

do you have users/jules/... folder?

#

file:// is protocol

gritty sinew Sep 9, 2023, 1:19 PM

#

so I need to put a third slash?

woeful shale Sep 9, 2023, 1:19 PM

#

yes

gritty sinew Sep 9, 2023, 1:19 PM

#

omg

#

it works

#

thank you so much!

woeful shale Sep 9, 2023, 1:19 PM

#

i dont think you need file:// at all

#

just absole path to file

gritty sinew Sep 9, 2023, 1:20 PM

#

If I leave the file:// out I get this error:

GET http://localhost:3000/Users/jules/Documents/FuneralDesigner/AMPS_TEST/TEMP/VIDEO_1694202616957.mp4 404 (Not Found)

#

woeful shale Sep 9, 2023, 1:22 PM

#

make sure you remove your header trick in production build

gritty sinew Sep 9, 2023, 1:27 PM

#

alright, I 've set the check for development build. I'm now building one for production to check if it still works then

#

Wait but actually I don't get it then, so in development it doesn't work without the headers but in production it does?

woeful shale Sep 9, 2023, 1:30 PM

#

in development you use dev server

#

you files load from it

#

look at request

gritty sinew Sep 9, 2023, 1:31 PM

#

oh

#

yes, I see now

woeful shale Sep 9, 2023, 1:31 PM

#

in production you use file protocol instead of http

#Video not loading in Electron Webpack + Typescript App