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;
width: 100%;
height: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</head>
<body>
<h3>上传视频文件，然后转码到 mp4 (x264) 进行播放!</h3>
<video id="output-video" controls></video><br />
<input type="file" id="uploader" />
<p id="message">ffmpeg 脚本需要等待 5S 左右加载完成</p>
<script type="text/javascript">
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",
"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>
<script type="text/javascript" src="./dist/ffmpeg-core.js"></script>
</body>
</html>
