问题标签 [web-mediarecorder]

我有以下代码在 Chromebook Package App 中使用MediaRecord API 记录 USB 流。

}

注意：getUserMedia 用于启动流。流预览工作没有任何缺陷。

当我将约束设置为以 1920 x 1080 以每秒 30 帧的速度开始流式传输时，我的视频录制工作并成功保存到本地。

但是当尝试以 60 FPS 的 1920 x 1080 分辨率时，我将块推送到记录数据并且 Web 应用程序被强制关闭。

这是在运行 Chrome OS 版本的 Chromebook 中尝试的：73.0.36（官方构建）。该应用程序部署为 Chrome 包应用程序。

有人可以帮我解释崩溃的原因吗？

如果我正在使用麦克风访问麦克风，getUserMedia()是否可以在记录完成（停止）后删除/禁用访问？我不是在谈论MediaStreamRecorder.Stop()

我需要在一个页面中多次录制用户的音频（使用多视图属性）

我尝试使用相同的 javascript 来访问麦克风，但在第二种情况下它显示错误

1.InvalidStateError：试图使用一个在下面的函数中不可用或不再可用的对象

startRecordingnew()

下面我给出了我用过的JS：

对于第一个场景，它是成功的！谁能告诉我如何实现这一目标？我正在考虑在第一个场景录制完成后禁用麦克风的访问。有可能这样做吗？

以下代码在首先加载视频观察客户端然后加载网络摄像头客户端时工作正常，但是，如果切换顺序或以任何方式中断流，例如通过刷新任一客户端，流将失败并且媒体源将其就绪状态更改为关闭。

我的假设是，在开始时接收到的视频需要初始化标头来启动，并且由于流是在中途读取的，所以它永远不会得到所说的初始化标头。我不确定如何将此类标头添加到 webm 文件中。

我试图更改源缓冲区上的序列模式，但什么也没做。我已经尝试重新启动录像机并且可行，但我的最终计划是拥有多个观察客户端，并且在每次重新连接时重新启动录像机并不是最佳的。

相机客户端

服务器只是广播接收到的任何内容

观察客户

所以事实上，代码只是以一种不正确的方式工作，因此套接字发送服务器没有任何问题。它要么与 MediaRecorder 或 MediaSource 有关。

我上传了一个音频并将其连接到录制时的视频输出声音，第一次尝试工作非常完美，但是当尝试再次录制画布时，它会播放最后一个音频剪辑并附加新的音频剪辑，你可以检查我的意思下一个例子。
PS：这里让我感到困惑的是，当录制超过 1 次时，如果视频以 4s 结束，例如，音频会在视频的背景中继续播放！！！

I am new to TypeScript, and the whole JavaScript environment in general. I have a small project to do, which requires creating a browser application with TypeScript (I don't have any code yet).

I need to record raw PCM audio from the browser microphone, log it, and play the same PCM audio back through browser speakers.

I have looked into using MediaRecorder for recording, and using the plain HTMLAudioElement for playback, but i'm not sure if they support RAW audio. I also some posts mentioning to use AudioContext ScriptProcessorNode to obtain raw audio, but i have no idea how to play them back.

I do not need completed solutions, but would appreciate any pointers or tutorials that would help me get this done.

我正在尝试将实时 MediaStream（最终来自摄像机）从 peerA 投射到 peerB 并且我希望 peerB 实时接收实时流，然后在增加延迟的情况下重播它。不幸的是，无法简单地暂停流并继续播放，因为它会跳转到直播时刻。

所以我发现我可以使用 MediaRecorder + SourceBuffer 重新观看直播。记录流并将缓冲区附加到 MSE (SourceBuffer) 并在 5 秒后播放。这适用于本地设备（流）。但是，当我尝试在接收器 MediaStream (from pc.onaddstream) 上使用 Media Recorder 时，它看起来像是获取了一些数据，并且能够将缓冲区附加到 sourceBuffer。但是它不会重播。有时我只得到一帧。

你知道为什么它不会播放视频吗？

我已经创建了一个包含所有必要代码的小提琴来尝试它，javascript 选项卡与上面的代码相同，（html 大部分无关紧要，不需要更改）

有些人试图减少延迟，但我实际上想将它增加到大约 10 秒，以重新观看你在高尔夫挥杆或其他事情中做错的事情，如果可能的话，完全避免使用 MediaRecorder

编辑： 我在一些 RTC 扩展中发现了一个叫做“播放延迟”的东西

允许发送者控制从捕获到渲染时间的最小和最大延迟

• https://webrtc.org/experiments/rtp-hdrext/playout-delay/

我该如何使用它？对我有帮助吗？

我正在编写一些代码，允许用户使用他们的麦克风录制自己，然后将录音上传到 Azure Blob 存储。

要录制音频，我正在使用类似于下面的代码

然后我的停止函数创建一个 Blob，然后尝试将其上传到 Azure

这一切都适用于用户上传文件的另一个页面，但不适用于使用 MediaRecorder 上传的音频。

有什么想法我哪里出错了吗？

谢谢

我确实使用 mediaRecorder：

当我在 FF 上录制时：FF 和 chrome：好的

当我在 chrome 上录制时：chrome 没问题，firefox 返回：unknown MimeType

当我检查这些录制的视频时：我得到了 chrome：

（默认）

对于火狐：

Stream #0:0(eng): Video: vp8, yuv420p(progressive), 640x480, SAR 1:1 DAR 4:3, 1k tbr, 1k tbn, 1k tbc (默认

在 JS 中我确实使用：

关于如何在 chrome 上录制视频以便 Firefox 可以阅读它们的任何想法？

我正在尝试从画布录制视频，即使用户从选项卡导航（通过单击另一个选项卡或最小化窗口）。我正在使用一个计时器，即使用户使选项卡模糊以呈现画布，该计时器也会运行（我知道该计时器会在选项卡模糊时触发，因为我已经对其进行了测试）。但是当我将MediaStreamfrom附加canvas.captureStream()到MediaRecorder对象时，BlobEventfromondataavailable回调的长度为 0。

下面是我正在尝试做的一个例子。

我知道ondataavailable通常不会在标签背景下触发，我通过使用该requestData功能来获得它MediaRecorder，请假设它确实如此。

captureStream()我在画布元素中有一个完美运行的演示动画，我可以使用 MediaRecorder 和元素将其录制为 webm 视频文件<canvas>。

来自 2d 上下文 api 的动画在生成的视频中表现得很好，但是当我尝试使用drawImage()以将图像添加到画布时，我似乎无法使其正常工作。在后一种情况下，MediaRecorder.ondataavailable处理程序不会接收到有效数据，并且生成的视频文件是 0 字节文件。

我什至实现了一个演示，我可以在其中切换是否drawImage()执行呼叫。在下面的代码中，如果drawImage = false视频生成没有问题，但如果drawImage切换到true，它将生成一个 0 字节的文件。

为了演示，我把这个jsfiddle放在一起https://jsfiddle.net/keyboardsamurai/3tkm0dp6/16/

我在 MacOS 上的“Chrome 版本 75.0.3770.100（官方构建）（64 位）”上运行此代码 - 甚至不确定它是否应该在 Firefox 等上运行，因为 MediaRecorder API 在 FF 上抛出看似无关的错误。

另请参阅此处的完整代码：

更新：确认上述行为至少可在以下 Chrom(e/ium) 版本上复制：

MacOS Mojave 10.14.5 上的版本 75.0.3770.100（官方构建）（64 位）

MacOS Mojave 10.14.5 上的版本 77.0.3849.0（官方构建）金丝雀（64 位）

Ubuntu 19.04 Disco Dingo 上的版本 77.0.3770.100（官方构建）快照（64 位）