javascript - 异步功能不会第二次弹出

Question

我正在创建一个按钮来使用 FFMPEG 记录 Canvas 。这是完成下载过程的代码。

const recordButton = document.querySelector("#record")
recordButton.addEventListener('click', function () {
function startRecording() {
const { createFFmpeg } = FFmpeg;
const ffmpeg = createFFmpeg({
  log: true
});

var transcode = async (webcamData) => {
  var name = `record${id}.webm`;
  await ffmpeg.load();
  await ffmpeg.write(name, webcamData);
  await ffmpeg.transcode(name, `output${id}.mp4`);
  var data = ffmpeg.read(`output${id}.mp4`);

  var video = document.getElementById('output-video');
  video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
  dl.href = video.src;
}

fn().then(async ({ url, blob }) => {
  transcode(new Uint8Array(await (blob).arrayBuffer()));
})

...

id += 1}

出现问题转码 多变的。虽然按钮最初可以工作，但其他所有尝试(在单个页面加载上)只会使异步功能失败。我对该功能不够精通，不知道为什么它只能工作一次。也就是说，我知道这是唯一不会在第二次尝试时触发的代码。
这可能是几件事。这是借来的代码，我已将其重新用于多种用途。我可能搞砸了声明。这可能是一个异步问题。我试图使用可用的值来构建一个次要的、类似的功能，但这会破坏第一个的目的。
我尝试清除和附加受影响的 DOM 元素，但这无济于事。

Answer 1

这似乎与以下内容有关:

await ffmpeg.load();

虽然 FFMPEG 最初必须下载和加载库，但在第二次初始化时不必这样做。那我就是不被连续使用激活的触发器。