vue3 EasyMeida RTSP WEB 播放器

1、下载 EasyMedia-1.2.0.jar  提取码: 9uv7

2、进入下载目录运行：java -jar EasyMedia-1.2.0.jar (注：需要安装java环境，该步请自行安装，该服务运行端口为8888，若其它服务占用了该端口，请自行处理再运行)

3、访问：http://localhost:8888，测试流：

        3.1   点击左侧菜单中的：流管理

        3.2   点击新增流，输入摄像头的流地址，备注可空

        3.3   点击左侧菜单演示FLV，右侧[选择流快速填写]下拉选择刚添加的流地址，点击右侧播放

到此，表示流测试成功～

4、在vue3项目中，package.json中的dependencies对象中加入2个包：

        "xgplayer": "^2.18.2",

        "xgplayer-flv.js": "^2.2.1"

        执行 npm i

5、新建player.vue文件：

        

<template>
  <div class="player">
    <div class="video" :id="videoId"></div>
  </div>
</template>
<script setup>
import {ref,defineProps} from 'vue'
import FlvJsPlayer from 'xgplayer-flv.js'
import Player from 'xgplayer'

const props = defineProps({
  src: {
    type: String,
    default: ''
  }
})

const randomId = (len = 9)=> {
    let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = ''
    for (let i = 0; i < len; i++) {
        result += str.charAt(Math.floor(Math.random() * str.length))
    }
    return result;
}

const player = ref({})
const isPlay = ref(false)
const videoId = randomId()

//创建播放器
const createPlayer = () => {
  isPlay.value = true
  player.value = new FlvJsPlayer({
    id: videoId,
    url: props.src,
    fitVideoSize: 'auto',
    fluid: true,
    autoplay: true,
    isLive: true,
    playsinline: false,
    screenShot: true,
    whitelist: [''],
    ignores: ['time'],
    closeVideoClick: true,
    errorTips: '<span class="app-error">无视频源</span>',
    customConfig: {
      isClickPlayBack: false
    },
    flvOptionalConfig: {
      enableWorker: true,
      enableStashBuffer: true, //启用缓存
      stashInitialSize: 4096, //缓存大小4m
      lazyLoad: false,
      lazyLoadMaxDuration: 40 * 60,
      autoCleanupSourceBuffer: true,
      autoCleanupMaxBackwardDuration: 35 * 60,
      autoCleanupMinBackwardDuration: 30 * 60
    } //flv.js可选配置项 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config)
  })
}

const changeVideo = (url) => {
  player.value.src = url;
}

onMounted(() => {
  createPlayer()
})

onBeforeUnmount(()=>{
  player.value && player.value.destroy();
})
</script>
<style scoped lang="scss">
.player {
  width: 100%;
  height: 100%;
  position: relative;

  .video{
    background: #000;
    width: 100%;
    height: 100% !important;
    padding: 0 !important;
  }
}
</style>

6、父级页面引入：

        <player :src="playerUrl" />

        playerUrl播放地址：

7、预览画面：