使用CanvasCaptureMediaStream和MediaRecorder时,有没有办法在每个帧上获取事件？

我需要的是没有什么不同requestAnimationFrame(),但我需要CanvasCaptureMediaStream(和/或MediaRecorder),而不是窗口.MediaRecorder可能以与窗口不同的帧速率运行(可能以不常规的可分率,例如25 FPS对60 FPS),所以我想以帧速率而不是窗口更新画布.

WebM是否支持音频编解码器的PCM？

我不认为它确实如此,但我在WebM文档页面上看到支持BitDepth具有以下注释的字段:

BitDepth - 每个样本的比特,主要用于PCM.

如果WebM确实支持PCM,那么Chrome的实现呢？如果是这样,MediaRecorder使用的适当内容类型是什么？这些都是假的:

MediaRecorder.isTypeSupported('video/webm;codecs=h264,pcm');
MediaRecorder.isTypeSupported('video/webm;codecs=h264,wav');
MediaRecorder.isTypeSupported('video/webm;codecs=h264,adpcm');
MediaRecorder.isTypeSupported('video/webm;codecs=h264,pcm_s16le');
MediaRecorder.isTypeSupported('audio/wav');

我想记录用户的麦克风5秒长的段，并将每个段上传到服务器。我尝试使用MediaRecorder并以5秒的时间间隔调用了start（）和stop（）方法，但是当我串联这些录音时，它们之间会发出“滴”声。因此，我尝试使用start（）方法的timelice参数记录5秒的时间段：

navigator.mediaDevices.getUserMedia({ audio: { channelCount: 2, volume: 1.0, echoCancellation: false, noiseSuppression: false } }).then(function(stream) {
  const Recorder = new MediaRecorder(stream, { audioBitsPerSecond: 128000, mimeType: "audio/ogg; codecs=opus" });
  Recorder.start(5000); 
  Recorder.addEventListener("dataavailable", function(event) {
    const audioBlob = new Blob([event.data], { type: 'audio/ogg' });
    upload(audioBlob);
  });
});

但是只有第一部分是可玩的。我该怎么办，或者如何使所有Blob都可播放？我必须记录然后上传每个片段。我无法创建blob数组（因为用户可以记录24小时或更长时间的数据，并且用户需要在记录的同时将数据上传到服务器上-延迟5秒）。

谢谢！

我正在制作一个小型交互式动画/游戏（使用PixiJS在画布上），并希望为用户提供保存渲染动画的选项。研究完成后，MediaRecorder似乎是我用来记录和呈现视频的API。但是，MediaRecorder构造函数仅允许将一个流用作源。

如何合并其他流（音频效果），以​​便录制的视频文件中也有声音？

我的 MediaRecorder API 遇到了一个非常奇怪的问题，过去两天我一直无法解决这个问题。

这个简化的示例工作得很好，当我单击 Chrome UI“停止共享”按钮时，一切都会适当停止：

desktopStream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
    audio: true,
});

let rec = new MediaRecorder(desktopStream, {
    mimeType: "video/webm; codecs=vp8,opus",
});

rec.onstop = async () => {
  desktopStream.getTracks().forEach((s) => s.stop());
  desktopStream = null;

  //blobs.push(MediaRecorder.requestData());
  blob = new Blob(blobs, {
    type: "video/webm",
  });
};

然而事实并非如此，它会继续录制（或者某些 MediaTrack 继续运行，不完全确定）：

desktopStream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
    audio: true,
});

voiceStream = await navigator.mediaDevices.getUserMedia({
    video: false,
    audio: true,
  });

// this is the culprit, when commented everything works as expected …

问题陈述

嗨，我想MediaRecorder在我的IE 11和Safari应用程序中使用API添加对录音的支持，但到目前为止什么都没有。是否有任何可用的polyfills可以帮助我在这些浏览器中添加对相同内容的支持？

苹果浏览器：

我可以看到Safari确实MediaRecorder在实验性功能下支持 API ，但即使提供了适当的 mime 类型audio/webm，它似乎也不能正常工作，它总是返回一个video/mp4mime 类型的 blob 。

IE 11：

这是一块古老的垃圾，我只能这么说:)

代码：

const stream = await navigator.mediaDevices.getUserMedia({
  audio: true,
  video: false,
})


const mimeType = 'audio/webm'

// check if above mime type is supported in browser and instantiate recorder
if (MediaRecorder.isTypeSupported(mimeType)) {
  this.recorder = new MediaRecorder(this.stream, { mimeType })
} else {
  this.recorder = new MediaRecorder(this.stream)
}

recorder.start() …

我有一个来自 WebRTC 远程对等点的 MediaStream，我想在浏览器中创建视频录制。

我目前正在创建这样的 MediaRecorder：

const recorder = new MediaRecorder(mediaStream);

原始流的帧速率为例如30fps。我希望录制的帧速率较低，例如 12fps。

到目前为止，我能找到的唯一策略是创建一个中间画布，重复将原始流复制到画布，然后根据画布创建具有所需帧速率的新流，如下所示：

const video = document.getElementById('my_video_element');
// ... do more to set up video here
video.srcObject = mediaStream;
const canvas = document.createElement('canvas');
canvas.width = 1280;
canvas.height = 720;
setInterval(() => {
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
}, 18);
const desiredFps = 12;
const recorder = new MediaRecorder(canvas.captureStream(desiredFps));

有更好/更简单的方法吗？

注意：我知道 videoBitsPerSecond 设置可用于降低输出录制的比特率。但我发现即使对于固定的 videoBitsPerSecond 设置值，降低画布流的 fps 也会降低 MediaRecorder 的有效比特率。

我们正在努力实现什么？

我们部署了一个人工智能模型来传输麦克风中的音频并向用户显示语音文本。像这样的东西。

使用什么技术？

• 用于后端和 AI 模型的 Python
• React 前端
• 用于录制和配置音频的 Web Media Recorder API
• WebSocket 连接 AI API

但有什么问题呢？

在前端，我尝试每秒将音频块作为 Int16Array 发送到后端。另外为了确保与麦克风和音频相关的一切工作正常，停止录制后我只能下载音频的第一个块，持续时间为 1 秒，这是非常清晰的。然而，当音频被打磨到后端时，它会变成一些噪音！

这是处理录音时的 React 代码部分：

        useEffect(()=> {
      if (recorder === null) {
        if (isRecording) {
          requestRecorder().then(setRecorder, console.error);
        } else {
          return;
        }
      }
  
      // Manage recorder state.
      if (isRecording && recorder) {
        recorder.start();
      } else if (!isRecording && recorder) {
        recorder.stop();
      }
 
    // send the data every second
    const ineterval = setInterval(() => {
      if (recorder) …

我有工作代码（如下），用于连接从浏览器录制的第一个和最后一个视频块。

每三秒收集一次块，最终下载的视频确实按顺序播放第一个和最后一个块。

然而，视频的总长度是所有收集的块的长度，而不仅仅是第一个和最后一个块的总和。“额外”视频只是空白。

代码之后还有更多内容：

let mediaRecorder = new MediaRecorder()
let chunks = []
mediaRecorder.start(3000) // triggers ondataavailable every 3 seconds
mediaRecorder.ondataavailable = (ev) => {
  chunks.push(ev.data);
  if (chunks.length > 2) chunks.splice(1,1) // keeps only the first and last chunk
}
let blob = new Blob(chunks, {'type': 'video/mp4;'}
let videoURL = window.URL.createObjectURL(blob)
let downloadLink = document.getElementById('downloadLink');
downloadLink.href = videoURL;
mediaRecorder.stop();
downloadLink.click()

也许ev.timeStamp用于确定视频的长度，而不仅仅是块的持续时间的总和？如果最后一个块在最后 3 秒内播放，并且中间有空白视频，那就更有意义了。但不——它播放[开始块、结束块、空白]。

有没有办法防止在连接的开头/结尾后面出现/填充空白视频？

--

编辑：我也尝试过切掉斑点的末端，blob.slice(0, -10,000)但它不会修剪空白。

我试图在 MediaRecorder 处于“录制”状态时将 mediaTrack 添加到 mediaStream

添加新曲目的代码如下：

activeStream.addTrack(newAudioTrack)

之后事件（onstop）被触发。我怎样才能避免这种情况？

Problem

With my iPad's iOS Safari, I can use Daily.co's video API to call other devices. But the moment I start recording my local microphone via the audio-recorder-polyfill library , everybody else will no longer be able to hear me, even though I can still hear them and share my camera. Even when the recording session ends, the audio call remains broken (though the audio-recorder works successfully).

It seems iOS specific, because I have no problems with my Surface's Windows …

我有一个画布元素内的工作完美的演示动画，我可以与MediaRecorder和WebM视频文件记录captureStream()从<canvas>元素。

来自 2d 上下文 api 的动画在生成的视频中表现得很好，但是当我尝试使用drawImage()以将图像添加到画布时，我似乎无法使其正常工作。在后一种情况下，MediaRecorder.ondataavailable处理程序没有接收到有效数据并且生成的视频文件是一个 0 字节的文件。

我什至实现了一个演示，我可以在其中切换是否drawImage()执行呼叫。在下面的代码中，如果drawImage = false视频生成没有问题，但如果drawImage切换到true，它将生成一个 0 字节的文件。

为了演示，我把这个jsfiddle放在一起https://jsfiddle.net/keyboardsamurai/3tkm0dp6/16/

我在 MacOS 上的“Chrome 版本 75.0.3770.100（官方版本）（64 位）”上运行此代码 - 甚至不确定它是否应该在 Firefox 等上运行，因为 MediaRecorder API 在 FF 上抛出看似无关的错误。

另请参阅此处的完整代码：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<canvas id="drawing_canvas" width="1280" height="720"></canvas>

<script>
    const image = new Image();
    image.src = 'https://66.media.tumblr.com/84d332cafeb1052c477c979281e5713b/tumblr_owe3l0tkCj1wxdq3zo1_1280.jpg';

    window.requestAnimationFrame(animation);

    const drawImage = false;  // toggle to 'true' to make this …

当我尝试从 中提取 aac 时webm，会出现持续时间不一致的情况。aac少了十分钟。不同的webm视频，差距是不一样的。

webm视频由chrome.tabCapture.capture生成chrome extension

代码：

chrome.tabCapture.capture({
  video: true,
  audio: true,
  videoConstraints: {
    mandatory: {
      minWidth: 1920,
      minHeight: 1080,
      maxWidth: 1920,
      maxHeight: 1080,
      maxFrameRate: 30,
      minFrameRate: 30,
    }
  }
})

上面的代码会返回一个流，我会使用JS的MediaRecorder方法来处理这个流，最后保存为webm文件。

代码：

new MediaRecorder(stream, {
  audioBitsPerSecond: 128000,
  videoBitsPerSecond: 2500000,
  mimeType: 'video/webm;codecs=vp9'
})

如果你不知道上面代码的意思，没关系，我来解释一下主要信息：

1. 宽度： 1920
2. 高度： 1080
3. 帧数： 30
4. 音频位： 128000
5. 视频位： 2500000
6. 哑剧类型： video/webm;codecs=vp9

我尝试了很多方法，如下所示：

chrome.tabCapture.capture({
  video: true,
  audio: true,
  videoConstraints: {
    mandatory: {
      minWidth: 1920, …