Vue3下的视频直播流方法（RTSP和HLS流）

Vue3下的视频直播流方法RTSP和HLS流

应用场景:大华视频直播流有HLS和RTSP两种需要在vue界面上播放

一、两种流的在vue下的优缺点

优点

1. HLS流实现简单使用控件和js即可实现完美融合前端界面界面好不好看取决于你的美工。而且因为HLS是分片下载播放的可以直接在控件上实现回看视频的效果开源并且开源控件有多种选择。
2. RTSP流实时性高清晰度更高个人感觉不知道是不是设置问题流畅度也很高并且支持H264和H265。

缺点

1. HLS只支持H264格式H265格式下无法播放(个人使用情况如果你能找到可以播放的请弹我)。而且因为HLS流是分片下载播放需要浏览器先下载然后播放所以延迟很高在十秒多甚至更多。并且对浏览器和网速的要求还是比较高的视频流畅度取决于网速。我使用辅码流单路播放很流畅辅码流6路播放偶尔卡顿

2. RTSP流网上的解决方案不多大部分都是需要插件进行播放这就造成了对控件的要求很高但是控件一般对网页的适配度又不高很容易搞成错位浮屏或者其他的样式问题但是对于流畅度和清晰度相比来说会好一点。插件的解决方案我暂时看到两种一种是VLC插件但是支持的浏览器少。另一种是大华官方的插件不支持自定义菜单并且插件浮于浏览器最上册对网页版很不友好。网上还有一种方案是将RTSP通过FFmpeg转码到HLS/FLV等流进行播放这种就需要在服务器上搭一个转码服务对服务器的消耗还是挺大的所以就没有选择

二、HLS流下的VUE播放

vue3-video-player

1. 使用vue3-video-player进行播放GitHub地址这里只介绍npm安装方式其他方式查看GitHub地址内其他安装方式

   • 首先npm安装依赖

      npm install @cloudgeek/vue3-video-player --save
     

   • 组件或者全局引用

     //...全局内引用
     import Vue3VideoPlayer from '@cloudgeek/vue3-video-player'
     import '@cloudgeek/vue3-video-player/dist/vue3-video-player.css'
     //....
     app.use(Vue3VideoPlayer, {
         lang: 'zh-CN'
       })
     

     引入之后就可以直接播放一些MP4等视频。

   • 如果要播放HLS需要在组件页引入HLS相关js

     import HLSCore from '@cloudgeek/playcore-hls'
     data() {
         return {
           HLSCore,
     		}
     }
     
     //然后再template内添加控件
     //:src是地址title是视频标题
     <div class="test-player-wrap">
       <vue3-video-player :core="HLSCore" :src="liveArrSource" title="test">
       </vue3-video-player>
     </div>
     

     使用这个插件有一些问题

     问题1.muted设为true时有时会存在声音存在即使chrome浏览器策略默认静音但是但是会存在视频声音。

     我的解决方法是在组件加载完后再进行设置一次

     this.$nextTick(() => {
         var videos = document.getElementsByTagName("video")
     //多个组件
         videos.forEach(element => {
              element.muted = true;
              element.autoplay = true;
         	});
         })
     

     问题2:更换地址后视频播放源没有改变需要给组件属性上添加key

     <vue3-video-player :core="HLSCore" :key="liveArrSource" :src="liveArrSource" title="test">
     

EasyPlayer.js

1. 使用开源的EasyPlayer.js播放这个控件支持多种流的播放网上选择的也比较多。GitHub

   • npm安装依赖

     npm install @easydarwin/easyplayer --save
     

   • 将指定文件放入指定目录(网上很多人使用的都是copy-webpack-plugin在js种进行复制我没成功直接手动复制)

     将EasyPlayer-element.min.js和EasyPlayer.wasm放入到public文件夹下即可。

   • 组件内引入并使用具体参数可参考GitHub内

     import EasyPlayer from '@easydarwin/easyplayer';
     components: { EasyPlayer }
     
     
     //template内添加控件
     <EasyPlayer :videoUrl="videoUrl" live :autoplay="autoplay" stretch></EasyPlayer>
     

三、RTSP流下的VUE播放

VLC浏览器支持少不介绍

• 自行查看

大华官网插件DHpayer

1. 大华官网->下载->插件视频WEB插件-DHPlayer V_xxxxxx程序包和文档下载。

2. 下载完成后安装DHplayer.exe安装目录随意。

3. 安装结束后进入安装目录\demo\vue2_Version\插件+vue组件源码\目录下将DHplayer.vue和videoPlayer.js放入项目文件夹下。这两个文件放入同一个文件夹下

4. 组件上使用

   import DHPlayer from "你放的地址/HPlayer"
   //export default下添加
   components: {
           DHPlayer
       },
   //template添加
   <DHPlayer :noTip="true" num="6" class="dhplay" ref="MutilPlayer" videoId="MutilPlayer" :pathList="pathList" :shieldClass="['test_drop']"></DHPlayer>
   

   注意: num是初始化窗口数量pathList必须是视频地址【数组】

DHPlayer的问题

1. 浮于浏览器上层最新版的插件和div有一点位移可通过样式改善。 2. 不可自定菜单或者隐藏右键菜单如果想做全屏服务就会覆盖其他控件就很难受但是控件自带全屏按钮。 3. 需要每台电脑安装DHplayer.exe.(下载可能会报病毒火绒下会报病毒关掉杀毒软件重新下载或者安全允许就行了) 4. 如果点奥没安装插件需要提示到videoPlayer.js里分eerror方法内进行添加。

优点视频可拖拽可自定义分屏一个控件就可以播放多路视频视频流畅度很nice。

具体功能可在 安装地址\demo\vue2_Version\下打开 start.exe查看demo上面有代码可以参考。

如果对是视频流畅度和格式有要求或者只支持RTSP推荐大华插件如果希望融合页面支持HLSFLV或者其他流推荐Vvue3-video-player和EasyPlayer.js。