vue使用vue-video-player实现web视频直播展示m3u8格式

最近有一个需求，就是web展示摄像头的实时画面，mentor让我先探索探索，所以我先测试一些小demo。
这里边个人想了一下啊，还是比较复杂的，包含推流和拉流等操作，还有延迟的问题要解决。
自己主要负责前端，所以先用vue-video-player播放了一下本地的视频，熟悉一下功能，然后进行流视频的测试。
下面是.m3u8直播流视频的展示代码步骤：

安装插件

npm install vue-video-player -S
npm install 'video.js' -S

安装的过程比较慢，如果等的时间比较长，可以先ctrl + C结束，设置镜像

npm config set registry https://registry.npm.taobao.org

然后再执行上边的安装指令。

引入插件

在要使用该视频播放的页面引入该插件

  // require stylesimport 'video.js/dist/video-js.css'import 'vue-video-player/src/custom-theme.css'//引入hls.jsimport 'videojs-contrib-hls'// video-playerimport { videoPlayer } from 'vue-video-player'

使用

在html部分

<video-player ref="videoPlayer" style="width: 100%;height: 100%;" class="vjs-custom-skin" :options="playerOptions">
</video-player>

然后JS的data里对其进行配置

     playerOptions: {language: 'zh-CN',  // 语言playbackRates: [0.5, 1.0, 1.5, 2.0],  // 可选的播放速度sources: [{type: "application/x-mpegURL",   // 类型withCredentials: false,src: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8' //自己对应视频流的url}],techOrder: ['html5'],flash: { hls: { withCredentials: false } },html5: { hls: { withCredentials: false } },autoplay: true,  // 是否自动播放controls: true,  // 是否显示控制栏notSupportedMessage: '无信号',muted: true, // 是否静音}

之后保存运行，就可以在页面中加载出直播了

注意上边代码的【自己对应视频流的url】这个改成自己的就可以了。

我是网上找的在线可以测试的m3u8流，我这会是可以的，时间是2022.08.12，之后不知道还能不能加载出视频。我找的时候，很多2020年或者2021年的，我现在测试已经放不出视频了。
这是我目前可以放出视频m3u8的网址

http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8

在放视频前，可能真的不是自己代码的问题，而是测试的视频流根本就无法播放！！
下面放一个可以测试视频流是否可用的在线网址：
http://tool.liumingye.cn/m3u8/

如图，我现在用的测试流是可以的。和自己的web放的视频几乎是同步的。

以上就是.m3u8展示的过程。
下午和mentor交流的时候，他说m3u8格式大部分用于电视放映，而rtmp主要用于摄像头视频直播，所以还要再探索探索rtmp格式的播放。

分割线

了解了一下，rtmp流需要flash插件支持，而目前我搜到的已经实现的方法，大部分都是2020年和2021年基于flash插件实现的，我自己跑了一下代码，浏览器直接提示不支持此插件。

而rtsp流不能直接在浏览器中播放，有之前的办法将rtsp转为rtmp在页面播放，但是现在插件不能用，所以这个方法也不行。
最后看到的方法就是借助后端转码推流，比如RTSP转HLS、RTSP转FLV，转为这些格式在前端播放。