问题标签 [web-mediarecorder]

根据互联网上的一些资源，我正在尝试构建一个简单的网页，在那里我可以录制一些东西（我的声音），然后从录音中制作一个 mp3 文件，最后将该文件上传到服务器。

此时我可以录制也可以播放，但是我还没有上传到本地，好像我什至无法在本地制作mp3文件。有人可以告诉我我做错了什么，或者顺序错误吗？

以下是我目前拥有的所有代码。

当我尝试使用 Web 控制台中的调试器进行调查并查看发生了什么时；在线上：

我收到这条消息：

并上线：

我收到这条消息：

此外，当我观看 ffmpeg 表达式时，我可以看到：

经过一些进一步的调查，并使用 browserify 我使用以下代码：

这解决了以下问题：

但是播放不再起作用。我可能没有对player.srcObject做正确的事情，也许还有其他一些事情。

当我使用这条线时：

我收到这条消息：

当我使用这条线时：

我收到这条消息：

最后，如果我使用这个：

我没有收到任何错误消息，但录音仍然无法正常工作。

我有一个带有指向 ActiveStorage 的文件字段的 Rails 表单。使用 MediaRecorder API（和 Safari 的 polyfill），我还构建了一个录音机。

到目前为止一切顺利：在<audio>提交表单之前，可以将录制的音频附加到元素并播放。如下所示，代码作为 blob 添加到<audio>标签中。

该表单还允许定期上传音频文件，该文件有效，并使用 ActiveStorage 存储，定义如下：

has_one_attached :audio_file

现在我想提交整个表单，包括 Rails 的音频。问题是file_field由于浏览器安全限制，无法直接设置。

所以我正在尝试一种解决方法：捕获表单submit，对其进行序列化并使用 POST fetch。这也有效（需要 a 的形式remote: true），现在唯一缺少的就是音频。

工作回调是：

我看到两个选项：

1）以某种方式将编码的音频添加到表单json中，并将其视为ActiveStorage对象，然后将它们一起提交。2）在表单的其余部分保存后，单独调用仅加载音频

如果某些 HTML / JS 看起来有点奇怪，我将它们全部包装在 StimulusJS 中。如果需要，我很乐意分享所有的录音代码。

我最近一直在尝试在浏览器中生成视频，因此一直在使用两种方法：

• 使用whammy js 库将 webp 帧组合成 webm 视频。更多细节在这里。
• 使用MediaRecorder和canvas.captureStream。更多细节在这里。

whammy 方法效果很好，但仅在 Chrome 中受支持，因为它是当前唯一支持 webp 编码 ( canvas.toDataURL("image/webp")) 的浏览器。因此，我使用该captureStream方法作为 Firefox 的备份（并将libwebpjs用于 Safari）。

所以现在我的问题是：有没有办法控制画布流的视频质量？如果没有，浏览器/w3c 是否考虑过这样的事情？

这是 whammy 生成的视频的其中一帧的屏幕截图：

这是该MediaRecorder/canvas.captureStream方法生成的同一帧：

我的第一个想法是人为地增加我正在流式传输的画布的分辨率，但我不希望输出视频更大。

我已经尝试增加传递给该captureStream方法的帧速率（认为可能会发生一些奇怪的帧插值），但这无济于事。如果我把它设置得太高，它实际上会降低质量。我目前的理论是浏览器根据它可以访问的计算能力来决定流的质量。这是有道理的，因为如果它要跟上我指定的帧速率，那么就必须付出一些代价。

所以下一个想法是我应该放慢我在画布上输入图像的速度，然后按比例降低我传入的 FPS 值captureStream，但问题是即使我可能已经解决了质量问题，然后我会得到一个运行速度比预期慢的视频。

编辑： 这是我正在使用的代码的粗略草图，以防它对处于类似情况的任何人有所帮助。

我正在使用MediaRecorderapi 来录制音频。用户可以触发一个事件，该事件将依次调用该MediaRecorder.requestData方法。我遇到的问题是只有第一个 Blob 是可玩的，我需要所有 Blob 都是可玩的。

我在 W3 规范中读到这是预期的功能：

UA 必须以这样一种方式记录流，以便在播放时可以检索到原始音轨。当返回多个 Blob 时（由于时间片或 requestData()），单个 Blob 不必是可播放的，但来自已完成录制的所有 Blob 的组合必须是可播放的。

我想知道 Blob 对象中实际上缺少哪些数据，我是否可以手动附加丢失的数据以使 Blob 可播放。

我无法创建新MediaRecorder实例，因为在创建新实例并开始录制时它可能会错过用户的录制，我需要能够在服务器中存储单个音频文件。

总而言之，我需要能够将单个音频 Blob 拆分为多个 Blob，并手动插入使每个 Blob 可播放所需的数据，然后将所有 Blob 重新组合成一个 Blob 并重新上传到服务器。

谢谢

我目前正在尝试在内部设置采样频率navigator.mediaDevices.getUserMedia。这是一个代码片段：

我不相信设置sampleRate实际上getUserMedia有效，因为当我检查具有不同值的 blob 大小时sampleRate，它永远不会改变。每个 blob 始终在 6000 到 7000 的范围内。

The situation

I need to do the following:

• Get the video from a <video> and play inside a <canvas>

• Record the stream from the canvas as a Blob

That's it. The first part is okay.

For the second part, I managed to record a Blob. The problem is that the Blob is empty.

The view

The code

The result

This the console.log of the ondataavailable event:

This is the console.log of the Blob:

The fiddle

Here is the JSFiddle. You can check the results in the console:

https://jsfiddle.net/1b7v2pen/

Browsers behavior

This behavior (Blob data size: 0) it happens on Chrome and Opera.
On Firefox it behaves slightly different. It records a very small video Blob (725 bytes). The video length is 5 seconds as it should be, but it's just a black screen.

The question

What is the proper way to the record a stream from a canvas?
Is there something wrong in the code?

Why did the Blob come out empty?

我有一个 WebM 格式的 html5 媒体播放器元素，我的目标是能够以超高精度（高达 10 毫秒）播放其中的片段。设置片段的准确开始时间很容易，但我在给定时刻停止播放时遇到问题。例如，恰好在到达中间（5 秒）时停止 10 秒的媒体文件。

最初的想法是通过计时器暂停播放器，但我没有成功。即使我在 10 毫秒间隔内运行检查，它也不会在确切的时刻暂停播放器 - 由于计时器延迟而不是立即处理暂停操作 - 它会在 100 毫秒后停止。

所以我目前的想法是，也许我可以以某种方式将部分媒体从一个播放器提取到另一个播放器，以便新的播放器实例只包含我需要的片段？可行吗？我可以以某种方式仅将一部分“缓冲区”从 player1 复制到 player2 吗？

谢谢

我以这种方式在客户端录制 MediaStream：

这些数据在服务器端被接受，如下所示：

它就像一个魅力，但我想使用缓冲区并制作服务器端提供的视频直播流。有什么办法吗？

谢谢你的帮助。

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

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

在试图理解为什么我的一些 Web 应用程序的对象被 Chrome 保留在内存中之后，我想我可能已经把它缩小到MediaRecorder浏览器保留对象的情况，即使应用程序已经放弃了对它的所有引用，显式和隐含的。

请注意以下重现该问题的最小示例：

在评估了上述表达式之后——MediaRecorder创建的对象没有分配给它的引用（变量或属性）——我使用 Chrome 和 Chromium 中的“内存”选项卡分析了堆使用情况，并且该MediaRecorder对象在堆上的存在是'不是瞬态的——只要我想在堆上定位它，对象就在那里。它不会消失。

为什么保留？使用类似的普通类进行测试——例如，Object评估的行为符合预期——垃圾收集最终会收集匿名对象。new Object()但不是这样MediaRecorder。这对我来说闻起来非常像虫子。

相比之下，FirefoxMediaRecorder在适当的时候释放对象，当然考虑到垃圾收集，至少在我执行上面的语句之后它甚至不在堆上，而不是在我拍摄它的快照时。

媒体记录器对象没有被任何东西引用，并且应该具有它可能拥有的最短生命周期，但它在我在控制台被清除后拍摄的快照中存在于内存中（Chrome 开发者工具背后的开发人员建议在之前清除控制台拍摄堆快照，因为前者可能会保留原本会被释放的对象）。

我在类中找不到任何可以MediaRecorder向我表明可以将其与流分离或以其他方式“关闭”它的方法。没有确保没有明显或不那么明显（例如通过事件侦听器）对它的引用，我只能希望匿名对象不会被保留，而这样的对象通常不会被保留，但MediaRecorder对象似乎是. 可以这么说，似乎没有任何杠杆可以让我拉动处理一个。

您可以在下面的屏幕截图中看到，保留媒体记录器的对象并不完全是我的脚本的一部分，它们似乎与某些内部浏览器状态有关：

在“构造函数”列中选择的对象旁边的窗口图标具有工具提示“用户对象 [is] 可从窗口访问”。上面的代码片段是我在选项卡中运行的唯一代码，为什么对象会“从窗口可访问”，如果是，它肯定不能是我管理的任何引用？

那么为什么要保留对象呢？这里更大的问题是，如果我的应用程序启动许多记录并为每个记录创建一个新的媒体记录器对象，这些对象将不断堆积在内存中，这实际上是内存泄漏的情况。

就像我说的，我在 Firefox 62.0.2 中运行了相同的语句，并且行为与我预期的一样——MediaRecorder我创建的单个对象似乎超出了范围（因为它应该没有引用它）创建后不久。

（Chrome 版本 69.0.3497.100，Windows 10 上的 x64）