实现在浏览器实时播放海康威视监控画面

原创已于 2023-09-20 16:21:54 修改 · 4.6k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-09-20 16:15:08 首次发布

本文介绍了如何在浏览器中播放海康威视的RTSP流，包括使用官方插件、萤石云平台转换协议、以及通过webrtc-streamer实现实时流媒体播放，同时提及了内网映射和权限设置的注意事项。

由于海康威视的rtsp协议地址无法直接在浏览器播放，所以据我所知能通过以下几种方式：

1、使用海康威视官网插件，或无插件版

海康开放平台

2、使用萤石云平台，把rtsp转化成ezopen协议，然后使用组件UIKit

最佳实践 · 萤石开放平台API文档

UIKit Javascript · 萤石开放平台API文档

文档概述 · 萤石开放平台API文档

3、webrtc实现，使用webrtc-streamer，下面讲的是这个方式

通过WebRTC实现播放

webrtc-streamer插件开源地址：https://github.com/mpromonet/webrtc-streamer
通过git clone命令下载对应系统webrtc
解压后进入文件目录下，通过CMD打开，输入webrtc-streamer.exe -H 0.0.0.0:9001启动服务（可以指定ip地址和端口号，远程访问注意防火墙）
启动成功后可输入以下地址访问页面预览，注意，如果绑定的不是0.0.0.0请输入对应ip

http://127.0.0.1:9001/webrtcstreamer.html?video=你的rtsp流地址

如果无法查看视频（确保rtsp流地址正确的情况下，不确定可以先用vlc访问一下），可能是权限问题，尝试用管理员身份打开CMD
vlc官网地址：VLC: Official site - Free multimedia solutions for all OS! - VideoLAN
点击打开网路串流里的网络输入rtsp地址
如：rtsp://admin:00000@111.111.111.11:554/h264/ch1/main/av_stream
局域网访问111.111.111.11是内网地址，554是内网端口
想要外网访问得先路由把内网地址映射出来，注意，映射的时候，端口是rtsp的端口，不要搞成http的

<html>
<head>

</head>
<body> 
    <div style="width: 200px;height: 150px;position: absolute;left: 0;">
        <video id="video1" muted autoplay>    
    </div>
    <div style="width: 200px;height: 150px;position: absolute;right: 0;">
        <video id="video2" muted autoplay>
    </div>
</body>
<script src="adapter.min.js" ></script>
<script src="webrtcstreamer.js" ></script>
<script>        
    var webRtcServer      = null;
    var server="http://127.0.0.1:8000"//运行webrtc-streamer.exe的地址跟端口
    window.onload         = function() { 
        webRtcServer1      = new WebRtcStreamer("video1",server);
        webRtcServer2      = new WebRtcStreamer("video2",server);
	webRtcServer1.connect("rtsp://海康后台账号:密码@外网地址:rtsp外网端口/h264/ch1/main/av_stream",null,'rtptransport=tcp');
	webRtcServer2.connect("rtsp://admin:123456@外网地址:rtsp外网端口/h264/ch1/main/av_stream",null,'rtptransport=tcp');
    }
    window.onbeforeunload = function() { 
        webRtcServer1.disconnect(); //关闭网页前断连，不然会一直占CPU
        webRtcServer2.disconnect();
    }
</script>
</html>

adapter.min.js在下载webrtc-streamer后文件夹的\html\libs下

webrtcstreamer.js在下载webrtc-streamer后文件夹的\html下

这里注意：webRtcServer.connect(url,null,option);

option是rtptransport=tcp，这个不能缺少，如果webRtcServer.connect(url)不会显示出监控画面！！