vue3 播放 m3u8、RTSP视频

因为项目中会遇到播放不同视频流的情况，这里聚集了博主遇到的情况，合集整理给大家。

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:013d56a9d7d97829d890679cb8a2e4d3@zephyr.rtsp.stream/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视频.