Vue框架怎么使用mediainfo.js来检测视频文件是否有音轨？

Z时代
2024-01-10
分类：综合

vue

啥是MediaInfo?

简而言之，MediaInfo是一个能读取音频和视频文件并分析和输出音视频信息的工具，能输出的内容包括视频信息，音轨，字幕等。

MediaInfo也可以在web端使用，需要使用到mediainfo.js。mediainfo.js 是MediaInfoLib通过WebAssembly技术封装来的，也是可以支持查看音视频的信息，

本文重点介绍下vue框架要怎么使用mediainfo.js。

vue框架使用mediainfo.js

web端可以通过两种方式来使用mediainfo.js

CDN: <script type="text/javascript" src="https://unpkg.com/mediainfo.js/dist/mediainfo.min.js"></script>

Bundler: npm install mediainfo.js

因为mediainfo.js依赖于MediaInfoModule.wasm, 目前需要保持mediainfo.js和MediaInfoModule.wasm在同个服务路径，即web浏览器会从同个路径下去

请求mediainfo.js和MediaInfoModule.wasm。

CDN版本已经自动加载了MediaInfoModule.wasm了，需要注意的是通过npm方式加载的，需要在webpack文件配置下。官网介绍了react和augular怎么配置MediaInfoModule.wasm,

但是没有Vue版本的。

假设你用的vue2.0，在项目路径下的vue.config.js目录下加入以下配置

使用copy-webpack-plugin将MediaInfoModule.wasm拷贝到构建路径

const CopyPlugin = require('copy-webpack-plugin')
const wasmFile = resolve('node_modules/mediainfo.js/dist/MediaInfoModule.wasm')

配置webpack plugin

  configureWebpack: {
    plugins: [
      new CopyPlugin([{ from: wasmFile, to: '.' }]),
    ]
  }

注意上面的new CopyPlugin([{ from: wasmFile, to: '.' }])这个是webpack版本比较低的写法。我按照React/webpack

的写法会提示copy plugin patterns 需要的参数是array，索引改成了数组传入就编译成功了。版本比较高的应该是

 new CopyPlugin({
      patterns: [
        { from: wasmFile, to: '.' },
        { from: 'CNAME', to: '.' },
      ],
    }),

导入使用

<template>
  <Content>
    <Upload
      ref="upload"
      :show-upload-list="true"
      :on-success="handleSuccess"
      :format="imageFormat"
      :max-size="imageSize"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      :before-upload="handleBeforeUpload"
      :data="uploadData"
      type="drag"
      action="/api/v1/image_upload"
      style="display: inline-block;width:58px;"
      v-show="showUploadBtn===true"
    >
      <div style="width: 58px;height:58px;line-height: 58px;">
        <Icon type="ios-camera" size="20"></Icon>
      </div>
    </Upload>
  </content>
</template>
import mediainfo  from 'mediainfo.js'
export default {
  ......
  methods: {
    handleBeforeUpload(file) {
      var vm = this
      const getSize = () => file.size
      const readChunk = (chunkSize, offset) =>
      new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = (event) => {
          if (event.target.error) {
            reject(event.target.error)
          }
          resolve(new Uint8Array(event.target.result))
        }
        reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))
      })
      mediainfo().then((mediainfo) =>{
        mediainfo
        .analyzeData(getSize, readChunk)
        .then((result) => {
          if (result['media'] !== undefined) {
            console.log(result['media'])
            let track = result['media']['track']
            if (track !== undefined) {
              for (let i = 0; i < track.length; i++) {
                if (track[i]['@type'] === 'Audio') {
                  console.log(track[i])
                  this.$Message.warning({
                    content: `当前视频有音轨`
                  })
                }
              }
            }
          }
        })
        .catch((error) => {
          console.log(`An error occured:\n${error.stack}`)
        })
      })
    }
  }
}