利用Webrtc-streamer展示rstp视频流

K歌、之王

已于 2022-10-27 17:29:33 修改

阅读量6.4k

点赞数 3

分类专栏： webrtc rstp 文章标签： webrtc

于 2022-03-22 18:38:51 首次发布

本文链接：https://blog.csdn.net/u010568976/article/details/123667815

版权

rstp 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

webrtc

1 篇文章 0 订阅

订阅专栏

读前强调：！！！！
iframe有CPU拉满的情况，确实会存在。本编文章纯粹做实践性测试。生产上用还是建议莫参考此做法。可以考虑直接用海康官方的萤石云平台展示。

关于cpu拉满，我看issue里面也有很多人反应了。官方的答复是加上-o。可以试试

在这里插入图片描述

还可以参考我另外一篇文章,是另外一个方法。

服务端

一、下载

https://github.com/mpromonet/webrtc-streamer/releases

二、启动

docker方式启动，局域网有的电脑能正常访问8000,有的不能正常访问8000，暂时不知道原因是啥；但exe方式启动，局域网内都能正常访问。

命令解释

./webrtc-streamer [-H http port] [-S[embeded stun address]] -[v[v]]  [url1]...[urln]
./webrtc-streamer [-H http port] [-s[external stun address]] -[v[v]] [url1]...[urln]
./webrtc-streamer -V
	-v[v[v]]           : verbosity
	-V                 : print version

	-H [hostname:]port : HTTP server binding (default 0.0.0.0:8000)
	-w webroot         : path to get files
	-c sslkeycert      : path to private key and certificate for HTTPS
	-N nbthreads       : number of threads for HTTP server
	-A passwd          : password file for HTTP server access
	-D authDomain      : authentication domain for HTTP server access (default:mydomain.com)

	-S[stun_address]                   : start embeded STUN server bind to address (default 0.0.0.0:3478)
	-s[stun_address]                   : use an external STUN server (default:stun.l.google.com:19302 , -:means no STUN)
	-t[username:password@]turn_address : use an external TURN relay server (default:disabled)
	-T[username:password@]turn_address : start embeded TURN server (default:disabled)
	
	-a[audio layer]                    : spefify audio capture layer to use (default:0)		
	-q[filter]                         : spefify publish filter (default:.*)
	-o                                 : use null codec (keep frame encoded)

	-C config.json                     : load urls from JSON config file 
	-R [Udp port range min:max]        : Set the webrtc udp port range (default 0:65535)

	-n name -u videourl -U audiourl    : register a name for a video url and an audio url
	[url]                              : url to register in the source list

1. docker方式

1.1 下载镜像

docker pull mpromonet/webrtc-streamer

1.2 把rstp流加入、设置别名、启动

这里 -n 设置名称待会会用到

docker run -p 8000:8000 -it mpromonet/webrtc-streamer -n raspicam -u rtsp://admin:123456@192.168.0.109:554/h264/ch1/main/av_stream

2. exe方式启动

2.1 修改config.json

在这里插入图片描述

{
    "urls":{
        "raspicam": {"video": "rtsp://admin:123456@192.168.0.109:554/h264/ch1/main/av_stream"},
    }
}

在这里插入图片描述

2.2 启动

cmd到目录执行命令 webrtc-streamer.exe -C config.json

webrtc-streamer.exe -C config.json

三、验证

浏览器输入 http://localhost:8000
在这里插入图片描述
可以直接看到rstp流对应的画面。
小技巧：可以点击

可以看到实际上这个地址的效果是通过webrtcstreamer.html来展示的。可以自己去阅读步骤一下载的代码包中的webrtcstreamer.html源码研究研究下。其实就是利用了video和options的值来展示的。

客户端

一、html使用

通过上面分析源码，然后得出如下代码。
其中adapter.min.js、webrtcstreamer.js是步骤1解压目录里面的。

敲黑板了，注意这两者的值。此处的raspicam与上面设置的名称保持一致。
let url = {video: “raspicam”};
let options = “rtptransport=tcp”;

<html>
<head>
    <script src="libs/adapter.min.js" ></script>
    <script src="webrtcstreamer.js" ></script>
    <script>
        let url = {video: "raspicam"};
        let options = "rtptransport=tcp";
        window.onload         = function() {
            this.webRtcServer = new WebRtcStreamer("video", "http://192.168.0.104:8000");
            webRtcServer.connect(url.video, null, options);
        }
        window.onbeforeunload = function() { this.webRtcServer.disconnect() }
    </script>
    <style>
        html,body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

    </style>
</head>
<body>
<div style="height: 100%">
    <video id="video" muted controls  style="object-fit:fill; height: 100%; width: 100%"></video>
</div>
</body>
</html>