在IE，谷歌内核的浏览器里基于VLC利用rtsp查看实时监控（大华，海康）

最近在工作中需要在web页查看大华摄像头的实时画面，在网上找了好多资料也碰了很多坑，不管过程多么痛苦，最后也终于顺利解决了，所以在问题结束后整理下，当自己以后再遇到这类问题可以参考下。第一次写博客，写的不好见谅。

1.下载安装VLC软件，它是个开源的多媒体播放器，可以播放rtsp流的实时视频。（注意，我在这一步IE不管怎么试都显示不了画面，我下载的是64位版本的VLC，IE上面怎么试都显示不了，后来灵机一动换成32位的VLC就好了，不知道什么原因。谷歌只支持41版本以前的，IE全支持）

2.网上找的测试代码和rtsp的地址，需要把rtsp地址换成自己的地址

海康：

rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream
说明：
username: 用户名。例如admin。
password: 密码。例如12345。
ip: 为设备IP。例如 192.0.0.64。
port: 端口号默认为554，若为默认可不填写。
codec：有h264、MPEG-4、mpeg4这几种。
channel: 通道号，起始为1。例如通道1，则为ch1。
subtype: 码流类型，主码流为main，辅码流为sub。

例如，请求海康摄像机通道1的主码流，Url如下
主码流：
rtsp://admin:12345@192.0.0.64:554/h264/ch1/main/av_stream
rtsp://admin:12345@192.0.0.64:554/MPEG-4/ch1/main/av_stream

子码流：
rtsp://admin:12345@192.0.0.64/mpeg4/ch1/sub/av_stream
rtsp://admin:12345@192.0.0.64/h264/ch1/sub/av_stream

大华：
rtsp://username:password@ip:port/cam/realmonitor?channel=1&subtype=0
说明:
username: 用户名。例如admin。
password: 密码。例如admin。
ip: 为设备IP。例如 10.7.8.122。
port: 端口号默认为554，若为默认可不填写。
channel: 通道号，起始为1。例如通道2，则为channel=2。
subtype: 码流类型，主码流为0（即subtype=0），辅码流为1（即subtype=1）。

例如，请求某设备的通道2的辅码流，Url如下
rtsp://admin:admin@10.12.4.84:554/cam/realmonitor?channel=2&subtype=1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
var itemId = 0;
function getVLC(name)
{ if (window.document[name])    { return window.document[name]; } if (navigator.appName.indexOf("Microsoft Internet")==-1) { if (document.embeds && document.embeds[name]) return document.embeds[name];    } else { return document.getElementById(name); }
} function doGo(mrl)
{ var vlc = getVLC("vlc"); itemId=vlc.playlist.add(mrl); vlc.playlist.playItem(itemId); document.getElementById("btn_stop").disabled = false;
} function updateVolume(deltaVol)
{ var vlc = getVLC("vlc"); vlc.audio.volume += deltaVol;
} function doPlay()
{ vlc.playlist.playItem(itemId);          document.getElementById("btn_stop").disabled = false; document.getElementById("btn_play").disabled = true;
} function doStop()
{ getVLC("vlc").playlist.stop(); document.getElementById("btn_stop").disabled = true; document.getElementById("btn_play").disabled = false;
}
</script>
</head>
<body>
<div style="margin: 50px"> <!-- <a title="rtsp://192.168.0.222:8012/.wmv" href="<a target=_blank href="http://zzck-dental.com">http://zzck-dental.com</a>" onclick="doGo(this.title);return false;">本机的mp4文件</a> --> <span style="margin: 20px;" /> <a title="rtsp://admin:11111@172.17.60.7/cam/realmonitor?channel=46&subtype=1" href="#" onclick="doGo(this.title);return false;">实时视频流</a> <span style="margin: 20px;" />
</div>
<div> <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" id="vlc"codebase=""width="600" height="480" id="vlc" events="True"><param name="MRL" value="" /><param name="Src" value="" /><param name="ShowDisplay" value="True" /><param name="AutoLoop" value="False" /><param name="AutoPlay" value="False" /><param name="Time" value="True"/><EMBED pluginspage="http://www.videolan.org"type="application/x-vlc-plugin"version="VideoLAN.VLCPlugin.2"width="600"height="480"    text="Waiting for video"name="vlc"></EMBED></OBJECT>
</div>
<div>
<input type=button id="btn_play" value=" 播放 " onClick='doPlay();' disabled="true">
<input type=button id="btn_stop" value="停止" onClick='doStop();' disabled="true">
<input type=button value="静音切换" onclick='getVLC("vlc").audio.togglemute();'>
<input type=button value="减小音量" onclick='updateVolume(-10)'>
<input type=button value="增加音量" onclick='updateVolume(+10)'>
</div>
</body>
</html>

3.如果需要展示多个监控画面，就把object标签多复制几个

总结：这次研究这个花了2天的时间，网上下的例子别人都能在IE上运行起来，我怎么试都不行，最后把VLC软件从64位的换成32位的突然发现可以了，真是悲喜交加。当然还有未解决的问题：监控画面两边的黑框问题，标签下方的控制按钮不知道怎么去掉，后面有空再研究吧。第一次写博客，借鉴了许多别人的东西，但也算是把处理问题的过程说清楚了。写的不好也请见谅。今天也正好七夕，祝大家七夕快乐(✪ω✪)。

在IE，谷歌内核的浏览器里基于VLC利用rtsp查看实时监控（大华，海康）相关推荐

传统大华海康宇视安防摄像头RTSP流如何转webrtc直播低延时无插件浏览器视频播放
传统大华海康宇视安防摄像头RTSP流如何转webrtc直播低延时无插件浏览器视频播放 1.问题场景 2.WEBRTC延时对比 3.LiveNVR支持WEBRTC输出 4.RTSP/HLS/FLV/RT ...
学习笔记(16):C++编程FFMpeg（QT5+OpenCV）实战--实时美颜直播推流-推流基于rtsp协议的大华海康相机...
立即学习:https://edu.csdn.net/course/play/5694/106864?utm_source=blogtoedu rtsp 设置
针对谷歌浏览器以及谷歌内核的浏览器默认最小字体12px的正确解决方案（实用）
原文出处:https://blog.csdn.net/qq_27682041/article/details/72850719 谷歌浏览器中font-size小于12px时,字体就不会再缩小了.当时我 ...
android同时预览多个监控,基于VLC的Android多路视频监控系统.pdf
2013年12月15日现代电子技术 Dec.2013 第36卷第24期 ModernElectronicsTechnique Vol.36No.24 63 63 基于VLC 的Android 多路视 ...
基于VLC实现RTSP推流视频
基于VLC实现RTSP推流视频一.添加VLC头文件和库文件二.封装RTSPServer推流类三.测试代码不清楚推流大概原理的小伙伴,参考<设置VLC播放器进行RTSP推流视频> 这 ...
基于VLC实现RTSP推流桌面（共享桌面）
基于VLC实现RTSP推流桌面(共享桌面) 一.添加VLC头文件和库文件二.封装RTSPServer推流类三.测试代码不清楚推流大概原理的小伙伴,参考<设置VLC播放器进行RTSP推流桌面 ...
html调用谷歌内核,360浏览器指定Webkit(chrome)内核
起因很多web开发者对360浏览器都没有什么好感,拥有着庞大的用户量,但又因为种种特性导致网页兼容问题,尤其是360安全浏览器提供的双内核功能,总是将网站用IE内核去解析,而自己的网站 http:/ ...
基于 WebRTC 的 RTSP 视频实时预览
WebRTC相关视频讲解: 什么是WebRTC WebRTC入门到精通该怎么学? WebRTC框架剖析音视频流媒体高级开发:FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高 ...
pi数据库系统中国服务器,基于PI数据库的服务器实时监控系统研究与开发
摘要: 随着智能电网发展战略的提出,电力系统信息化程度的不断提高,电力企业信息系统的服务器.网络设备等信息设备越来越多,其重要性也越来越高.现行的信息系统的运行维护工作模式--信息值班员.系统管理员人 ...

在IE，谷歌内核的浏览器里基于VLC利用rtsp查看实时监控（大华，海康）

在IE，谷歌内核的浏览器里基于VLC利用rtsp查看实时监控（大华，海康）相关推荐

最新文章

热门文章