I want to display the live footage of an ip camera on a web page built using ReactJS.
I found some solutions on the internet but that provide solutions using the http url. However my camera has a username and password, and I don't know how to embed the username/password into the http url.
I have a functioning rtsp url with the username/password.
I would like to have a video element inside the react app like this:
render() {
return (
<div>
<video
....
/>
</div>
);
}
My functioning rtsp url is like: rtsp://username:password@172.16.3.18:554
Your solution should be set with two parts: a nodejs application that will read the steram from the RTSP and client side a canvas that will get that stream from the nodejs application.
Think of it as a "proxy"
On Server:
Stream = require('node-rtsp-stream')
stream = new Stream({
name: 'name',
streamUrl: 'rtsp://username:password@172.16.3.18:554',
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
}
})
On Client:
client = new WebSocket('ws://NODEJS_SERVER_IP:9999')
player = new jsmpeg(client, {
canvas: canvas // Canvas should be a canvas DOM element
})
There is a good npm you can use that does that: