在vue3中实用JSMpeg的踩坑记录

1.下载jsmpeg.min.js

jsmpeg下载链接，点进去把整个压缩包下载下来，我们只需要其中的jsmpeg.min.js这一个文件

2.将jsmpeg.min.js复制到你的项目中

注意！要把jsmpeg.min.js放到项目的 src/utils 目录下！不要随便找个位置放！我因为这个问题卡了好久（具体原因不明）

3.更改jsmpeg.min.js中的代码

刚点进去这个文件内容是这样的，更改我圈出来的内容

以下是已经改好的代码

（将“var ”改为“window.”，这一步是为了将JSMpeg挂到window对象上）

4.在main.ts文件中引入该文件

在src目录下找到main.ts并打开

在第一行加入如下代码

import '@/utils/jsmpeg.min'

5.完成

至此，配置完成。现在理论上可以在任何位置直接实例化JSMpeg对象了

具体使用例子如下：

<template>
  <canvas id="jsmpeg-canvas"></canvas>
</template>

<script>
  export default {
    name: "Test",
    components: {
    },
    methods: {
      getVideos(){
        let canvas = document.getElementById('jsmpeg-canvas')
        let url = 'ws://127.0.0.1:8066'
        let player = new JSMpeg.Player(url, {canvas: canvas})
      }
    },
    data(){
      return{
      }
    },
    mounted () {
      this.getVideos()
    }
  }
</script>

<style scoped>

</style>