从前慢现在也慢

这个屌丝很懒，什么也没留下！

热门标签

利用Webrtc-streamer展示rstp视频流_webrtcstreamer

作者：从前慢现在也慢 | 2024-04-09 19:00:05

踩

webrtcstreamer

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

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

在这里插入图片描述

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

服务端

一、下载

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

二、启动

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

1. docker方式

1.1 下载镜像

docker pull mpromonet/webrtc-streamer
1

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
1

2. exe方式启动

2.1 修改config.json

在这里插入图片描述

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

1
2
3
4
5
6

在这里插入图片描述

2.2 启动

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

webrtc-streamer.exe -C config.json
1

三、验证

浏览器输入 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

注意事项

1、注意海康视频需要设置成`H264`格式。否则看不了。这个细节很重要。

在这里插入图片描述

2、可以自己先用`VLC media player`测试rstp视频流能不能正常访问。再用html测试。

在这里插入图片描述

3、关于rstp的格式，录像机和摄像头的访问地址是有区别的。

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

利用Webrtc-streamer展示rstp视频流_webrtcstreamer

目录

服务端

一、下载

二、启动

命令解释

1. docker方式

1.1 下载镜像

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

2. exe方式启动

2.1 修改config.json

2.2 启动

三、验证

客户端

一、html使用

注意事项

1、注意海康视频需要设置成H264格式。否则看不了。这个细节很重要。

2、可以自己先用VLC media player测试rstp视频流能不能正常访问。再用html测试。

3、关于rstp的格式，录像机和摄像头的访问地址是有区别的。

1、注意海康视频需要设置成`H264`格式。否则看不了。这个细节很重要。

2、可以自己先用`VLC media player`测试rstp视频流能不能正常访问。再用html测试。