问题标签 [web-mediarecorder]

我从canvasthrough获取帧canvas.getDataURL()。

但是，现在我有一组 png 图像，但我想要一个视频文件。

我该怎么做呢？

是否可以使用 MediaRecorder 将 WebVTT 轨道（或任何其他类型的字幕和字幕轨道）与音频和视频轨道一起混合到输出流中？

WebM 支持 WebVTT 轨道。有一个2012 年的 W3C 文档简要提到了字幕轨道的可能性。

今天是否支持带内字幕？如果是这样，我该如何使用它？

我有一个使用MediaRecorderapi 创建的音频文件/blob：

然后在录制完成后：

如何使用此 blob 创建一个AudioBuffer？我需要：

• 将Blob对象转换为ArrayBuffer我可以使用的AudioContext.decodeAudioData一个（返回一个AudioBuffer）或
• 将Blob对象转换为Float32Array，我可以将其复制到AudioBufferwithAudioBuffer.copyToChannel()

任何有关如何实现这一目标的提示都值得赞赏。干杯!

我想使用网络记录用户网络摄像头流MediaRecorder并生成一个文件，该文件具有：

• 正确设置持续时间（浏览器可以看到和使用，例如 html5 视频播放器在视频处于preload状态时显示正确的持续时间）
• 为音频和视频轨道正确设置编解码器

在这里您可以看到一个完整的示例（Chrome：54.0.2840.71，Firefox：49.0.2 -> 请使用相对较新的浏览器，因为演示中使用的 API 是相当新的）：https ://jsfiddle.net/2vr7vL2p/12/除了：

• 在 chrome 中，持续时间返回Infinity（在 Firefox 中它工作正常）
• 在 firefox 和 chrome 中，结果文件都损坏了编解码器（例如 VLC 媒体播放器返回VLC does not support the audio or video format "undf". Unfortunately there is no way for you to fix this.：）

如何解决这些问题？

我需要从用户那里捕获带有音频的视频并将其上传到服务器。我一直在使用媒体流录制。

我采用了以下链接中的代码示例。

https://simpl.info/mediarecorder/

我基本上是将视频文件转换为 base64 字符串并将其上传到服务器。但是，我们友好的 Safari 浏览器不支持此功能。

我们的想法是使用任何网络摄像头，而不考虑 Windows 或 Mac 计算机甚至 Ipad 等设备。我正在使用 .net 技术开发该站点。

任何帮助将非常感激。请注意，它可能与其他线程相似，但不能重复。

正如评论中所讨论的，我附上了代码示例代码

示例 JS 文件

更新

在阅读了几份文件后。我终于找到了一个第三方插件来让 WebRTC 在 Safari 和 IE 中工作，这是由 Skylink 提供的。

这是链接 - https://confluence.temasys.com.sg/display/TWPP

但是，这仍然不能解决录制它显示流式传输的视频的整体问题，但不提供保存以供以后使用的支持。我真的不想使用 Flash，因为我必须购买 Flash 媒体服务器。有没有其他方法可以做到这一点？

就像，我可以将直播流托管到某个地方，然后提供链接以供稍后观看，或者将流转换为 base64string 并将其存储到数据库中。

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

我需要的是没有什么不同requestAnimationFrame()，但我需要 CanvasCaptureMediaStream（和/或 MediaRecorder）而不是窗口。MediaRecorder 可能以与窗口不同的帧速率运行（可能以不规则的可分速率运行，例如 25 FPS 与 60 FPS），因此我想以其帧速率而不是窗口的帧速率更新画布。

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

我认为没有，但我在WebM 文档页面上看到支持BitDepth带有以下注释的字段：

BitDepth - 每个样本的位数，主要用于 PCM。

如果 WebM 确实支持 PCM，那么 Chrome 的实现呢？如果是，什么是适合与 MediaRecorder 一起使用的内容类型？这些都返回 false：

在哪里可以找到Firefox或支持的所有 MIME 类型的列表Chrome？到目前为止我看到的所有例子video/webm都只使用。

下面是 MediaRecorder API 的一个简单示例：

由于opus 编解码器的一个已知错误，这目前在 chrome 中不起作用。看起来它最近已经修复，所以它应该在几个月内达到稳定版本（我想？）。

所以我的问题是：我上面介绍的“hello world”是否正确？它似乎在 Firefox 上运行良好，并有望很快在 chrome 上运行，但我不太确定规范的所有细节，我只是想确保我做的一切都是正确的。关于示例代码正确性的一些子问题：

• 在 Firefox 中，mediaRecorder.mimeType是一个空字符串，但Blob显然仍然成功创建。在 chrome 中，mediaRecorder.mimeType即使我video:false在getUserMedia选项中指定，也是“video/webm”。这里发生了什么？
• 我是否需要使用fetch将 blob 转换为数组缓冲区？这并不难，但似乎有点hacky。
• 是否有解决方法，以便在整理编解码器错误时在 Chrome 中工作？new MediaRecorder(stream, {mimeType:"audio/wav"});我在阅读此内容后尝试过，但它给了我一个“不支持 mimeType”的错误。事实上，mimeType除“video/webm”之外的任何其他内容都会在 chrome 上出现错误，并且似乎 firefox 只是忽略了该mimeType选项。
• 在有关 MediaRecorder 的mdn 文章中，他们使用new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });. 他们为什么选择那种类型和编解码器？他们怎么知道这是 MediaRecorder 使用的实际 MIME 类型和编解码器？他们怎么知道 mime-type 可以在所有浏览器中工作？

这是一个相关的问题/答案。真的，我只是想要一些我知道在 3 个月内不会中断的代码，因为事情是由浏览器实现的，并且规范是经过调整的。如果它现在也可以与 chrome 一起使用，那将是一个奖励。谢谢！

我使用 MediaRecorder 录制麦克风。chrome中MediaRecorder的默认格式是video/webm。这是一个简短的例子：

此代码仅在 chrome 中出现“未捕获（承诺）DOMException：无法解码音频数据”的错误context.decodeAudioData。

这里有什么问题，我该如何在 chrome 中修复它？

这是 plunker 中的工作示例：plunker