如何将来自 RTSP url 的 IP 摄像头源显示到 ReactJS 应用程序页面上？

Question

我想在使用 ReactJS 构建的网页上显示网络摄像机的实时镜头。

我在互联网上找到了一些解决方案，但提供了使用 http url 的解决方案。但是我的相机有用户名和密码，我不知道如何将用户名/密码嵌入到 http url 中。

我有一个带有用户名/密码的有效 rtsp url。

我想在 React 应用程序中有一个视频元素，如下所示：

render() {
   return (
     <div>
       <video
         ....
       />
     </div>
   );
}

我的功能 rtsp url 是这样的：rtsp://username:password@172.16.3.18:554

Answer 1

您的解决方案应由两部分组成：一个将从 RTSP 读取流的 Nodejs 应用程序和一个将从 NodeJS 应用程序获取该流的客户端画布。

将其视为“代理”

在服务器上：

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
  }
})

在客户端：

client = new WebSocket('ws://NODEJS_SERVER_IP:9999')
player = new jsmpeg(client, {
  canvas: canvas // Canvas should be a canvas DOM element
})

你可以使用一个很好的 npm 来做到这一点：

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