Exploring: https://github.com/kyriesent/node-rtsp-stream and How to display IP camera feed from an RTSP url onto reactjs app page? I attempted to showcase the RTSP stream from a CCTV but encountered an error.
ReferenceError: document is not definedscripts\jsmpeg.min.js (1:701) @ evalI couldn't find any examples of this module in NextJS, so there might be a mistake on my end, but I can't pinpoint it. And I haven't come across a better solution for NextJS yet.
I didn't find any helpful information in: https://github.com/phoboslab/jsmpeg, maybe I'm using it incorrectly here.
This all started from: How can I display an RTSP video stream in a web page?, but everything seems outdated, irrelevant, or too complex for me to understand.
The main question:
How can I resolve the error I'm encountering? Is there an alternative approach in NextJS? All I need is to smoothly stream the RTSP feed from a CCTV.
Folder Structure:
components
-layout
-Stream.js
pages
-api
-stream
-[streamId].js
-app.js
-index.js
scripts
-jsmpeg.min.js
Stream.js is a component in stream/app.js, and stream/app.js is used in stream/[streamId].js
Client-side : Stream.js
import JSMpeg from "../../scripts/jsmpeg.min.js";
const Stream = (props) => {
const player = new JSMpeg.Player("ws://localhost:9999", {
canvas: document.getElementById("video-canvas"), // Canvas should be a canvas DOM element
});
return (
<Fragment>
<canvas
id="video-canvas"
className={classes.canvas}
onMouseDown={onMouseDownHandler}
></canvas>
</Fragment>
);
};
Server-side : [streamId.js]
export async function getStaticProps(context) {
const StreamCCTV = require("node-rtsp-stream");
const streamCCTV = new StreamCCTV({
ffmpegPath: "C:\\Program Files\\ffmpeg\\bin\\ffmpeg.exe", //! remove on Ubuntu
name: "name",
streamUrl: "rtsp://someuser:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a0915171f0a1b09090d15081e3a4b544b544b544b">[email protected]</a>",
wsPort: 9999,
ffmpegOptions: {
// options ffmpeg flags
"-stats": "", // an option with no neccessary value uses a blank string
"-r": 30, // options with required values specify the value after the key
},
});
Edit:
I also experimented with https://www.npmjs.com/package/jsmpeg.
After altering Stream.js to:
import jsmpeg from 'jsmpeg';
const Stream = (props) => {
const client = new WebSocket("ws://localhost:9999")
const player = new jsmpeg(client, {
canvas: document.getElementById("video-canvas"), // Canvas should be a canvas DOM element
});
return (
<Fragment>
<canvas
id="video-canvas"
className={classes.canvas}
onMouseDown={onMouseDownHandler}
></canvas>
</Fragment>
);
};
Now I'm facing the error:
ReferenceError: window is not defined