Rtsp 流媒体节点

Question

我需要在网页上显示实时摄像头，该摄像头使用

rstp

协议。我刚刚发现浏览器不支持

rtsp

协议，因此我需要创建一个

nodeJS

服务器来为客户端（react）提供服务，以使其正常工作。我在互联网上看到了多篇信息文章，但似乎没有什么能正常工作。我怎样才能完成这个使命？

Answer 1

我也在研究同样的事情。我发现我们可以使用 FFMPEG 将 RTSP URL 转换为 HLS，并将 HLS 主文件 (.m3u8) 传递到 HTML 中的视频标签以进行流式传输。

如果有帮助请告诉我。

示例：

<video id="video-player" controls preload="none"><source src="/output-directory/index.m3u8" type="application/x-mpegURL"></video>

Answer 2

您不能只是将 RTSP 流嵌入到您的网站中，您必须首先将其转换为浏览器可以理解的格式，因为浏览器本身不支持 RTSP。

幸运的是，在 FFMPEG 、 Socket.io 和其他一些 npm 软件包的帮助下，只要您的 IP 摄像机支持 ONVIF 并已启用，就可以实现这一点。步骤如下：

安装 Node.js
安装 FFMPEG
```
sudo apt install ffmpeg
```
确保 FFMPEG 是
```
PATH variables
```
安装
```
npm install onvif socket.io rtsp-ffmpeg
```
运行以下代码
```
node app.js
```
打开网络浏览器并导航至
```
http://localhost:6247/
```

app.js

const rtspStream = require('node-rtsp-stream');
const server = require('http').createServer((req, res) =>
    res.end(`
<!DOCTYPE html><body>
<h1> ONVIF LIB </h1>
<canvas width='640' height='480' style="border: 1px solid black;" >
<script src="/socket.io/socket.io.js"></script><script>
const socket = io(), ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
socket.on('data', (data) => {
const img = new Image;    
const url = URL.createObjectURL(new Blob([new Uint8Array(data)], {type: 'application/octet-binary'}));
img.onload = () => {
  URL.revokeObjectURL(url, {type: 'application/octet-binary'});
  ctx.drawImage(img, 0, 0);
};
img.src = url;
});
</script>
</canvas>

</body></html>`));
const { Cam } = require('onvif/promises'), io = require('socket.io')(server), rtsp = require('rtsp-ffmpeg');
server.listen(6247);

const cam = new Cam({username: 'admin', password: 'Aa123456*', hostname: '192.168.1.108', port: 80});
(async() => {
await cam.connect();
const input = (await cam.getStreamUri({protocol:'RTSP'})).uri.replace('://', `://${cam.username}:${cam.password}@`);
console.log("rtsp url is " + input);
const stream = new rtsp.FFMpeg({input, resolution: '640x480', quality: 4});
io.on('connection', (socket) => {
const pipeStream = socket.emit.bind(socket, 'data');
stream.on('disconnect', () => stream.removeListener('data', pipeStream)).on('data', pipeStream);
});
})().catch(console.error);

Rtsp 流媒体节点

问题描述投票：0回答：2

2个回答

最新问题

Rtsp 流媒体节点

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2