问题标签 [web-mediarecorder]

我已经构建了一个非常简单的 POC，用于使用麦克风录制音频文件并将录制的 blob 附加到浏览器中的音频标签元素中。问题是录制完成后，我无法来回倒带，直到录制完全加载。看起来持续时间有问题。我想要实现的是这样的：

https://online-voice-recorder.com/beta/

在那里，完成录制后，您可以立即倒退到录制的结尾，即使是 30 分钟长。它像魔术一样工作。如何做到这一点？

这是我写的代码（大部分是从 MDN 复制的）。您可以复制粘贴到任何 index.html：

我的 Web 应用程序允许用户从同一页面动态创建视频和音频文件，通常在两者之间轮换。

每个录制动作都有自己的实例化和逻辑，包括它们自己的 MediaStreams。

当我初始化音频流然后尝试初始化视频流时会出现问题。录制工作（视频和音频，一旦完成录制就可以播放），但视频流本身显示为空白。

当我在没有先实例化音频流的情况下实例化视频流时，不会发生这种情况 - 在我尝试录制音频然后回来尝试录制视频之前，它工作正常。

我已经确认视频流在实例化时同时具有音频和视频轨道。我无法弄清楚为什么视频轨道显示为空。

我错过了什么？

设置使用基本的 getUserMedia API 录制视频：

设置录制音频。我正在使用 RecorderJS 进行录制：

所以我正在尝试构建一个直播应用程序，并遇到了一个奇怪的问题。

所以我getUserMedia用来从用户那里捕获视频，然后将用户标记为广播公司。然后我用它MediaRecorder来获取实际的视频数据MediaStream并通过 websocket 发送它。

websocket 只是将视频数据广播到所有连接的客户端，但是由于某种原因，它只能在广播者的播放器上正确播放，但是当我尝试从不同的客户端播放相同的确切流时，它只会给我这个错误：

Uncaught DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.

当我查看chrome://media-internals时，我看到了这个错误：

00:00:00 94 error Unexpected element ID 0x8c 00:00:00 94 error Append: stream parsing failed. Data size=33926 append_window_start=0 append_window_end=inf 00:00:00 94 pipeline_error CHUNK_DEMUXER_ERROR_APPEND_FAILED

两个客户端上的脚本和所有内容当然是相同的。唯一不同并且我认为可能是罪魁祸首的事实是广播公司的流没有立即开始，因为广播公司首先需要将视频数据发送到 websocket 服务器，以便服务器将任何内容转发回来。然而，非广播客户在流的“中间”跳跃。

唯一的另一个区别是广播是通过同一个套接字下载和上传视频数据，但我不知道这将如何影响问题。

编辑：在运行测试后，两个客户端都连接到 websocket 而没有流式传输视频，然后运行流，两个客户端都工作，这意味着问题确实源于其他客户端在中途跳入流，这将如何修复？

然而，我对这一切都很陌生，所以我不确定这是否是好的推理。作为参考，这是脚本：

我正在尝试使用 HTML5 API 录制视频。我希望这个解决方案是跨平台的，它应该至少可以在 Chrome、Firefox 和 Edge 浏览器上运行。我尝试使用以下代码

上面的代码在 Chrome 和 Edge 中显示视频。当我尝试使用 MediaRecorder API 捕获字节时，它只适用于 Chrome 而不是 Edge。请建议可以做什么。

请建议，我如何捕获字节以便将其保存在服务器上。

我尝试了MediaStreamRecorder，但这也不适用于 Edge。

更新：我发现很少有方法表明使用 Canvas 作为渲染帧和捕获字节的选项。然后使用 requestAnimationFrame 继续捕获视频。虽然这可能有效，但我仍然愿意接受任何其他更好的建议。

我想录音，并混合mp3文件但找不到文件

我已经通过 uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" 添加了权限。

那是我的代码

soundList.add(voiceName+File.separator+"temp"+File.separator+sound+soundNum+".mp 3");

我正在尝试使用 MediaRecorder API 构建屏幕录制。

作为暗示性媒体记录方法

使用这种方法录制工作正常，但录制的视频搜索不起作用。

关于这个问题，我在网上做了一些搜索，发现视频标题不包含持续时间。

在控制台上打印file对象时，它包含以下属性，

可以看到文件对象不包含持续时间属性。

任何人都可以建议任何可用的 JavaScript 库，它只能在准备视频文件时在客户端修复视频头？

我正在编写一个简单的流媒体服务。

A 浏览器 A 打开一个到服务器的 Web 套接字，然后另一个浏览器 B 打开一个到同一服务器的新套接字。

浏览器 A 通过其摄像头（MediaRecorder API）注册视频并将其发送到服务器。

服务器将此视频广播到其他连接的浏览器。

我有一个使用 Socket.IO 的工作版本，但我想用 vanilla JavaScript（Node.js 服务器上的 WebSocket.Server 和客户端上的 webSocket）来做。

这就是问题：

使用 socket.io a 可以这样写：

Stream 来自 mediarecorder -> dataavailable 事件监听器

但是对于本机 websocket，我无法发送嵌入到 JSON 对象中的 blob，因为 websocket 只能发送字符串或数组缓冲区。

为了将 JSON 和 blob 一起发送，我尝试了许多不同的方法，但没有任何效果。

有什么帮助吗？

是否可以在客户端仅使用 Engine.IO 以便将带有 blob 和 JSON 的消息打包在一起？关于这种方式的任何想法？

我使用 webapi MediaRecorder 来捕获语音。

所以每 200 毫秒，我会得到一个包含音频剪辑的 blob。该数据的 int8View 如下所示：

-5,-127,36,84,-128,123,-125,37,35,-109,-94,120,111,-110,40,-93,-7,77,35,-62,83,-36,- 12,47,127,47,-75,-35,89,55,65,-75,-106,96,-86,30,118,37,51,-28,-2,-38,124,-95,102,-91, -109，……

我的问题是如何获得每个采样点的幅度或该剪辑的平均幅度？我的目的是用它来检测语音与静音。

剪辑是用 opus 编码的，所以我假设将每个数字的绝对值相加是行不通的，对吧？

谢谢！

我想记录用户的麦克风 5 秒长的片段并将每个片段上传到服务器。我尝试使用 MediaRecorder 并以 5 秒的时间间隔调用 start() 和 stop() 方法，但是当我连接这些录音时，它们之间会出现“滴”的声音。所以我尝试使用 start() 方法的时间片参数记录 5 秒段：

但只有第一段是可播放的。我能做什么，或者我怎样才能让所有的 blob 都可以播放？我必须记录然后上传每个片段。我无法制作 blob 数组（因为用户可以记录 24 小时甚至更多的数据，并且需要在用户记录时将数据上传到服务器上 - 延迟 5 秒）。

谢谢！

我正在使用一个 MediaStream 并使用画布和 WebAudio API 合并两个单独的轨道（视频和音频）。MediaStream 本身似乎并没有不同步，但是在将其读入 MediaRecorder 并将其缓冲到视频元素中之后，音频似乎总是比视频播放得早得多以下是似乎有问题的代码：

AudioMixer.js

我认为这与如何将数据推送到 MediaSource 缓冲区有关，但我不确定。我在做什么使流不同步？