我们项目里用到了华为的摄像机,在实况浏览的时候爬了好几天的坑,终于东拼西凑,自己弄好了一份html的demo,可以播放视频记录一下.
1.我们是从华为轻量云上获取的摄像机的参数和视频信息 轻量云包括VCM(分析平台,网页端可以登录) ,VCN(监控平台需要下载客户端才能登录)
2.我是调用vcn上的接口拿到相应摄像机的rtsp地址,下面我就直接上代码了
注意要先在电脑安装VLC插件,才能在浏览器调用,下载地址: https://www.videolan.org/ 注意32和64位,我使用的32位.
vlc web开发文档地址 : https://wiki.videolan.org/Documentation:WebPlugin/ 里面有详细介绍
这是一个基本的html页面 ,将rtsp地址替换下面的地址即可,只支持IE,和360(因为有ie内核),Chrome当前版本是不支持的,网上说45版本以下的支持,但是我试了还是不行,可能是不会配置.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<object type='application/x-vlc-plugin' id='vlc' events='True' width="800" height="600" pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.2.2/npapi-vlc-2.2.2.tar.xz">
<param name='mrl' value='rtsp://player.daniulive.com:554/live68906.sdp' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='true' />
</object>
</body>
</html>
很不幸,我这样弄完,本地的直连摄像头有画面了,但是通过vcn获取的rtsp地址还是没有视频画面,但是很奇怪获取到的rtsp在vlc客户端程序里是有画面的.发现是客户端程序里有一个这样的配置:
在"工具"=>偏好设置>输入/编解码器 里面有个设置流协议的,猜测客户端是因为有这个设置才能播放画面的,我的demo没有这项设置
然后在开发文档里找了下,我把这个加上就可以了…
下面是修改后的demo,是可以播放从vcn拿到的rtsp的视频的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<object type='application/x-vlc-plugin' id='vlc' events='True' width="800" height="600" pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.2.2/npapi-vlc-2.2.2.tar.xz">
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='true' />
</object>
<script>
var vlc=document.getElementById('vlc');
var options = new Array("rtsp-tcp")
var id = vlc.playlist.add('rtsp://192.168.0.23:554/06707147186818720101?DstCode=01&',"fancy name",options);
vlc.playlist.playItem(id);
</script>
</body>
</html>
另外华为的rtsp地址只有30秒有效期,查过30秒没被使用就作废了,使用过一次也作废了,播放上以后就可以一直播放了.
过程中还发现了一个测试用的软件 WindowsPusher&Playe 它可以将本地屏幕画面做成rtsp源,这样测试的时候就可以先在本地测试,通过了再连摄像头测试.下面是软件的下载地址: https://github.com/daniulive/SmarterStreaming
过程中找了好多方案 vlc当前似乎只支持ie内核的浏览器,新版的Edge也不支持吧,另外还发现 H5Stream 感觉还不错 但是比较复杂,你们如果有兼容性更好的demo欢迎给我留言啊.最好能支持Chrome
来源：CSDN
作者：阿彤木11
链接：https://blog.csdn.net/weixin_43607664/article/details/103466578