如何将来自 RTSP url 的 IP 摄像机提要显示到 reactjs 应用程序页面上？

Question

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

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

我有一个正常工作的 rtsp url 和 username/password。

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

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

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

Answer 1

我想你需要一个特殊的媒体播放器。你试过了吗hls.js。您可以包含该库，然后构建您自己的组件并将 link 传递给它，这样它就可以播放了。

Answer 2

您的解决方案应该由两部分组成：一个 nodejs 应用程序将从 RTSP 和客户端读取 steram canvas 将从 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

如何将来自 RTSP url 的 IP 摄像机提要显示到 reactjs 应用程序页面上？

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

reactjs

rtsp

ip-camera