Vue框架怎么使用mediainfo.js来检测视频文件是否有音轨？
啥是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: [
// npm run dev 时拷贝到dist目录下
new CopyPlugin([{ from: wasmFile, to: '.' }]),
// npm run build 时拷贝到dist/js目录下
new CopyPlugin([{ from: wasmFile, to: '/js'} ])
]
}
注意上面的new CopyPlugin([{ from: wasmFile, to: '.' }])这个是webpack版本比较低的写法。我按照React/webpack
的写法会提示copy plugin patterns 需要的参数是array，索引改成了数组传入就编译成功了。版本比较高的应该是
new CopyPlugin({
patterns: [
{ from: wasmFile, to: '.' },
{ from: 'CNAME', to: '.' },
],
}),
另外，npm run dev和npm build需要拷贝到不同目录
- 导入使用
<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}`)
})
})
}
}
}
页面组件用的iview的Upload组件，在回调方法:before-upload="handleBeforeUpload"里可以取到file对象，然后分块读取文件内容，
由mediainfo读取内容后输出显示
总结123
- 通过mediainfo.js 可以在web页面在线解析音视频的参数
- vue等web框架需要通过配置webpack配置，在打包时需要通过copy-webpack-plugin插件拷贝到dist目录
- 在web端需要结合upload等组件使用，取得file对象后使用mediainfo().then((media)=>{//you code})进行分析
参考：
