问题标签 [web-mediarecorder]

我希望能够以 60 fps 录制我的 threejs 场景的 4k 视频。我试过 ccapture 和 canvas.captureStream()。它们对我的帧速率有不可靠的影响，因此有很多丢帧。场景能够以 60 fps 流畅播放，但是当我们添加 mediaRecorder ( https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder ) 时，fps 会下降到 4fps。任何人都可以为这个问题提供任何解决方案吗？

我对 MediaRecorder API 有疑问。它在 Chrome 上运行良好，并且曾经在早期版本的 Firefox (Mac) 上运行，但从 53.0.2 版开始，我在开发控制台中得到以下信息：

--> MediaRecorder.isTypeSupported('audio/webm') false --> MediaRecorder.isTypeSupported('video/webm') true

Firefox 是否停止通过 MediaRecorder API 支持音频录制？

我使用 MediaRecorder api 成功录制了我的网络摄像头，生成的文件大小对于它们的质量来说似乎太大了。

例如，对于 480x640 的 8 秒视频，我得到了 1mB 的文件大小。这似乎不对。

我要记录的代码（）

这种方法得到的文件太大了，不知道是不是用VP9编码压缩过？一个 7 秒的视频大约是 870kB！

使用 mediainfo 工具检查文件给了我

我做错了什么？附加块后是否必须重新编码？我缺少一些属性吗？VP9 应该大大减少文件大小。

我在 chrome 上最新有以下内容：

然后我编译了一个由 5s 段组成的数组——blob 数据可用。但是，当我为这些段中的每一个创建 URL 时：

仅播放第一个视频。为什么是这样？

更新

如果我在 中停止/启动录像机onDataAvailable，我会在这里得到可播放的片段，由 onDataAvailable 中的不可播放的迷你片段分隔，因为我在处理视频后立即调用停止。我可以通过这样做来“近似”期望的行为，然后忽略小于某个阈值的 blob 以忽略“死间隙”段。不过，这闻起来像脚，如果可能的话，我希望进行适当的分割。

我启动和停止 MediaRecorder 流。红色的“录制”图标在开始时出现在 Chrome 选项卡中，但在停止时不会消失。

图标如下所示：

我的代码如下所示：

我还mediaRecorder.onstop定义了一个处理程序。它不返回任何东西或干扰事件对象。

在启动和停止 MediaRecorder 实例后清除选项卡的“录制”指示器的正确方法是什么？

我使用MediaRecorderAPI 来录制用户视频。每个OnDataAvailable将 webm 块添加到数组（这是纯客户端解决方案）。

经过长时间录制的几次测试，我们发现firefox内存管理存在问题：Fierfox吃掉所有内存，所有块都本地存储在RAM中。Chrome 能够记录 12-13 小时而没有任何性能问题，所有块都存储在磁盘上“Chrome”下的临时文件夹中。

我如何在firefox上解决这个问题？LocalStorage 最多 10mb 是不够的，服务器解决方案在我的情况下并不好。

我正在与Mediarecorder录制视频。我需要直接从浏览器显示该视频的本地预览。我的问题是长时间的录音和大尺寸的视频。所以我不能将 MediaRecorder blob 存储在内存中，因为它会导致浏览器在内存（RAM）低的机器上崩溃。所以来自我的每个 webm blob 都onDataAvailable存储到indexedDB. 完成记录后，我indexedDB通过getAll事务请求所有存储的数据，但我仍然有同样的内存问题。如何在不将所有数据加载到内存的情况下播放这个 blob 数组？我怎样才能缓冲这些数据？

我尝试使用MediaSource API

我从中获取数据的方法indexedDB：

当试图玩时MediaSource API：

但我得到错误"Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source."

更新：此外，我在 Firefox 上测试了这段代码。部分工作......在添加块 100 后sourseBuffer我得到错误：QuotaExceededError

所以我有两个主要问题：

1. 如何修复 SourceBuffer 错误以及它发生的原因？
2. 这是在本地存储和播放大型 .webm 文件的最佳方式吗？

我可以用网络摄像头录制视频，在浏览器上播放生成的 blob 并将其下载到本地机器上，但是当我将文件保存到服务器时，它是不可读的。我尝试将块发送到服务器并将它们连接在那里，并发送整个 blob，但结果是相同的（不可读的视频）。我首先使用 FileReader() 读取 blob，它给出 base64 结果，然后将其发送到服务器，在服务器上我使用 base64_decode() 并将其保存到文件夹中。

JS代码：

在服务器上：

上传所有块时：

我不知道我做错了什么。我已经尝试了一个多星期来让它工作，但它不会。请帮忙！

我有一个使用具有PAUSE功能的 StreamMediaRecorder JS API 的录像机应用程序。每当用户暂停录制时，应保存一个新的 blob 切片，最后应保存一个大的 blob 文件。

但是，保存的每个 blob 文件只是播放最后一段，而不是整个文件。创建 blob 变量后，大小等于所有 blob 块的总和，但在播放时，只播放最后一块。

任何人都知道如何解决它？谢谢大家！

给定代码

Chromium 浏览器使用 捕获<video>元素的回放.captureStream()， 以及实例事件的结果日志MediaRecorder()。Blob URLBlobdataavailableMediaRecorder

在当前实现.mozCaptureStream()错误的 Firefox 浏览器中，会抛出recorder.start()callSecurityError: The operation is insecure.和 at recorder.stop()call InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable。

这些错误显然是由于来自 DOM Elements的媒体捕获的安全考虑。

我们如何才能避免上述错误并达到 Chromium 和 Chrome 浏览器在 Firefox 浏览器上实现的相同结果？