最近在工作中需要在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位的突然发现可以了,真是悲喜交加。当然还有未解决的问题:监控画面两边的黑框问题,标签下方的控制按钮不知道怎么去掉,后面有空再研究吧。第一次写博客,借鉴了许多别人的东西,但也算是把处理问题的过程说清楚了。写的不好也请见谅。今天也正好七夕,祝大家七夕快乐(✪ω✪)。