CODEWITHSUNDEEP
reactjselectronvideo-player
codeKiller
codeKiller

Reputation: 5758

Electron + Reactjs play local video

I have a simple test electron app with the render side made with ReactJs.

I am just trying to check if it could be possible to play a local video from the computer.

I have what I think is the most basic setup in place, and yet this is not working.

On the render side I have my renderer.js, as simple as this:

import "./index.css";
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

const rootElement = document.getElementById("root");

const root = createRoot(rootElement);

const videoLink = "./Users/dev/Desktop/testVideo.mp4";
root.render(<App videoLink={videoLink} />);

And the App.jsx component, also as simple as that:

import React from "react";

const App = ({ videoLink }) => {
  console.log("videoLink", videoLink);
  return (
    <div>
      <video width="600" controls>
        <source src={videoLink} type="video/mp4" />
      </video>
    </div>
  );
};

export default App;

It all seems to work fine, the app runs and renders the video player, but it is all black and on the dev console i can see the error:

Failed to load resource:/Users/dev/Desktop/testVideo.mp4 the server responded with a status of 404 (Not Found)

I have no code related to this on the server side main.js and nothing connected via the pcMain etc, since I am not really sure how to do this.

Upvotes: 0

Views: 30

Answers (0)

Related Questions