通过WebRTC 的 RTSP 视频获取_webrtc-streamer 硬解码

作者：Li_阴宅 | 2024-07-08 03:42:24

踩

webrtc-streamer 硬解码

背景

由于项目需要，需要使用摄像头在Web页面上展现，由于海康威视摄像头推出的流为rtsp 流，已知存在的基于 FFmpeg 的方案延迟都太高，所以就项目最终选择基于此方案。

方案说明

webrtc-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目，它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。相对于ffmpeg+flv.js的方案，延迟降低到了0.4秒左右，画面的加载速度也变快了，切换浏览器标签后也不会暂停画面，并且解决了http1.1的同域名中的并发限制(在谷歌浏览器中可以同时播放6个以上的video)。
WebRTC对浏览器有要求，可以在下面的地址中查看支持的浏览器。

https://caniuse.com/rtcpeerconnection
在这里插入图片描述

webrtc-streamer 下载和安装

git hub 链接地址：
https://github.com/mpromonet/webrtc-streamer/releases
在这里插入图片描述
可以看到webrtc-streamer 不仅支持linux和windos。
windos 上安装简单，双击即可。
linux 上安装相对比较麻烦，webrtc-streamer 需要安装glibc 2.27、glibc 2.28、glibc 2.29，相对比较麻烦。
在 centos 8.x 也是安装失败，没有办法使用了unbutu 20.4 进行安装。
Docker 镜像安装–推荐这种方式
您可以使用 docker 镜像启动应用程序：

docker run -p 8000:8000 -it mpromonet/webrtc-streamer
1

您可以使用以下命令从主机公开 V4L2 设备：

docker run --device=/dev/video0 -p 8000:8000 -it mpromonet/webrtc-streamer
1

容器入口点是 webrtc-streamer 应用程序，那么你可以：
使用以下方法获取帮助：

  docker run -p 8000:8000 -it mpromonet/webrtc-streamer -h
1

运行容器注册一个 RTSP url 使用：

  docker run -p 8000:8000 -it mpromonet/webrtc-streamer -n raspicam -u rtsp://pi2.local:8554/unicast
1

使用以下命令运行提供 config.json 文件的容器：

  docker run -p 8000:8000 -v $PWD/config.json:/app/config.json mpromonet/webrtc-streamer
1

webrtc-streamer 使用

安装后测试

./webrtc-streamer rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov
1

默认端口 8000
http://xxxx:8000/

在这里插入图片描述

嵌入 HTML 页面：

不使用内部 HTTP 服务器，很容易在另一个 HTTP 服务器提供的 HTML 页面中显示 WebRTC 流。要使用的 webrtc-streamer 的 URL 应该在创建WebRtcStreamer实例时给出：

var webRtcServer      = new WebRtcStreamer(<video tag>, <webrtc-streamer url>);
1

使用 webrtc-streamer 在端口 8000 上本地运行的简短示例 HTML 页面：

<html>
<head>
<script src="libs/adapter.min.js" ></script>
<script src="webrtcstreamer.js" ></script>
<script>        
    var webRtcServer      = null;
    window.onload         = function() { 
        webRtcServer      = new WebRtcStreamer("video",location.protocol+"//"+window.location.hostname+":8000");
	webRtcServer.connect("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov");
    }
    window.onbeforeunload = function() { webRtcServer.disconnect(); }
</script>
</head>
<body> 
    <video id="video" />
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

使用 Web 组件

使用 web-component 可能是显示一些 webrtc 流的简单方法，最小页面可能是：

<html>
<head>
    <script type="module" src="webrtc-streamer-element.js"></script>
</head>
<body>
   <webrtc-streamer url="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></webrtc-streamer>
</body>
</html>

1
2
3
4
5
6
7
8
9

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/797562