将 rtsp ip 摄像机流式传输到网站

Question

我的问题与我网站上使用 rtsp 的 ip 摄像头流式传输有关。我的 rtsp 链接是这样的（出于明显的原因，我无法分享真实的链接）rtsp://test.ddns.net:4000/profile2。

我尝试使用嵌入式代码在我的网站上显示它，但我找不到，或者在某些浏览器上不起作用，或者根本不起作用。所以我问是否有人在这里遇到同样的问题以及如何使其在所有浏览器上工作，可能不使用浏览器插件。

P.s.这些天我读了很多论坛，如果可能的话，我想在不使用 wowza 或其他服务的情况下实现这一目标。

我使用的一些代码示例：

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
        codebase="http://www.apple.com/qtactivex/qtplugin.cab"
        width="640" height="496">
        <param name="src" value="sample-movie.qtl" />
        <param name="autoplay" value="true" />
        <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
        <param name="controller" value="true" />
        <!--[if !IE]> <-->
        <object data="sample-movie.qtl" width="640" height="496" type="video/quicktime">
            <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
            <param name="controller" value="true" />
        </object>
        <!--> <![endif]-->
    </object>

与样本电影.qtl：

<?xml version="1.0"?>
<?quicktime type="application/x-quicktime-media-link"?>
<embed
autoplay="true"
fullscreen="full"
href="http://www.apple.com/quicktime/"
src="rtsp://test.ddns.net:4000/profile2"
/>

我还尝试了VLC代码：

<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
 codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
 width="640" height="480" id="vlc" events="True">
<param name="Src" value="rtsp://cameraipaddress" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="True" />
<embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
 target="rtsp://cameraipaddress" ></embed>
</OBJECT>

但仍然没有适合所有浏览器的解决方案，vlc代码甚至不显示摄像头的图像。目前唯一能部分工作的解决方案是 Quicktime 解决方案，但仅适用于 Windows 和 IE 的 Firefox。

很抱歉这篇文章很长，但我希望有人可以帮助我更好地理解流媒体和 rtsp 协议，并希望能帮助我找到解决方案。

问候，亚历山大

Answer 1

2020 更新 - 您有两个主要选项，具体取决于所需的延迟：

延迟10-30秒。使用一些接收 RTSP 流并将其转换为 HLS 的应用程序。 ffmpeg 是一个明显的自由选择；大多数免费和商业媒体服务器也会这样做。
近实时：延迟低于 1 秒：使用 WebRTC，您有两种选择：
- 安装将 RTSP 转换为 WebRTC 的本地媒体服务器软件：有免费和商业选项；尝试 Ant Media Server、Unreal Media Server、Kurento。
- 使用Millicast或Phenix等WebRTC云。

Answer 2

您需要将服务器端转换为更多浏览器支持的内容，例如 MSE。使用 wowza 或 red5 进行转换可能是最简单的途径。

Answer 3

您不能只是将 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);


  [1]: https://www.ffmpeg.org/download.html

将 rtsp ip 摄像机流式传输到网站

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

3个回答

最新问题

将 rtsp ip 摄像机流式传输到网站

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

3个回答

最新问题

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