标签: mediarecorder-api

我正在使用MediaRecorder API和Canvas captureStream方法在浏览器中对画布的VP8视频流进行编码.此数据通过二进制Web套接字发送到FFmpeg.

var outputCaptureStream = $('canvas')[0].captureStream(30);
var mediaRecoder = new MediaRecoder(outputCaptureStream, {
  mimeType: 'video/webm'
});

mediaRecorder.ondataavailable = function (e) {
  ffmpegStdin.write(e.data);
}

mediaRecoder.start(1000);

出于某种原因,流似乎随机切换到较低分辨率的中间流.FFmpeg对此不满意:

输入流#0:0帧从大小更改:1280x720 fmt:yuv420p到大小:1024x576 fmt:yuv420p

[vp8 @ 0x2a02c00]未实现升级.将您的FFmpeg版本更新为Git中的最新版本.如果问题仍然存在,则表示您的文件具有尚未实现的功能.[vp8 @ 0x2a02c00]如果您想提供帮助,请将此文件的样本上传到ftp://upload.ffmpeg.org/incoming/并联系ffmpeg-devel邮件列表.(ffmpeg-devel@ffmpeg.org)

我怀疑它与CPU使用率过高有关,并且Firefox试图通过缩小视频来提供帮助.我的问题:

• Firefox是否会动态缩小视频？
• 如果是这样,有什么条件导致这种情况发生？(CPU负载？流背压？)
• 有可能阻止Firefox这样做吗？
• 对于我遗漏的这种行为有不同的解释吗？

我从收到的帧canvas通过canvas.getDataURL().

但是,现在我有一系列png图像,但我想要一个视频文件.

我该怎么做呢？

var canvas = document.getElementById("mycanvaselementforvideocapturing");
var pngimages = [];
...
setInterval(function(){pngimages.push(canvas.toDataURL())}, 1000);

我有一个使用canvas.captureStream()的画布流.我有来自webrtc视频通话的另一个视频流.现在我想将画布流与视频流的音轨混合在一起.我怎么能这样做？

我正在尝试学习如何在浏览器中记录媒体,我可能会过度复杂化.有大量直接的例子,但是当记录被推送到Blob具有任意选择的媒体类型的对象时,我陷入了困境,而没有检查是否支持该格式.因此,我假设有一个列表或人们只是继续建立过去的经验.

例如,来自Mido22/MediaRecorder-sample:

      mediaOptions = {
        video: {
          tag: 'video',
          type: 'video/webm',
          ext: '.mp4',
          gUM: {video: true, audio: true}
        },
        audio: {
          tag: 'audio',
          type: 'audio/ogg',
          ext: '.ogg',
          gUM: {audio: true}
        }
      };
  media = mv.checked ? mediaOptions.video : mediaOptions.audio;
//...
function makeLink(){
  let blob = new Blob(chunks, {type: media.type })
//...

或者来自MDN的使用媒体流录制API:

 var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });

在规格和他们的 各种 单证大多是通用的描述为用户代理需要实现他们这是完全可以理解的.

这个问题的第一个答案就是我的想法,但我想知道某处是否有更容易访问和更新的列表？

更新:我几乎觉得好像我只是从岩石下爬出来,因为我一发布这个就意识到了最明显的两种方式......

1. 在 …

我正在开发一个更高阶的组件，它将提供使用 MediaRecorder API 捕获媒体的能力。但是，当我尝试使用捕获的视频（以传递给 createObjectURL 的 Blob 形式）时，我收到错误ERR_REQUEST_RANGE_NOT_SATISFIABLE。当我通过控制台记录传递给包装组件的 Blob 时，它的长度为 0。我已在本文末尾添加了我的代码。

为了诊断问题，我尝试了以下测试：

• 控制台记录 newChunkshandleDataAvailable记录正确的值（即[Blob]）。
• 我添加是React.useEffect(() => console.log(chunks), [chunks]);为了查看块是否实际上正在更新。这也会导致记录正确的值（即[Blob]）。
• 我添加是React.useEffect(() => console.log(captured), [captured]);为了查看捕获是否正在更新。这会导致记录大小为 0 的 Blob。
• 在 中handleStop，我控制台日志块以及通过组合这些块创建的 blob。这会分别产生一个空数组和一个大小为 0 的 blob。

这让我相信正确地将每个块添加到块数组中，但不知何故该数组在运行handleDataAvailable时被清空。handleStop

有谁知道是什么原因导致这种情况发生？

代码：

import React from 'react';

import { getUserMedia, getConstraints } from '../../utils/general';

const withMediaCapture = (WrappedComponent, recordingType, facingMode, deviceID) => {
  const constraints = getConstraints(recordingType, facingMode, deviceID);

  const type = …

我正在Chrome 中通过MediaRecorder录制视频。我的代码类似于MediaStream docs 中的示例。我收到的视频没有Duration元数据。

我将它mediainfo与来自以下示例的 webm 文件进行了比较：

https://file-examples-com.github.io/uploads/2020/03/file_example_WEBM_480_900KB.webm

左边是 MediaRecorder 记录的文件的元数据，右边是示例 webm 文件。

DiffChecker 上的详细比较

https://www.diffchecker.com/87G23lbX

有三个主要区别：

在 MediaRecorder 的文件中：

1. 有缺乏Duration。
2. 有缺乏Bit rate。
3. 有补充IsTruncated: Yes。

实际上，当我将此文件添加到具有控件属性的网站上的视频标签时，只有在文件显示到最后时才能使用控件。

我需要修复它并在此持续时间内保存未截断的文件。前端和后端解决方案都被接受。