admin管理员组文章数量:1659530
最近一直在搞监控视频接入方面的事情,积累了不少的经验,这里总结一下。提前说一句,本文提到的视频接入均是以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://www.elefans.com/dongtai/1729837950a1214531.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论