5

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

Levi Arista
  • 295
  • 1
  • 3
  • 13
Yumna Albar
  • 83
  • 1
  • 1
  • 5

2 Answers2

4

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:

https://www.npmjs.com/package/node-rtsp-stream

Levi Arista
  • 295
  • 1
  • 3
  • 13
Kashkashio
  • 410
  • 3
  • 9
0

I think you need a special media player. Have you tried hls.js. You may include the library, then build your own component and pass the link to it so it may play then.

Mojahed Elbakre
  • 81
  • 3