webrtc streamer&前端页面js播放摄像头rtsp流

https://github.com/mpromonet/webrtc-streamer/releases
我这里用的是windows系统服务器，本地也是windows，所以使用的是windows版本，下载的文件是“webrtc-streamer-v0.7.0-dirty-Windows-AMD64-Release.tar.gz”。

下载完成后，需要配置一下配置文件，配置的是具体的摄像头的取流地址，我这里用的是大华和萤石两个摄像头的流:

config.json配置：

{
    "urls":{
        "dahua": {"video": "rtsp://用户名:密码@摄像头ip:554/cam/realmonitor?channel=1&subtype=0"},
        "yingshi": {"video": "rtsp://用户名:密码@摄像头ip:554/h264/ch1/sub/av_stream"},
    }
}

大华的取流格式在上，萤石的取流格式在下（出厂密码一般就是摄像头上的序验证码）。

目录图：

启动命令需要带上制定的配置文件，这里配置的是config.json，-C要大写！
进入webrtc-streamer.exe所在目录，在地址栏中输入cmd，在出现的命令窗口中，输入下面命令。

webrtc-streamer.exe -C config.json

在网址上，输入localhost:8000，进入webrtc的网页。里面会罗列出你电脑任务栏上所有的应用，点击就是类似录制当前应用的一个窗口，可以不用管，我们找到我们配置文件中的dahua和yingshi两个选项卡。如图：

如果能正常播放，那就是没问题的，等会引入js，进行页面播放。如果一直转圈圈，可能是摄像头的编码格式是H265的，我买的最新款萤石摄像头默认的就是H265，大华的可以正常播放，但是萤石的就一直转圈圈。这个时候需要下载一个萤石客户端，去设置一下摄像头的转码格式（有主码流和辅码流之分，如果都要用，那每个码流的格式都要设置成H264）。这个开源的webrtc只支持H264的。设置后就可以正常播放了。

前端js播放

前置步骤完成后，我们自己写一个html，然后引入一下js，实现播放。

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <video id='dahua' style='object-fit:fill' controls autoplay autobuffer muted preload='auto'></video>
        <video id='yingshi' style='object-fit:fill' controls autoplay autobuffer muted preload='auto'></video>
        <script type="text/javascript" src="./js/webrtcstreamer.js"></script>
        <script type="text/javascript" src="./js/adapter.min.js"></script> 
        <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
        <script>        
           var webRtcServer1 = null;
            var webRtcServer2 = null;
            
            //页面加载时加载视频画面
            window.onload = function() { 
                //video：需要绑定的video控件ID
                // no use -> webRtcServer = new WebRtcStreamer("video",location.protocol+"//192.168.1.103:8000");
                webRtcServer1 = new WebRtcStreamer("dahua","http://192.168.1.103:8000");
                //需要查看的rtsp地址
                // no use -> webRtcServer.connect("rtsp://xxx:[email protected]:554/cam/realmonitor?channel=1&subtype=1");
                webRtcServer1.connect("dahua");
                
                webRtcServer2 = new WebRtcStreamer("yingshi","http://192.168.1.103:8000");
                //需要查看的rtsp地址
                // webRtcServer.connect("rtsp://xxx:[email protected]:554/cam/realmonitor?channel=1&subtype=1");
                webRtcServer2.connect("yingshi");
            }
            
            //页面退出时销毁
            window.onbeforeunload = function() { 
                webRtcServer1.disconnect();
                webRtcServer2.disconnect();
            }
        </script>
    </body>
</html>

webrtc streamer&前端页面js播放摄像头rtsp流

前端js播放

猜你喜欢