问题标签 [web-mediarecorder]

Javascript 在 Firefox 中抛出 OverconstrainedError。

我想获得这些分辨率，或者为 Firefox 桌面版获得类似的纵横比。如果我使用这些约束{video: { width:{ideal:480}, height: {ideal:720, max: 720 }}，它会给我高度：720，宽度：960。

我设法在 Chrome 和 Opera 上获得了 480 X 720 的分辨率，但如果我能找到一种使用MediaRecorder以这些分辨率录制视频的方法，那就太好了。

配置：Firefox 版本：57.0.2（64 位），视频设备：罗技 HD Pro Webcam C920

使用 Web Audio API，我创建了一个 bufferSource，同时使用一个新的 MediaRecorder 进行录制。我正在使用内置麦克风录制扬声器发出的声音。

如果我播放原始录音和新录音，两者之间会有很大的延迟。（对我来说听起来大约是 200 毫秒。）如果我在调用两个“开始”方法时 console.log 记录 globalAudioCtx.currentTime 的值，这两个数字完全相同。Date.now() 的值也完全相同。

这种延迟是在哪里引入的？由于声速引起的延迟大约是我听到的声音的 1000 倍。

简而言之，我怎样才能让这两个样本同时播放？

我在 Linux 上的 Chrome 中工作。

我正在使用 webrtc 录制用户语音。

记录完成后，我将 blob 内容发送到后端。

但是，我想在录制的音频中添加一些增益和高通滤波器，并将其转换为 mp3，然后再将其发送到后端。

我已经做了一些谷歌搜索，关于如何做到这一点，但到目前为止还没有结果。所以我决定在这里发帖。

提交到后端：

背景：

在 Windows 10 上，我在 Google Chrome (v71) 中使用getUserMedia (gUM) 和MediaRecorder 来捕获和编码视频流。

• 我正在使用gUM 的约束参数告诉它我想要352x288 的视频格式。

• 我要求video/webm; codecs="avc1.42E01E"作为编码流的 MIME 类型（即在Matroska中装箱的 H.264 ）。

• 我正在选择一个内置在笔记本电脑中的俗气的网络摄像头作为视频源。它被称为DMAX-AVC制造的“EasyCamera”。将其称为 CheezyCamera 很诱人。

视频流生成得很好。

问题：

流中编码视频的尺寸是440x360而不是我要求的352x288。此信息嵌入在记录的流中，并且仅对该数据的使用者可见。各种 API 的使用揭示了 gUM 流、MediaRecorder 和<video>元素元数据都认为维度是我要求的维度。

当然，网络摄像头、gUM 和 MediaRecorder 将约束参数视为建议，并且可以自由地以不同的方式响应。在这种情况下，当我请求 352x288 时，它们会以 440x360 响应。该系统按设计运行；那不是我的问题。

澄清一下，意外的 440x360 尺寸仅对记录流的消费者可见。我希望找到一种方法来了解制作方网络摄像头、gUM 和 MediaEncoder 信号链产生的分辨率与我要求的不同。

流消费者如何知道流的维度？它们在 'PixelWidth' 和 'PixelHeight' Matroska 盒子中，它们被烘焙到 H.264 流中。（奇怪的是，考虑到这是软件选择的分辨率，它不是 16x16 宏块的整数。当然它仍然有效。）

我无法解析浏览器中记录的数据，因为它存储在不透明的 blob 中。

当我使用不同的、更好的网络摄像头（Logitech C615）时，我的编码视频流就是我要求的大小。

我的问题：

<video>网络摄像头 / gUM / MediaRecorder /信号链中是否有任何方法可以在实际记录流的浏览器中找到编码流的实际尺寸？也就是说，我可以在不解码生成的流的情况下找到信号链对我请求的维度的响应吗？

I and my team have been struggling lately to find an explanation why does Firefox produce larger WebM/VP8 video files compared with Chrome when using the MediaRecorder API in our project.

In short, we record a MediaStream from a HTMLCanvas via the captureStream method. In attempt to isolate everything from our app that might affect this, I developed a small dedicated test app which records a <canvas> and produces WebM files. I've been performing tests with the same footage, video duration, codec, A/V bit rate and frame rate. However, Firefox still ends up creating up to 4 times larger files compared with Chrome. I also tried using a different MediaStream source like the web camera but the results were similar.

Here is a fiddle which should demonstrate what I am talking about: https://jsfiddle.net/nzwasv8k/1/ https://jsfiddle.net/f2upgs8j/3/. You can try recording 10-sec or 20-sec long videos on both FF and Chrome, and notice the difference between the file sizes. Note that I am using only 4 relatively simple frames/images in this demo. In real-world usage, like in our app where we record a video stream of a desktop, we reached the staggering 9 times difference.

I am not a video codec guru in any way but I believe that the browsers should follow the same specifications when implementing a certain technology; therefore, such a tremendous difference shouldn't occur, I guess. Considering my knowledge is limited, I cannot conclude whether this is a bug or something totally expected. This is why, I am addressing the question here since my research on the topic, so far, led to absolutely nothing. I'll be really glad, if someone can point what is the logical explanation behind it. Thanks in advance!

我想录制语音，将录制的语音（或音频 blob）自动拆分为 1 秒的块，将每个块导出到 wav 文件并发送到后端。这应该在用户说话时异步发生。

我目前使用以下 recorder.js 库来完成上述任务 https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js

我的问题是，随着时间的推移，blob/wave 文件的大小会变大。我认为这是因为数据会累积并使块大小变大。所以随着时间的推移，我实际上并没有发送连续的 1 秒块，而是累积的块。

我无法弄清楚这个问题在我的代码中是在哪里引起的。可能这发生在 recorder.js 库中。如果有人使用记录器 js 或任何其他 JavaScript 方法来完成类似的任务，如果你能仔细阅读这段代码并让我知道它在哪里中断，我将不胜感激。

这是我的 JS 代码

我正在编写一个 chrome 扩展程序，它只记录来自选项卡的音频并发送到我的本地服务器。

据我了解，chrome 扩展中的 MediaRecorder 与 html 中的一样。

本地服务器仅用于将其保存为文件。我下载了文件并播放了它，但它说文件已崩溃。忘记发送/下载，我所做的只是将 blob 从 MediaRecorder 保存到文件中。但它被撞毁了。我需要做更多的事情吗？

实际上，首先我试图将 chrome 选项卡中捕获的音频流式传输到服务器，但流式传输当然失败了。我认为在 'audio/webm;codecs=opus' 中连接 blob 不起作用，因为 webm 文件格式不允许这样做。有什么方法可以在 'audio/webm;codecs=opus' blob 中从片段中构建可流式传输的 blob？

我正在为 KaiOS 创建一个 MediaRecorder 应用程序。我想禁用 noiseSuppression 并设置此处指定的其他几个约束。

我观察到这些约束在我的代码中设置时没有得到尊重。我仍然得到噪音抑制音频。在这方面需要一些帮助。设置约束非常简单，我确信我做得对。它只是在 KaiOS 设备上没有得到尊重。真的可以在这里使用一些帮助。

我正在开发一个更高阶的组件，它将提供使用 MediaRecorder API 捕获媒体的能力。但是，当我尝试使用捕获的视频（以传递给 createObjectURL 的 Blob 的形式）时，出现错误ERR_REQUEST_RANGE_NOT_SATISFIABLE。当我控制台记录传递给包装组件的 Blob 时，它的长度为 0。我在本文末尾包含了我的代码。

为了诊断问题，我尝试了以下测试：

• 控制台记录 newChunks inhandleDataAvailable记录正确的值（即[Blob]）。
• 我添加React.useEffect(() => console.log(chunks), [chunks]);是为了查看块是否实际上正在更新。这也会导致记录正确的值（即[Blob]）。
• 我添加React.useEffect(() => console.log(captured), [captured]);是为了查看捕获的是否正在更新。这会导致记录大小为 0 的 Blob。
• 在handleStop中，我控制台日志块和通过组合块创建的 blob。这将分别产生一个空数组和一个大小为 0 的 blob。

这让我相信这handleDataAvailable是正确地将每个块添加到块数组中，但不知何故，数组handleStop在运行时被清空了。

有谁看到可能导致这种情况发生的原因？

代码：

我正在尝试使用 Javascript 中的 MediaStream API 获取浏览器的屏幕录像。我当前使用原始 Javascript 的方法非常适用于 Firefox（它为我提供了大约 10 秒的屏幕视频并下载它），但在 Chrome 中，它给了我一个单帧视频 - 大约半秒的镜头。

我的原始代码

我也尝试过使用 javascript Blob API，但是当我使用这种方法时，Chrome 的行为和以前一样，Firefox 要么正确记录 10 秒，要么抛出TypeError: stream is null

斑点法

我希望它会记录大约 10 秒，然后下载文件。

我在 Firefox 中得到了正确的结果，但在 Chrome 中我得到了不到一秒的镜头。