0

ffmpeg を使用してファイルを変換する React.js に以下のコードがあります。

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

  const doTranscode = async () => {
    setMessage('Loading ffmpeg-core.js');
    await ffmpeg.load();
    setMessage('Uploading file');
    ffmpeg.FS('writeFile', filename, await fetchFile(file));
    await ffmpeg.run('-i', filename, 'test.wav');
    setMessage('Upload to manager complete. Sound file will be available and playable on the manger within 1-2 minutes.');
    const data = ffmpeg.FS('readFile', 'test.wav');
    setAudioSrc(URL.createObjectURL(new Blob([data.buffer], { type: 'audio/wav' })));

    var file_name = prompt('What would you like to call this file?');

    if (!file_name) {
      file_name = Date.now()
    }
    
    (async function(){
      let output = await getSoundID(customer_id, file_name);
      let sound_id = output.data;
      var bucket_file = new File([new Blob([data.buffer], { type: 'audio/wav' })], "sounds/" + customer_id + "/" + sound_id + ".wav");
      uploadFileToS3(bucket_file);
      updateSoundData(sound_id, customer_id);
    })();
  };

  useEffect(() => {
    if (file) {
      doTranscode()
    }
  }, [file])

上記のコードは Chrome でうまく機能し、ファイルは正常に変換されます。ただし、FirefoxまたはEdgeに持ち込むと、このエラーが発生しますUnhandled Rejection (ReferenceError): SharedArrayBuffer is not defined

この問題を調べたところ、ヘッダーを変更してこれを含める必要があるとのことでした。

You need to set two response headers for your document:

Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp

JS コードでこれをどのように行うかわかりませんか?

皆さんのご意見をお待ちしております。

4

1 に答える 1