参考了这位大牛的文章  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>

 

posted @ 2021-11-22 16:24 rexzhao 阅读(359) 评论(0) 推荐(0) 编辑
摘要: RN的项目 频繁升级依赖库 会导致android studio的模块里面 有大量的奇奇怪股相同名称的工程 我这强迫症犯了 结果问了几个专门从事android开发的同事 居然都不知道如何清理 你大爷 原来在这里 android/.idea/modules.xml 打开搜索删除 干干净净 阅读全文
posted @ 2020-09-27 09:16 rexzhao 阅读(442) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2020-09-03 08:54 rexzhao 阅读(109) 评论(0) 推荐(0) 编辑
摘要: 一、PC端WEB项目 前台项目: 为让页面在服务端渲染(首屏)且前后端分离,需引入nodejs作为web中间层。 前端开发使用mvvm框架 vue/react,提高开发效率,(组件化)使项目易维护和扩展。 webpack/gulp 现实模块打包和自动化构建。 中后台项目: 一般后台项目都为内部管理系 阅读全文
posted @ 2020-09-03 08:44 rexzhao 阅读(7057) 评论(0) 推荐(0) 编辑
摘要: body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif; } iOS 4.0+ ( 阅读全文
posted @ 2020-09-03 08:42 rexzhao 阅读(260) 评论(0) 推荐(0) 编辑
摘要: leader分享的总结 我这里记录一下 时不时来看一下 免得哪天离职了 看不到了 为什么使用缓存 (1)减少网络带宽消耗 无论对于网站运营者或者用户,带宽都代表着金钱,所以要避免过多的带宽消耗。当Web缓存被使用时,只会产生极小的网络流量,可以有效的降低运营成本。 (2)降低服务器压力 给网络资源设 阅读全文
posted @ 2020-09-03 08:36 rexzhao 阅读(476) 评论(0) 推荐(0) 编辑
摘要: {"body":{"bigvUserCode":"10200","comment":"小静fs小静放松4","userCode":"USERSUSERPROFILE20180920101200016729"}} 阅读全文
posted @ 2019-05-20 09:18 rexzhao 阅读(1816) 评论(0) 推荐(0) 编辑
摘要: Write an essay based on the chart below. In your writing, you should 1) interpret the chart, and 2) give your comments. You should write about 150 wor 阅读全文
posted @ 2019-02-19 17:14 rexzhao 阅读(370) 评论(0) 推荐(0) 编辑
摘要: Dear Professor Smith, I am exceedingly honored to hear the news that you ask me to plan the debate on the theme of city traffic. Here, I am writing th 阅读全文
posted @ 2019-02-19 15:35 rexzhao 阅读(285) 评论(0) 推荐(0) 编辑
摘要: The chart shows great changes in the number of museums and their visitors during the period from 2013 to 2015 . Accroding to the data given,what we ca 阅读全文
posted @ 2019-02-19 15:11 rexzhao 阅读(392) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示