问题标签 [web-mediarecorder]

我正在尝试使用 MediaSource API 连接通过 MediarRecorder API 创建的单独 mp4 文件。问题是，MediaRecorder API 的当前 Chrome 浏览器实现中似乎存在一个错误，该错误从记录的文件中省略了 DURATION 元数据，不幸的是，使用 MediaSource API 将文件连接在一起时必须使用持续时间值

有什么方法可以解决使用 FFMPEG 重新编码文件的问题？

我第一次在 stackoverflow 上发帖，所以提前为协议中的任何失误道歉。

我正在创建一个 Django Web 应用程序，它有一个页面允许用户使用麦克风录制音频剪辑，然后将此剪辑保存到服务器。所以，用户流是：

• 从包含过去录音列表的页面中，单击“新建”。
• 您将被带到一个带有一些记录器控件的页面，您可以在其中点击“记录”。
• 说几句。
• 单击“停止”按钮，停止录制并提供“保存”按钮。
• 点击“保存”按钮；弹出一个告诉您保存成功的弹出窗口，然后您将返回到带有录音列表的“索引”页面（您的最新录音在顶部）。

我正在使用Chris Rudmin 的 opus-recorder来处理录音，并编写了一些自定义 javascript 以将音频作为 blob 作为 XMLHttpRequest 发送回服务器。
服务器上有一个处理 POST 的 Django 视图，并返回带有成功/失败信息的 JSON。
回到客户端，向用户显示带有状态的警报，然后页面重定向（使用 window.location.href 和从服务器发送的 JSON 中的 url）到索引页面。

问题是： 我第一次加载页面时一切正常，包括保存记录和重定向到索引页面。但是，如果我现在从“索引”页面单击“新建”，当我返回录制页面时，它无法工作。控制台向我显示消息

现在，如果我注释掉正在执行重定向的 window.location.href，并手动输入索引页面的 URL，然后单击“新建”返回，一切正常。所以关于那个重定向的东西把事情搞砸了，但我不知道是什么。

更新

我尝试将 window.location.href 替换为

和

但这些都没有解决问题。

在最近的 iOS 更新 (13.1.3) 之后，Safari 和录音似乎出现了一个错误。

因为 Safari/iOS 不支持 MediaRecorder，所以我使用（一些 polyfill）getUserMedia进行捕获和ScriptProcessorNode录制。录制完成后，原始数据被解码为 wav，然后可以播放音频。直到最近它才起作用。

现在我发现了一个奇怪的行为。录制成功完成，但我无法播放结果音频。播放没有开始，也没有任何错误。当设备/上下文忙于捕获等时，Safari似乎无法播放音频。如果我将浏览器最小化到托盘并在一段时间（~10秒）后打开播放效果很好。

这个问题可以在这里重现 https://ai.github.io/audio-recorder-polyfill/

但这项工作很好 https://kaliatech.github.io/web-audio-recording-tests/dist/#/test1 https://danielstorey.github.io/WebAudioTrack/index.html

有什么帮助吗？

我正在尝试使用 MediaRecorder 录制 MediaStream 并使用 MediaSource 在视频元素中显示它。所以设置看起来像：

1. 从浏览器请求一个 MediaStream
2. 将其添加到 MediaRecorder
3. 将记录的 blob 添加到 MediaSource 缓冲区

结果看起来很不错，但有一个问题：播放有延迟。直接显示 MediaStream 时没有延迟，因此我将第一个要点作为问题进行了整理。然而，似乎 MediaRecorder 或 MediaSource 正在为流添加大约 3 秒的延迟。

上面的代码只是从实际项目中复制和粘贴，所以请不要指望它可以通过复制和粘贴来工作；）

有谁知道为什么会出现这种延迟？关于如何调整浏览器以不添加此延迟的任何想法？

我正在尝试跨不同的 html 页面访问 MediaRecorder 对象。这是因为我希望记录器根据加载的 html 页面/单击的按钮来开始/停止记录。目前，我尝试使用 sessionStorage 来存储 MediaRecorder 对象，但似乎 sessionStorage 只接受字符串值？有没有办法使 MediaRecorder 成为全局变量，以便不同的 html 页面及其 javascript 文件可以访问它？

许多浏览器的媒体流录制 API 实现提供了一个 MediaRecorder 类来接受来自 getUserMedia 的流，压缩它们，并将它们作为 Blob 传递。MediaRecorder 提供了一种start(timeslice)方法。ondataavailable它开始压缩流，然后大约每timeslice毫秒调用一次处理程序。

这是理论，至少。但是一些浏览器（我在看你，Firefox）只每半秒甚至整秒调用一次处理程序，timeslice尽管请求的值是这样的。我的特定应用程序需要更短的延迟，因此它不能使用具有该缺陷的浏览器。

有没有一种干净的特征检测方法可以快速解决这个问题？还是我必须查看 User-Agent 字符串？

在我的 Angular 项目中，我有一个有 2 个成员函数的类。在第一个函数中，我有 2 个级别的回调。在第一个回调中，我需要添加第二级事件回调。在这个第二级回调中，我需要能够调用顶级类的第二个成员函数。我尝试了https://www.pluralsight.com/guides/javascript-callbacks-variable-scope-problem中建议的技巧。它对我不起作用。目前我正在尝试Angular2 - 如何从应用程序外部调用组件函数，该应用程序讨论 ngZone 以公开组件成员函数。

我的代码的详细信息：

我有一个用 Angular 8 编写的音频处理“AudioProcessingUtility”类。在它的 Init() 中，我正在初始化 MediaRecorder。我正在为“datavailable”事件添加一个监听器。此侦听器函数需要从“主”类调用我的实用程序函数。即它必须从回调进入父类的范围。

代码：

问题：

触发 dataavailable 事件。但我在以下几行中遇到错误。它给出错误ERROR TypeError: this.audioProcessorCallback is not a function

我知道这是因为 - 在回调内部，它无法找到“this context”。请建议我如何调用我的类函数，而不必将所有内容都放在内联回调函数中，这对我来说是不切实际的。

编辑：我重写了问题以提供显示完整代码并更改了描述。提前致谢。

我有用户使用 MediaStream Recording API 使用麦克风录制音频，录制效果很好，但如果不允许浏览器录制语音，然后单击录制按钮，它不会显示任何错误，

我想要的是如果用户不允许语音并且仍然再次单击录制按钮浏览器以获得录音权限。

我已经尝试了以下代码的几个选项，但不幸的是，它不起作用，有人可以帮我解决这个问题吗？

在初始拒绝后使用 getUserMedia() 重新提示权限时提出了相同的问题或类似问题，但仍然没有解决该问题，希望找到最合适的答案，以在初始化页面后解决重新提示权限弹出窗口。

我正在使用MediaRecorder API在 Web 应用程序中录制视频。该应用程序可以选择在相机和屏幕之间切换。我正在使用 Canvas 来增强流记录。该逻辑涉及从相机捕获流并将其重定向到视频元素。然后在画布上渲染此视频，并将来自画布的流传递到MediaRecorder. 我注意到的是，只要用户不切换/最小化 chrome 窗口，从屏幕切换到视频（反之亦然）就可以正常工作。画布渲染使用requestAnimationFrame并在选项卡失去焦点后冻结。

有没有办法指示 chrome 不要暂停执行requestAnimationFrame？有没有其他方法可以在不影响MediaRecorder录制的情况下切换流？

更新： 通读文档后，播放音频或具有活动 websocket 连接的选项卡不会受到限制。这是我们目前没有做的事情。这可能是一种解决方法，但希望社区提供任何替代解决方案。（setTimeout 或 setInterval 过于节流，因此不使用它，而且它会影响渲染质量）

更新 2： 我可以使用 Worker 解决这个问题。工作人员调用 API 并通过 postMessage 将通知发送到主线程，而不是为 requestAnimationFrame 使用主 UI 线程。UI Thread 完成渲染后，会向 Worker 发送一条消息。还有一个增量周期计算来限制来自工人的压倒性消息。

我使用媒体记录器（html5-audio-record）在 android webview 中录制音频，这是可行的，但有时我没有收到任何数据并且 blob 没有改变！我关闭了我的 android 活动，并且每次测试的状态都是固定的，但是第一次运行良好，下一次运行不正常。为什么当我停止录制时 e.data 为空？

JS代码：