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> </a>
</p> </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) [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 createJob = require('./createJob');
const { log } = require('./utils/log'); const { log } = require('./utils/log');
const getId = require('./utils/getId'); const getId = require('./utils/getId');
const resolvePaths = require('./utils/resolvePaths');
const { const {
defaultOptions, defaultOptions,
spawnWorker, spawnWorker,
@ -17,10 +18,10 @@ module.exports = (_options = {}) => {
const { const {
logger, logger,
...options ...options
} = { } = resolvePaths({
...defaultOptions, ...defaultOptions,
..._options, ..._options,
}; });
const resolves = {}; const resolves = {};
const rejects = {}; const rejects = {};
let worker = spawnWorker(options); 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)}`) ? resolveURL(`/dist/worker.dev.js?nocache=${Math.random().toString(36).slice(3)}`)
: `https://unpkg.com/@ffmpeg/ffmpeg@v${version}/dist/worker.min.js`, : `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`, 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 * @function create a new Worker in browser
* @access public * @access public
*/ */
module.exports = ({ workerPath }) => ( module.exports = ({ workerPath, workerBlobURL }) => {
new Worker(workerPath) 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;
};