由于海康威视的rtsp协议地址无法直接在浏览器播放,所以据我所知能通过以下几种方式:
1、使用海康威视官网插件,或无插件版
2、使用萤石云平台,把rtsp转化成ezopen协议,然后使用组件UIKit
UIKit Javascript · 萤石开放平台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)不会显示出监控画面!!