在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:[email protected]:554/h264/ch1/main/av_stream
rtsp://admin:[email protected]:554/MPEG-4/ch1/main/av_stream

子码流：
rtsp://admin:[email protected]/mpeg4/ch1/sub/av_stream
rtsp://admin:[email protected]/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:[email protected]: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:[email protected]/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查看实时监控（大华，海康）

猜你喜欢