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

原创 2023-06-19 18:54:53 2.4w 阅读 AI写同款

收录于

rtsp

hls

黄焖大排骨

码龄8年墨衍会员 · AI 创作全网分发

52粉丝19篇原创

关注

Vue3/Vite引入EasyPlayer.js播放H265视频错误的问题 Vue3/Vite引入EasyPlayer.js播放H265视频错误的问题及播放器刚开始接收不到流报错的解决方案阅读详情

AI摘要

本文探讨了Vue3中使用HLS和RTSP流在大华视频直播中的优缺点，介绍了vue3-video-player和EasyPlayer.js的实战应用，并针对RTSP流的DHPlayer插件进行了详细分析。着重讨论了HLS的分片下载挑战、RTSP的实时性和插件兼容性问题。

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程序包和文档下载。（如果这里找不到，请看最后补充内容，有Demo和教程）
下载完成后，安装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。

补充内容：

很多人一直私我说找不到文档和插件。这里说明一下：我去官网看了一下，我也找不到了，因为官网改动好大，而且他插件好像版本也在更新。
这里提供一下我找到的大华最新插件下载地址和教程地址（如果无法使用说明又改了，我如果能找到，也会及时更新的）：
dhplayer在线文档链接

WSplayer在线文档链接,应该是ws和wss通信用的

HLS/FLV在线文档链接