标签: web-mediarecorder

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

编辑：

随着年底和 Manifest V2 即将结束，我对此做了更多研究，并发现了以下解决方法：

• 这里使用 API 的示例desktopCapture： https ://github.com/GoogleChrome/chrome-extensions-samples/issues/627

  这种方法的问题在于，它要求用户通过某些 UI 选择捕获源，这可能会造成破坏。命令--auto-select-desktop-capture-source行开关显然可以用来绕过这个，但我还没有能够成功地使用它。

• 这里的示例扩展tabCapture通过创建自己的非活动选项卡来访问tabCaptureAPI 并记录当前 活动选项卡，从而解决了在 Service Worker 中无法工作的问题：

  https://github.com/zhw2590582/chrome-audio-capture

  到目前为止，这似乎是我在用户体验方面找到的最佳解决方案。Manifest V2 中提供的背景页面本质上被替换为虚拟选项卡。

第二个解决方案的迂回似乎也表明该tabCaptureAPI 本质上不适合在 Manifest V3 中使用，否则会有更直接的使用方式。我很失望的是，Manifest V3 正在强制执行，而实质上却留下了 Manifest V2 的功能，例如这一点。

原帖：

我正在尝试编写一个清单 v3 Chrome 扩展来捕获选项卡音频。但据我所知，清单 v3 中存在一些更改，这使得这有点困难：

• 后台脚本被 Service Worker 取代。
• Service Worker 无权访问chrome.tabCaptureAPI。

尽管如此，我还是设法得到了一些几乎可以工作的东西，因为弹出脚本仍然可以访问chrome.tabCapture. 但是，有一个缺点 - 选项卡的音频被静音，并且似乎没有办法取消静音。这是我到目前为止所拥有的：

1. 从弹出脚本中查询 Service Worker 当前选项卡。

let tabId;

// Fetch tab immediately
chrome.runtime.sendMessage({command: 'query-active-tab'}, …

我主要对音频 MIME 类型感兴趣，但如果有人可以提供 Safari 的 MediaRecorder 支持的所有 MIME 类型的列表，那将会很有帮助。

我一直无法找到有关此事的任何文件。到目前为止，我已经使用 Chrome 和 Firefox 支持的所有音频 MIME 类型运行了 MediaRecorder.isTypeSupported(...)，但似乎都不支持它们。

在尝试理解为什么我的某些Web应用程序的对象被Chrome保留在内存中后,我想我可能已经将其缩小到MediaRecorder浏览器保留其他无法访问的对象的情况.请注意以下重现问题的最小示例:

new MediaRecorder(new MediaStream())

我使用Chrome和Chromium中的Memory选项卡分析了堆的使用情况,并且MediaRecorder堆上对象的存在并不是暂时的 - 只要我在上面执行之后在堆上找到它就会存在,它不会消失.

为什么会这样？没有任何东西可以保留它,这对我来说闻起来很像一个臭虫.相比之下,Firefox MediaRecorder在适当的时候发布了对象,当然考虑到垃圾收集,至少它在我执行上面的语句之后甚至不在堆上,而不是在我拍摄它的快照时.

任何东西都没有引用媒体记录器对象,它应该具有它可能具有的最短寿命,但是在控制台被清除后我在快照中存在于内存中(开发人员工具for Chrome背后的开发人员建议先清理控制台)获取堆快照,因为前者可能会保留对象,否则将被释放).

我在MediaRecorder类中找不到任何方法可以指示我可以将它与流解除关联或以其他方式"关闭"它.如果没有确定没有明显或不那么明显(例如通过事件监听器)的引用,我只能希望不保留匿名对象,而这些对象通常不会,但MediaRecorder对象似乎是.对我来说似乎没有任何杠杆可以拉动处理一个,可以这么说.

您可以在下面的屏幕截图中看到哪些对象保留了介质记录器并不完全是我的脚本的一部分,它们似乎与某些内部浏览器状态有关:

在"构造函数"(The Constructor)列中选择的对象旁边的窗口图标具有工具提示"用户对象[是]可从窗口访问".上面的代码片段是我在选项卡中运行的唯一代码,为什么对象可以从窗口访问,如果是,它肯定不能是我管理的任何引用？

那么为什么保留这个对象呢？这里更大的问题是,如果我的应用程序启动许多录制并为每个录制创建一个新的媒体录制器对象,这些对象将继续堆积在内存中,这是事实上内存泄漏的情况.

就像我说的那样,我在Firefox 62.0.2中运行相同的语句,并且行为就像我期望的那样 - MediaRecorder我创建的单个对象似乎超出了范围(因为它应该是如何没有引用它)它创建后不久.

(Chrome版本69.0.3497.100,Windows 10上的x64)

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

let recorder = new MediaRecorder(this.stream)
let data = [];
recorder.ondataavailable = event => data.push(event.data);

然后在录制结束时:

let superBlob = new Blob(data, { type: "video/webm" });

如何使用此blob创建AudioBuffer？我需要:

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

任何关于如何实现这一点的提示都表示赞赏.干杯!

我启动并停止MediaRecorder流.红色"录制"图标会在启动时显示在Chrome标签中,但不会在停止时消失.

图标如下所示:

我的代码看起来像这样:

const mediaRecorder = new MediaRecorder(stream);
...
// Recording icon in the tab becomes visible.
mediaRecorder.start();
...
// Recording icon is still visible.
mediaRecorder.stop();

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

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

我正在尝试在 React Web 应用程序中设置一个录音机来录制大量人群（15 岁以上）的谈话，但似乎无法获得正确的录音质量。我最初尝试通过将以下约束传递给 getUserMedia 来捕获录音：

const constraints = {
  audio: {
    sampleRate: 48000,
    channelCount: 1,
    volume: 1.0,
    echoCancellation: true,
    noiseSuppression: true,
  },
  video: false
}

navigator.mediaDevices.getUserMedia(constraints)
.then( stream => {
  this.processStream(stream);
})

processStream = stream => {
  let options = MediaRecorder.isTypeSupported('audio/webm') ? {
    mimeType: 'audio/webm'
  } : {};

  let recorder = new MediaRecorder(stream, options);

  ...

}

对于大多数录音，录音质量都很好。然而，有时录音会以这种非常糟糕的、失真的、几乎金属般的音质结束。我一直无法弄清楚如何重现效果（我已经开始捕获用户的浏览器，以尝试帮助调试此问题）。

大约一周前，我使用约束 = { audio: true, video: false } 部署了应用程序，但这有时也会产生质量略有失真的录音。到目前为止，没有任何录音像之前的一些录音一样糟糕，但质量仍然没有达到我们想要的水平。

今天，我将约束设置为：

const constraints = {
    audio: {
      echoCancellation: false,
      autoGainControl: false,
      noiseCancellation: …

我正在尝试使用 mediaRecorder API 并使其在大多数浏览器上运行

video/webm;codecs=vp8,opus：在 chrome 和 Firefox 上工作正常，但在 Safari 上不行

video/mp4;codecs:h264：适用于 Safari 和 Chrome..但不适用于 Firefox

看起来 Safari 现在可以播放 webm 了。

使用什么 MIME 类型才能使其在这 3 个浏览器上运行？

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

let stream = new MediaStream();

// Get the mixed sources drawn to the canvas
this.canvas.captureStream().getVideoTracks().forEach(track => {
  stream.addTrack(track);
});

// Add mixed audio tracks to the stream
// /sf/ask/2949698181/
this.audioMixer.dest.stream.getAudioTracks().forEach(track => {
  stream.addTrack(track);
});

// stream = stream;
let mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=opus,vp8' });

let mediaSource = new MediaSource();
let video = document.createElement('video');
video.src = URL.createObjectURL(mediaSource);
document.body.appendChild(video);
video.controls = true;
video.autoplay = true;

// Source open
mediaSource.onsourceopen = …

对于录制音频和视频，我下创建WebM文件ondataavailable的MediaRecorder API。我必须单独播放每个创建的 webm 文件。

Mediarecorder api 仅将标头信息插入到第一个块（webm 文件）中，因此其余块在没有标头信息的情况下不会单独播放。

作为建议的链接 1和链接 2，我从第一个块中提取了标头信息，

// for the most regular webm files, the header information exists
// between 0 to 189 Uint8 array elements

const headerIinformation = arrayBufferFirstChunk.slice(0, 189); 

并将这个header信息附加到第二个chunk中，第二个chunk还是不能播放，但是这次浏览器显示的是视频的海报（单帧）和两个chunk之和的时长，例如：10秒；每个块的持续时间为 5 秒。

我用十六进制编辑器做的同样的标题信息事情。我在编辑器中打开了 webm 文件，从第一个 webm 文件中复制了前 190 个元素并将其放入第二个文件中，如下图所示，即使这次，第二个 webm 文件也无法播放，结果与前面的示例相同。

红色显示标题信息：

这次我从第一个 webm 文件中复制了标题和集群信息并将其放入第二个文件中，如下图所示，但没有成功，

问题

我在这里做错了什么？

有什么办法可以单独播放 webm 文件/块吗？

注意：我不能使用MediaSource来播放这些块。

编辑 1

正如@Brad 建议的那样，我想将第一个集群之前的所有内容插入到后面的集群中。我有几个 webm 文件，每个文件的持续时间为 5 秒。深入研究文件后，我才知道，几乎每个备用文件都没有聚集点（没有 0x1F43B675）。

在这里我很困惑，我必须在每个文件的开头或每个第一个集群的开头插入头信息（初始化数据）？如果我选择稍后的选项，那么没有任何集群的webm文件将如何播放？

或者，首先我需要以一种一开始就具有集群的方式制作每个 webm 文件，这样我就可以在这些文件中的集群之前添加标头信息？

编辑 …