【问题标题】:How to use ffmpeg.wasm in Firefox without getting the SharedArrayBuffer?如何在 Firefox 中使用 ffmpeg.wasm 而不获取 SharedArrayBuffer?
【发布时间】:2020-11-23 03:36:58
【问题描述】:

我正在尝试在 react 应用程序中加载 ffmpeg.wasm 来做一个小型视频转换器项目。该代码在 chrome 上运行良好,但在 Firefox 开发版 (83.0b) 中我发现以下错误:

ReferenceError: SharedArrayBuffer 未定义

这是捕获错误的组件部分(变量 ready is 永远不会变为 true):

import React, { useState, useEffect } from 'react'
import styles from './App.module.css'
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
const ffmpeg = createFFmpeg({ log: true })

function App() {
  // load state
  const [ready, setReady] = useState(false)
  // files state
  const [video, setVideo] = useState('')
  const [gif, setGif]   = useState()
  // UI state
  const [dragOver, setDragOver ] = useState(false)
  const [nOfEnters, setNOfEnters] = useState(0)

  const load = async () => {
    try {
      await ffmpeg.load()
      setReady(true)
    } catch(error) {
      console.log(error)
    }
  }

  useEffect(() => {
    load()
  }, [])

提前致谢,如果我应该提供更多详细信息,请告诉我。

【问题讨论】:

  • 你是如何最终解决这个问题的?我面临同样的问题。你是如何修改标题的?

标签: firefox ffmpeg webassembly sharedarraybuffer


【解决方案1】:

尝试在服务器响应中添加这些标头:

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

您可以在这里找到一些详细信息:https://web.dev/coop-coep/

【讨论】:

  • 现在它可以在 Firefox 桌面版上运行,但不能在 Firefox 移动版上运行。得到与上面相同的错误:SharedArrayBuffer 未定义。你有什么建议?
  • @kebsu 我面临与佩德罗相同的问题。如何在上面的代码中添加这些标题?
  • @Juliette 您需要控制服务器代码并将其添加到那里
【解决方案2】:

添加标题只是我解决方案的一部分。

首先在 Apache 中我需要启用 mod_header

sudo a2enmod headers

然后我可以在mysite.conf 文件中设置标题

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

在此之后我仍然收到错误,需要创建 SSL 证书并为 HTTPS 设置 Apache。

生成 SSL 证书

sudo mkdir /etc/apache2/ssl
sudo openssl req -x509 -nodes -days 1095 -newkey rsa:2048 -out /etc/apache2/ssl/server.crt -keyout /etc/apache2/ssl/server.key

设置Apache

sudo a2enmod ssl
sudo ln -s /etc/apache2/sites-available/default-ssl.conf /etc/apache2/sites-enabled/000-default-ssl.conf

然后编辑000-default-ssl.conf文件

SSLCertificateFile    /etc/apache2/ssl/server.crt
SSLCertificateKeyFile /etc/apache2/ssl/server.key

https://hallard.me/enable-ssl-for-apache-server-in-5-minutes/

【讨论】:

    猜你喜欢
    • 2015-06-21
    • 1970-01-01
    • 2021-10-07
    • 2021-11-02
    • 1970-01-01
    • 2011-10-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多