关于vue-cli2.0 在项目中播放H.265编码视频流

在近期的工作中,发现了一个问题,就是在播放H265的直播视频流中,发现谷歌浏览器是不支持H265视频流播放的。

新的发现

发现了EasyWasmPlayer,详细请见https://github.com/tsingsee/EasyPlayer.js.

问题所在

看完上边地址内容后再往下看
1.项目用的是vue-cli2版本
2.按照上边的步骤操作完毕以后发现会一直报错,一开始以为是js文件的问题,然后看了下源文件没毛病,终于想到一个办法,试一下直接引用包。
在这里插入图片描述
在这里插入图片描述

3.直接在当前文件引用包
在这里插入图片描述
4.在下边console.log(new WasmPlayer),终于可以打印到数据了,但是还是会报错 WasmPlayer is not defined
5.最后终于想到,是因为libDecoder.wasm文件,要求要放到根目录,我只是放到与index.html放在同级,没有想到应该是webpack打包后的同级目录。
6.于是我改变了webpack的配置,打开build 下的 webpack.develop.conf.js文件,添加上以下代码

    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      },
      {
        from: path.resolve(__dirname, '../static/libDecoder.wasm')
      }
    ])

7.path.resolve里边的第二个参数就是libDecoder.wasm文件所在的位置。
8.最后一步npm run build 一下,在重新打开文件,就可以啦。

Logo

前往低代码交流专区

更多推荐