Update and fix browser example

This commit is contained in:
Jerome Wu 2019-10-25 17:50:37 +08:00
parent 9e5d0c5cc6
commit f162e481c3
6 changed files with 17 additions and 22 deletions

View File

@ -3,31 +3,25 @@
<script src="/dist/ffmpeg.dev.js"></script>
</head>
<body>
<input type="file" id="uploader">
<video controls>
<source id="video-src" type="video/mp4">
</video>
<div>
<input type="file" id="uploader">
</div>
<script>
const { createWorker } = FFmpeg;
const worker = createWorker({
corePath: '../../node_modules/@ffmpeg/core/ffmpeg-core.js',
});
const bufferToBase64 = (buf) => {
const binstr = Array.prototype.map.call(buf, function (ch) {
return String.fromCharCode(ch);
}).join('');
return btoa(binstr);
}
const transcode = async ({ target: { files } }) => {
await worker.load();
console.log('Start transcoding');
const { data } = await worker.transcode('/tests/assets/test.avi', 'mp4');
console.log(data);
const { data } = await worker.transcode(files[0], 'mp4');
console.log('Complete transcoding');
const b64 = bufferToBase64(data);
document.getElementById('video-src').setAttribute('src', `data:video/mp4;base64,${b64}`);
const video = document.createElement('video');
video.controls = true;
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
document.body.appendChild(video);
}
const elm = document.getElementById('uploader');
elm.addEventListener('change', transcode);

View File

@ -1,3 +1,4 @@
const fs = require('fs');
const { createWorker } = require('../../src');
const { argv } = process;
@ -8,5 +9,5 @@ const worker = createWorker();
(async () => {
await worker.load();
const { data } = await worker.transcode(inputPath, outputPath.split('.').pop());
console.log(data.length);
fs.writeFileSync(outputPath, Buffer.from(data));
})();

6
package-lock.json generated
View File

@ -811,9 +811,9 @@
}
},
"@ffmpeg/core": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/@ffmpeg/core/-/core-0.1.0.tgz",
"integrity": "sha512-a4/HokRytKFJDW+RVvuf22rUzjNgXZKhlF6FIVBcLACIDcCEQZ0uCUC+5DZb+xprCvdMyXm0wy90uoYLRTq+LA=="
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@ffmpeg/core/-/core-0.2.0.tgz",
"integrity": "sha512-kvCr0QH3B/5wc6boiUQq5PKWytmu9QpCpU2RqFT4+jh6Hv4JnU/43uprwX45PMjVh3T4g2coB2Dzix3x6Muasg=="
},
"@webassemblyjs/ast": {
"version": "1.8.5",

View File

@ -32,7 +32,7 @@
},
"homepage": "https://github.com/jeromewu/ffmpeg.js#readme",
"dependencies": {
"@ffmpeg/core": "^0.1.0",
"@ffmpeg/core": "^0.2.0",
"is-url": "^1.2.4",
"node-fetch": "^2.6.0",
"regenerator-runtime": "^0.13.3",

View File

@ -86,7 +86,7 @@ module.exports = (_options = {}) => {
log(`[${workerId}]: Complete ${jobId}`);
let d = data;
if (action === 'transcode') {
d = Array.from({ ...data, length: Object.keys(data).length });
d = Uint8Array.from({ ...data, length: Object.keys(data).length });
}
resolves[action]({ jobId, data: d });
} else if (status === 'reject') {

View File

@ -49,7 +49,7 @@ const transcode = ({
const data = Uint8Array.from({ ...media, length: Object.keys(media).length });
const iPath = 'media';
const oPath = `media.${outputExt}`;
const args = [...defaultArgs, ...`${options} -i ${iPath} ${oPath}`.trim().split(' ')];
const args = [...defaultArgs, ...`${options} -i file:${iPath} ${oPath}`.trim().split(' ')];
Module.FS.writeFile(iPath, data);
ffmpeg(args.length, strList2ptr(args));
res.resolve(Module.FS.readFile(oPath));