admin管理员组文章数量:1659567
最近一直在搞监控视频接入方面的事情，积累了不少的经验，这里总结一下。提前说一句，本文提到的视频接入均是以RTSP为基础转码而来的，至于用海康大华等插件播放的咱们就闭口不提了可以看这个文章，在vue中接入ocx控件播放监控视频。
现在监控视频在前端的播放主要有如下三种方式：
RTSP视频流播放
RTMP视频流播放
HLS视频流播放
RTSP
咱们一种一种的说，首先是RTSP这种其实和海康插件是一样的，需要VLC插件的支持，所以也是要用老版本的浏览器才可以使用。其实刚接触的时候查到了一个js包vxg-video可以前端在线播放RTSP，但是接入的效果差强人意，虽然能播放但是延迟太高，遂放弃，感兴趣的可以自己了解一下。
RTMP
然后是RTMP视频流，这里放一个链接，感兴趣的可以自己了解它和RTSP有什么区别。
简单来说呢，就是RTMP是Adobe维护的，没开源，而RTSP和HTTP一样都是开源的。所以呢，要在前端播放RTMP视频就必须得使用flash插件，看主流浏览器对flash的态度，只能说且用且珍惜吧。
现在在前端播放RTMP主要有三种方案，videojs，jwplayer，ckplayer。先说接入效果吧，ckplayer和videojs成功了，jwplayer虽然失败了，但是在这里也谈一下吧，记录下失败的地点，等日后有实力了再试试能不能成功。
流行的不得了的videojs
当初要做RTMP播放的时候我第一个想到的就是videojs，毕竟这个太流行了，也有大神给vue封装了videojs，名字叫做vue-video-player，这两者我都尝试了，很尴尬的是，引入原生videojs成功了，但是使用vue-video-player却失败了，可能是后者的作者大大很久没维护的原因了吧，下面先贴一下videojs播放的源码
preload="auto"
width="500"
height="400"
data-setup='{ "html5" : { "nativeTextTracks" : false }}'>
/* 下载的包
"video.js": "^5.6.0",
"videojs-flash": "^2.2.0"
"videojs-swf": "^5.4.2",
*/
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'
vi
版权声明：本文标题：vue项目使用大华摄像头怎样初始化_Vue接入监控视频技术总结 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1729837950a1214531.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论