ffmpegwasm / react-app Goto Github PK
View Code? Open in Web Editor NEWAn example to use ffmpeg.wasm in react.js
An example to use ffmpeg.wasm in react.js
Hey
I'm trying to convert Blob data from RecordRTC from webm to mp4. The script seems to be working and initialized, but React/NextJS throws a SharedArrayBuffer. Searching for that term gives me some answers about some vulnerability in SAB, but I don't understand what's up and down. It says there's a way to re-enable it though?
Is it a bug in ffmpegwasm or is there something deeper to it? As I'm creating a ReactJS website, I should be able to follow your example of your 'react-app' no?
Thanks
The initial problem faced running this app is an inability to successfully fetch from unpkg
However, disabling the cross origin leads to the SharedArayBuffer
problem as described in installation. Does this mean the ffmpeg core needs to be loaded from same origin?
const ffmpeg = createFFmpeg({
corePath: "node_modules/@ffmpeg/core/dist/ffmpeg-core.js",
Doing so creates a problem that I originally faced trying this out in codesandbox
Was getting this issue playing around with the main repo and used this test one to verify I wasn't doing anything wrong. I cloned this repo, yarn
, yarn start
and clicked "start" in chrome and got these errors:
739f13dd-9e2d-4084-84d6-e533dfdc9ec9:1 worker.js onmessage() captured an uncaught exception: NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://unpkg.com/@ffmpeg/[email protected]/ffmpeg-core.js' failed to load.
threadPrintErr @ 739f13dd-9e2d-4084-84d6-e533dfdc9ec9:1
package.json is using the updated "@ffmpeg/ffmpeg": "^0.8.1",
Hi there,
I need some help so, I clone this repo and run but I got error as below
createFFmpeg.js:167 Uncaught (in promise) Error: Oops, something went wrong in FS operation.
at Object.FS (createFFmpeg.js:167:1)
at doTranscode (App.js:15:1)
FS @ createFFmpeg.js:167
doTranscode @ App.js:15
await in doTranscode (async)
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:414
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
VM10:2 Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at Object.8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at Object.8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at HTMLIFrameElement.e.onload (index.js:1:1)
this should not exist on browser, right?
Hi,
can anyone help me understand why I get the error "Error: bad memory" after clicking on "start" button?
Uncaught (in promise) Error: bad memory at d296b078-c3e3-4526-99c1-2b484cf33c5d:23 at Object.load (createFFmpeg.js:64) at async doTranscode (App.js:13)
Thank you,
a.
Hello,
I tried your sample for reactjs and custom some function like scale and crop a .mp4 video. Tested on my Macbook pro 2015 and use same input video, same command. But I got very different render speed when use browser and command line.
On Chrome browser:
frame= 68 fps=3.3 q=28.0 size= 0kB time=00:00:02.78 bitrate= 0.1kbits/s speed=0.135x
On command line:
frame= 554 fps= 52 q=28.0 size= 2560kB time=00:00:23.24 bitrate= 902.3kbits/ speed=2.26x
What should I do know to get higher render speed on browser? Thank you!
Hello - this is a super exciting project. Thanks for the React template. I'm having issues with trying this on Next.js and I suspect that would happen with this template as well.
ReferenceError: SharedArrayBuffer is not defined
From what I have read, this was a Firefox bug that is now happening in Chrome as well? Is there any resolution for this yet?
Thanks!
hello, I am trying to use this repo on my windows 10 machine, run yarn start with no error, but when I begin to access the website and click the button to begin, I get this error in the console:
[info] download ffmpeg-core script (~25 MB) from https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js
getCreateFFmpegCore.js:22 GET https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.