wasm 编译 ffmpeg 还有问题版本

参考了这位大牛的文章 https://mp.weixin.qq.com/s/ccEjtjEyH3fRMNZQwF687w

要记得编译脚本在的sdk根目录执行 sh文件EXPORTED_FUNCTIONS新版本不支持到处__exports_main 函数但是可以直接使用

直接贴html文件上来吧后面读取日志转码的时候有溢出的情况坑了我好久

const ffmpeg = Module.cwrap('emscripten_proxy_main', 'number', ['number', 'number']);

<html>

<head>

<style>

html,

body {

margin: 0;

100%;

height: 100%;

}

body {

display: flex;

flex-direction: column;

align-items: center;

}

</style>

</head>

<body>

<h3>上传视频文件，然后转码到 mp4 (x264) 进行播放!</h3>

<p id="message">ffmpeg 脚本需要等待 5S 左右加载完成</p>

const readFromBlobOrFile = (blob) =>

new Promise((resolve, reject) => {

const fileReader = new FileReader();

fileReader.onload = () => {

resolve(fileReader.result);

};

fileReader.onerror = ({

target: {

error: { code },

}) => {

reject(Error(`File could not be read! Code=${code}`));

};

fileReader.readAsArrayBuffer(blob);

});

const message = document.getElementById("message");

const transcode = async ({ target: { files } }) => {

const { name } = files[0];

message.innerHTML = "将文件写入到 Emscripten 文件系统";

const data = await readFromBlobOrFile(files[0]);

// Module.HEAP8.set()

Module.FS.writeFile(name, new Uint8Array(data));

const ffmpeg = Module.cwrap("emscripten_proxy_main", "number", [

"number",

]);

const args = [

"ffmpeg",

"-hide_banner",

"-nostdin",

"-report",

"-i",

name,

"out.mp4",

];

const argsPtr = Module._malloc(

args.length * Uint32Array.BYTES_PER_ELEMENT

);

args.forEach((s, idx) => {

const buf = Module._malloc(s.length + 1);

Module.writeAsciiToMemory(s, buf);

Module.setValue(

argsPtr + Uint32Array.BYTES_PER_ELEMENT * idx,

buf,

"i32"

);

});

message.innerHTML = "开始转码";

ffmpeg(args.length, argsPtr);

let aTimes = 0;

const timer = setInterval(() => {

aTimes++;

console.log(" aTimes is ", aTimes);

const logFileName = Module.FS.readdir(".").find((name) =>

name.endsWith(".log")

);

if (typeof logFileName !== "undefined") {

let array = Module.FS.readFile(logFileName);

// const log = String.fromCharCode.apply(null, Module.FS.readFile(logFileName));

var log = "";

var chunk = 8 * 1024;

var i;

for (i = 0; i < array.length / chunk; i++) {

log += String.fromCharCode.apply(

null,

array.slice(i * chunk, (i + 1) * chunk)

);

}

log += String.fromCharCode.apply(null, array.slice(i * chunk));

console.log(" log is ", log);

if (log.includes("frames successfully decoded")) {

clearInterval(timer);

message.innerHTML = "完成转码";

const out = Module.FS.readFile("out.mp4");

const video = document.getElementById("output-video");

video.src = URL.createObjectURL(

new Blob([out.buffer], { type: "video/mp4" })

);

}

}, 1000);

};

document.getElementById("uploader").addEventListener("change", transcode);

</script>

</body>

</html>