reactjsrtspip-camera

How to display IP camera feed from an RTSP url onto reactjs app page?


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


Solution

  • 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