Fix worker cross domain issue

This commit is contained in:
Jerome Wu 2019-10-30 21:23:51 +08:00
parent f517504c71
commit 0455923e43
6 changed files with 43 additions and 5 deletions

View File

@ -22,6 +22,10 @@ Use FFmpeg directly in your browser without any backend services!!
</a>
</p>
<a href="https://codepen.io/jeromewu/pen/NWWaMeY" target="_blank">
<img alt="codepen" width="128px" src="https://blog.codepen.io/wp-content/uploads/2012/06/codepen-wordmark-display-inside-black@10x.png">
</a>
[Source Code](https://github.com/ffmpegjs/ffmpeg.js/blob/master/examples/browser/transcode.html)
---

View File

@ -1,6 +1,7 @@
const createJob = require('./createJob');
const { log } = require('./utils/log');
const getId = require('./utils/getId');
const resolvePaths = require('./utils/resolvePaths');
const {
defaultOptions,
spawnWorker,
@ -17,10 +18,10 @@ module.exports = (_options = {}) => {
const {
logger,
...options
} = {
} = resolvePaths({
...defaultOptions,
..._options,
};
});
const resolves = {};
const rejects = {};
let worker = spawnWorker(options);

View File

@ -0,0 +1,10 @@
module.exports = (key) => {
const env = {
type: (typeof window !== 'undefined') && (typeof window.document !== 'undefined') ? 'browser' : 'node',
};
if (typeof key === 'undefined') {
return env;
}
return env[key];
};

12
src/utils/resolvePaths.js Normal file
View File

@ -0,0 +1,12 @@
const isBrowser = require('./getEnvironment')('type') === 'browser';
const resolveURL = isBrowser ? require('resolve-url') : s => s; // eslint-disable-line
module.exports = (options) => {
const opts = { ...options };
['corePath', 'workerPath'].forEach((key) => {
if (typeof options[key] !== 'undefined') {
opts[key] = resolveURL(opts[key]);
}
});
return opts;
};

View File

@ -11,4 +11,5 @@ module.exports = {
? resolveURL(`/dist/worker.dev.js?nocache=${Math.random().toString(36).slice(3)}`)
: `https://unpkg.com/@ffmpeg/ffmpeg@v${version}/dist/worker.min.js`,
corePath: `https://unpkg.com/@ffmpeg/core@v${dependencies['@ffmpeg/core'].substring(1)}/ffmpeg-core.js`,
workerBlobURL: true,
};

View File

@ -5,6 +5,16 @@
* @function create a new Worker in browser
* @access public
*/
module.exports = ({ workerPath }) => (
new Worker(workerPath)
);
module.exports = ({ workerPath, workerBlobURL }) => {
let worker;
if (Blob && URL && workerBlobURL) {
/* Use Blob to load cross domain worker script */
const blob = new Blob([`importScripts("${workerPath}");`], {
type: 'application/javascript',
});
worker = new Worker(URL.createObjectURL(blob));
} else {
worker = new Worker(workerPath);
}
return worker;
};