在web页⾯实时播放监控视频
背景
因为项⽬需求，需要在web页⾯播放实时监控视频，⽽且是同时播放多个视频，还⽀持切换页⾯播放。监控是⼤华和海康 ⼚家的，并没有做流服务器，还是rtsp的流媒体格式，所以不能⽤H5的video来播放。
⽅案⼀：video.js
后端把rtsp转成web⽀持的rtmp格式，然后使⽤来包装处理rtmp流媒体。
遇到的坑
1. 同时加载多个视频会占⽤⼤量内存，⽽且丢包严重，导致页⾯雪花，容易崩溃。
2. V5以上版本不⽀持播放rtmp流，
3. Vue build过后视频不能播放
解决办法
1. 按需加载
a. 按照需要加载的dom⼤⼩，加载不同分辨率的视频(这⼀点需要后台提供处理视频的参数)。分辨率决定的占⽤的内存
b. 只播放当前需要播放的视频，把其他的视频stop并且删除
2. 下载使⽤版本。(5.20.1 亲测可以)
3. 因为我使⽤使⽤npm安装的videojs，然后在build的时候会videojs.swf⽂件的路径指向会出错。
a. 下载videojs离线包，然后放在static⽂件夹使⽤
b. 或者在引⽤videojs的地⽅，videojs.options.flash.swf = './static/plugin/videojs/videojs.swf'
总结
不管怎么处理，丢包还是有的，播放多个视频始终达不到需要的效果，有的时候播放⼀个视频都会丢包严重。也可能是后台处理的问题。没办法，只能换⼀种实现⽅案
⽅案⼆：⼤华SDK⼆次开发
采⽤⼆次开发
流程
1. Java、C#等语⾔⼆次开发⼤华SDK，打包成ocx包。⽹上有相关教程
2. 解压OCX包。单击⽂件中的reg.bat注册dll(注册好dll就⾏了)
3. 前端代码
<!-- 这⾥的clsid 是打包成ocx的ID -->
<object classid="clsid:30209FBC-57EB-4F87-BF3E-740E3D8019D2"codebase=""standby=""id="playOcx"width="1280"height="720"name="pla yOcx"align="center">
<embed width="618"height="360"align="center"></embed>
</object>
<script>
var SSOcx = ElementById("playOcx");
// 下⾯就可以通过 来调⽤dll包中的⽅法了
// ⽐如 SSOcx.SetDeviceInfo("192.168.1.108",37777,0,"admin","admin");
</script>
总结
开发⿇烦。
功能简单，不⽀持⾳频。
基本上只⽀持IE。需要ActiveX(Chrome45 关闭了默认⽀持ActiveX，需要⼿动打开；Chrome49就完全不⽀持ActiveX， 新版Firefox 也不⽀持ActiveX)的⽀持才能直接调⽤dll。
⽅案三：
使⽤。如果你的电脑设备上已经和⼤华摄像头连通，可以直接⽤IE访问摄像头IP，会提⽰你下载。当然⽹上也有资源下载。
使⽤⽅法
1. 安装
2. 获取的clsid。 (注意：每个.exe⽂件的id可能都不⼀样。。如果你的电脑设备上已经和⼤华摄像头连通，可以直接⽤IE
访问摄像头IP，进⼊监控页⾯，然后查看元素，获取clsid)
3. 可以把上⾯审查元素的object对象复制出来。(和下⾯不⼀定⼀样)
<object id="player"width="100%"height="100%"
classid="clsid:7F9063B6-E081-49DB-9FEC-D72422F2727F"
codebase="">
</object>
1. 相关的js⽅法。(也不⼀定⼀样。也可审查元素获取调⽤⽅法)
var g_ocx = ElementById('player');
var bRet = g_ocx.LoginDeviceEx('192.168.0.102','554''admin','admin',0);
if(bRet ==0){
//设置窗⼝数量
g_ocx.SetWinBindedChannel(1,0,63,64);
//设置截图保存地址
g_ocx.SetConfigPath(1,"C:\\视频监控\\images");
//设置录制视频保存地址
g_ocx.SetConfigPath(2,"C:\\视频监控\\vidos");
//设置画质 0 ⾼ 1 低
// g_ocx.SetPicQuality(0);
//设置视频实时性 0-10 实时登记依次降低
g_ocx.SetAdjustFluency(0);
//监视模式
g_ocx.SetModuleMode(1);
//连接视频
g_ocx.ConnectRealVideo(0,1);
// 播放声⾳
g_ocx.PlayOpenSound();
// 停⽌声⾳
g_ocx.PlayStopSound();
}else{
alert("⽹络连接错误！");
return false;
}
function reqFullScreen(element){
var ocx = element;
if(Sys.ie){
//ie浏览器
ocx.SwitchToFullScreen();
}else{
//其他浏览器
ocx.OnFullScreenClk();
}
}
总结
功能相对较多。
基本上只⽀持IE。需要ActiveX(Chrome45 关闭了默认⽀持ActiveX，需要⼿动打开；Chrome49就完全不⽀持ActiveX， 新版Firefox 也不⽀持ActiveX)的⽀持才能直接调⽤dll。
⽅案四：H5Stream
使⽤，⽀持Chrome。。有后台管理界⾯，⽅便操作，配置丰富，功能齐全。
具体的使⽤⽅法请按照使⽤⽂档操作，操作⽐较简单，需要单独开启端⼝来启动服务。
总结
操作简单
功能齐全，播放清晰
⽀持⼤部分浏览器
底层好像是使⽤websocket来做的流媒体播放，也是⽤videojs基础框架。
待解决的问题
1. 105个监控配置进去就就开始传输，不知道怎么按需加载。
2. 也因为上⾯的原因，导致后台服务容易down掉，页⾯在⼀定时间后也会崩溃。
3. 不知道怎么动态设置分辨率。不同场景下加载同样分辨率的视频流，总感觉在浪费资源。
更多推荐
视频,播放,需要
发布评论