I am currently working on a project where I am using a Node.js server to stream H.265-encoded video from IP cameras. The streaming part is handled using the node-rtsp-stream library, and each camera stream is sent to a WebSocket server on a different port.
Here is a simplified snippet of the Node.js code responsible for creating the streams:
const Stream = require('node-rtsp-stream');
function createStreams(rtspUrls) {
// ... (other code)
const streams = [];
rtspUrls.forEach(async (camera, index) => {
// ... (other code)
const stream = new Stream({
name: camera.name,
streamUrl: camera.url,
wsPort: wsPort,
ffmpegOptions: {
'-r': 20,
'-s': '640x480',
'-vcodec': 'libx265',
'-acodec': 'aac',
'-preset': 'medium',
},
});
streams.push({ wsPort, stream, camera });
});
return streams;
}
On the client side, I am using React to create a video player component with Video.js to display the live stream. However, I am facing difficulties in getting the H.265-encoded stream to play in the browser.
Here is a simplified version of my React component:
import React from 'react';
import PropTypes from 'prop-types';
import VideoJS from '../../libs/videojs/videojs';
const Video = (props) => {
const playerRef = React.useRef(null);
const src = props.src;
const videoJsOptions = {
autoplay: true,
controls: true,
responsive: true,
fluid: true,
loop: true,
sources: [{
src: src,
type: 'video/mp4', // or 'video/x-matroska' based on the stream format
}],
};
const handlePlayerReady = (player) => {
playerRef.current = player;
// ... (other code)
};
return (
<>
<VideoJS options={videoJsOptions} onReady={handlePlayerReady} />
</>
);
};
Video.propTypes = {
src: PropTypes.string.isRequired,
};
export default Video;
Despite my efforts, the video player doesn't seem to play the H.265-encoded stream correctly. I suspect there might be issues related to browser compatibility or the way I'm handling the H.265 encoding on the client side.
Can anyone provide guidance on how to correctly set up Video.js or suggest any other approaches to play an H.265-encoded live stream in a React application? Any help or insights would be greatly appreciated!