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

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

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

优点：

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

缺点：

HLS只支持H264格式，H265格式下无法播放(个人使用情况，如果你能找到可以播放的，请弹我)。而且因为HLS流是分片下载播放，需要浏览器先下载然后播放，所以延迟很高，在十秒多甚至更多。并且对浏览器和网速的要求还是比较高的，视频流畅度取决于网速。（我使用辅码流单路播放很流畅，辅码流6路播放偶尔卡顿）
RTSP流网上的解决方案不多，大部分都是需要插件进行播放，这就造成了对控件的要求很高，但是控件一般对网页的适配度又不高，很容易搞成错位，浮屏或者其他的样式问题，但是对于流畅度和清晰度相比来说会好一点。插件的解决方案，我暂时看到两种，一种是VLC插件，但是支持的浏览器少。另一种是大华官方的插件，不支持自定义菜单，并且插件浮于浏览器最上册，对网页版很不友好。（网上还有一种方案是将RTSP通过FFmpeg转码到HLS/FLV等流进行播放，这种就需要在服务器上搭一个转码服务，对服务器的消耗还是挺大的，所以就没有选择）

二、HLS流下的VUE播放

vue3-video-player

使用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

使用开源的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

大华官网->下载->插件，视频WEB插件-DHPlayer V_xxxxxx程序包和文档下载。
下载完成后，安装DHplayer.exe，安装目录随意。
安装结束后，进入安装目录\demo\vue2_Version\插件+vue组件源码\目录下，将DHplayer.vue和videoPlayer.js放入项目文件夹下。（这两个文件放入同一个文件夹下）

组件上使用

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。