In short: I am trying to build a simple video player that lets users provide their own video files.

I am using p5.js (I want to keep using p5.js for other features) and using a call such as video = createVideo('./pathto/assets/video.mp4');

I believe I can do data transfers via IPC to connect the main.js (has access to FS + other node libs) and rendered.js and transfer a data-blob but not sure if this is what I want. I am still researching the details. I am not 100% sure how to do this for video. It also seems this approach would keep the video data in memory as opposed to in the file system? I want it to be stored for later use.

Ideally when I package my app via npm run make (following the electron guide) the user is not only able to do things like drag and drop video files to add to the player (and saved for future use). But they can also just click a button and the path (or even better a window to this path is opened) is displayed so they can just navigate there and use the standard explorer/finder window to place new video files in this directory. For now it's okay if they have to restart the app, later I will worry about monitoring the directory for changes.

My questions are:

  1. How do I specify such directory so when my app gets packaged this directory is easy to access for users (but also the browser/rendered.js side can play them). Users should be able to add and remove videos as they please.
  2. How do I get the frontend to be able to read files in this path. I assume I may have to copy them temporarily every time I need to play a video?

Misc:

I setup my packaging via these two commands:

npm install --save-dev @electron-forge/cli
npx electron-forge import

I tried to run npm run make but it spits out a bunch of files and an exe without much visibility on where video files could be placed so they could be accessed by the browser/rendered.js context.

0

There are 0 best solutions below