ffmpegwasm / ffmpegwasm/ffmpeg.wasm
SharedArrayBuffer is not defined in "vite preview" mode while it works fine in "vite" mode with @ffmpeg/core": "^0.11.0"
- 主要言語
- C
- スター
- 17.8k
- フォーク
- 1.1k
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
**Describe the bug**
- Set up a vanilla React Typescript based project using Vitejs.
- Make up two React components RecordMessage that uses react-media-recorder-2, and Controller that uses @ffmpeg/ffmpeg.
-
The files are as below.
- RecordMessage.tsx:
```
import { ReactMediaRecorder } from "react-media-recorder-2";
....
```
- Controller.tsx:
```
....
import { createFFmpeg } from "@ffmpeg/ffmpeg";
....
const handleStop = async (blobUrl: string) => {
....
fetch(blobUrl)
.then((res) => res.blob())
.then(async (blob) => {
const ffmpeg = createFFmpeg({
corePath: "http://localhost:" + import.meta.env.VITE_APP_PORT + "/ffmpeg-core.js",
wasmPath: "http://localhost:" + import.meta.env.VITE_APP_PORT + "/ffmpeg-core.wasm",
workerPath: "http://localhost:" + import.meta.env.VITE_APP_PORT + "/ffmpeg-core.worker.js",
log: true,
});
// This loads up the ffmpeg.wasm files from CDN
await ffmpeg.load();
// wav to mp3.... will be from api to come back
const arrayBuffer = await blob.arrayBuffer();
const uint8Array = new Uint8Array(arrayBuffer);
ffmpeg.FS("writeFile", "rachelMessage.wav", uint8Array);
await ffmpeg.run("-i", "rachelMessage.wav", "rachelMessage.mp3");
const data = ffmpeg.FS("readFile", "rachelMessage.mp3");
const convertedBlob = data.buffer;
const audio = new Audio();
audio.src = createBlobUrl(convertedBlob);
....
```
- vite.config.ts:
```
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
{
name: "configure-response-headers",
configureServer: (server) => {
server.middlewares.use((_req, res, next) => {
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
next();
});
},
},
],
build: {
manifest: true,
minify: false,
},
});
```
- .env.production:
`VITE_APP_PORT=4173`
- package.js:
```
{
"name": "react-ts-vite sample",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@ffmpeg/core": "^0.11.0",
"@ffmpeg/ffmpeg": "^0.11.6",
"axios": "^1.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-media-recorder-2": "^1.6.23"
},
"devDependencies": {
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.0.0",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.23",
"tailwindcss": "^3.3.2",
"typescript": "^5.0.4",
"vite": "^4.3.0"
}
}
```
**To Reproduce**
Steps to reproduce the behavior:
1. Go to chrome://flags/ and enable Experimental JavaScript shared memory features (aka. SharedArrayBuffers)
2. yarn build --mode production in order to build the app
3. yarn preview to run the frontend app on default local port 4173
4. See error on the Chrome browser's console when go to at http://localhost:4173/ :
```
[info] use ffmpeg.wasm v0.11.6
[info] load ffmpeg-core
[info] loading ffmpeg-core
SharedArrayBuffer is not defined
```
**Expected behavior**
ffmpeg-core and SharedArrayBuffer is defined as it was in "yarn dev" mode. And the browser console log should look like below:
```
[info] use ffmpeg.wasm v0.11.6
[info] load ffmpeg-core
[info] loading ffmpeg-core
[info] ffmpeg-core loaded
[info] run FS.writeFile rachelMessage.wav <2901 bytes binary file>
[info] run ffmpeg command: -i rachelMessage.wav rachelMessage.mp3
[fferr] ffmpeg version 9e96b1c Copyright (c) 2000-2020 the FFmpeg developers
....
```
**Desktop (please complete the following information):**
- Browser [ chrome Version 113.0.5672.126 (Official Build) (x86_64)]
コントリビューションガイド
評価
この issue はまだ評価されていません。