因为项目中会遇到播放不同视频流的情况，这里聚集了博主遇到的情况，合集整理给大家。
1.m3u8的视频流，使用vedio.js
(1).先npm i video.js
(2).引用vedio.js并创建实例，进行资源配置
具体代码如下
<template>
<div class="monitors">
<div class="myVedioBox">
<video
class="video-js vjs-default-skin"
ref="videoPlay1"
muted
:autoplay="true"
:controls="true"
style="object-fit: fill; width: 100%; height: 100%"
>
<source src="" type="application/x-mpegURL" />
</video>
</div>
</div>
</template>
<script setup>
import { nextTick, onMounted, reactive } from "vue";
import videojs from "video.js";
import "video.js/dist/video-js.min.css";
const data = reactive({});
const videoPlay1 = ref();
let Player1 = null;
const VideoPlay = () => {
nextTick(()=>{
Player1 = videojs(videoPlay1.value, {
sources: [
{
src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
type: "application/x-mpegURL",
},
],
});
})
};
onMounted(() => {
VideoPlay();
});
</script>
<style scoped lang='less'>
* {
box-sizing: border-box;
}
.monitors {
width: 100%;
height: 100%;
background: #ebf1f6;
border-radius: 8px 8px 8px 8px;
border: 1px solid #95def7;
padding: 15px 13px;
.myVedioBox {
width: 100%;
height: 100%;
}
}
</style>实现效果
2.RTSP的视频流
这里需要一个websocket服务，博主是用nodejs搭的本地服务，还需要使用ffmpeg转码，不用着急，下面都会提到.此方法会比较耗资源.
（1）.创建Node项目搭建websocket服务
这里需要已经下载了node，博主就不说下载node的步骤了，需要的可以评论博主或者搜索其他文章。
(a).新建一个文件夹用vscode或者cmd打开
(b).在终端中输入npm init初始化一个项目，这个时候应该是会多一个package.json文件
(c).接下来下载后面会使用到的库
npm i fluent-ffmpeg ws websocket-stream @ffmpeg-installer/ffmpeg
(d).创建一个index.js文件，代码如下
const WebSocket =require ('ws')
const ffmpegPath = require('@ffmpeg-installer/ffmpeg')
const webSocketStream =require('websocket-stream/stream')
const ffmpeg = require('fluent-ffmpeg')
ffmpeg.setFfmpegPath(ffmpegPath.path);
const wbs = new WebSocket.Server({ port: 8888, perMessageDeflate: false })
wbs.on('connection', handleConnection)
function handleConnection (ws, req) {
console.log("已连接")
const url = req.url.slice(1)
const stream = webSocketStream(ws, { binary: true })
const ffmpegCommand = ffmpeg(url)
.addInputOption('-analyzeduration', '100000', '-max_delay', '1000000')
.on('start', function () { console.log('Stream started.') })
.on('codecData', function () { console.log('Stream codecData.') })
.on('error', function (err) {
console.log('An error occured: ', err.message)
stream.end()
})
.on('end', function () {
console.log('Stream end!')
stream.end()
})
.outputFormat('flv').videoCodec('copy').noAudio()
stream.on('close', function () {
ffmpegCommand.kill('SIGKILL')
})
try {
// 执行命令 传输到实例流中返回给客户端
ffmpegCommand.pipe(stream)
console.log("执行命令 传输到实例流中返回给客户端")
} catch (error) {
console.log(error)
}
}(e).node index.js 启动服务
（2）.vue3连接服务
前端部分只使用了flv.js,先npm i flv.js下载.
然后直接上代码
<template>
<div class="wrap">
<video
id="videoElement"
class="video"
muted
autoplay
controls
ref="player"
></video>
</div>
</template>
<script setup>
import flvjs from "flv.js"; // 引入flvjs
import { onMounted, onUnmounted, ref } from "vue";
const player = ref(null);
onMounted(() => {
// 如果浏览器支持flvjs，则执行相应的程序
if (flvjs.isSupported()) {
let videoElement = document.getElementById("videoElement");
// 准备监控设备流地址
const url =
"rtsp://rtspstream:[email protected]/movie";
// 创建一个flvjs实例
// 下面的ws://localhost:8888换成你搭建的websocket服务地址，后面加上设备流地址
player.value = flvjs.createPlayer({
type: "flv",
isLive: true,
url: "ws://localhost:8888/" + url,
});
player.value.on("error", (e) => {
// console.log(e)
});
// 将实例挂载到video元素上面
// player.attachMediaElement(this.$refs.player)
player.value.attachMediaElement(videoElement);
try {
player.value.load();
player.value.play();
} catch (error) {
// console.log(error)
}
}
});
onUnmounted(() => {
player.value && player.value.pause(); //暂停播放数据流
player.value && player.value.unload(); //取消数据流加载
player.value && player.value.detachMediaElement(); //将播放实例从节点中取出
player.value && player.value.destroy(); //销毁播放实例
player.value = null;
});
</script>
<style lang="scss" scoped>
.wrap {
width: 100%;
height: 100%;
.video {
// width: 300px;
// height: 300px;
width: 100%;
height: 100%;
}
}
</style>实现效果如下
如果需要拿来测试的rtsp视频流可以在https://rtsp.stream/网站中填写邮箱登录可获取免费的rtsp视频.