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，推荐大华插件，如果希望融合页面，支持HLS，FLV，或者其他流，推荐Vvue3-video-player和EasyPlayer.js。