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

Question

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

我有一个使用用户名/密码的正常运行的rtsp url。

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

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

Answer 1

您的解决方案应该由两部分组成：一个nodejs应用程序，它将从RTSP读取steram，另一个客户端是一个画布，它将从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
})