标签: mediarecorder-api

-----更新已添加到以下-----

我有MediaRecorder API的问题(https://www.w3.org/TR/mediastream-recording/#mediarecorder-api).

我正在使用它来记录网页上的语音(在这种情况下使用Chrome)并将其保存为块.我需要能够在录制时播放它,所以保留这些块是很重要的.

这是记录数据的代码:

navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(function(stream) { recorder = new MediaRecorder(stream, { mimeType: 'audio/webm; codecs="opus"' }) recorder.ondataavailable = function(e) { // Read blob from `e.data`, decode64 and send to sever; } recorder.start(1000) })

问题是我连接所有部分时得到的WebM文件已损坏(很少)!我可以将它作为WebM播放,但是当我尝试将它(ffmpeg)转换为其他内容时,它会给我一个时间偏移的文件.

例如.我正在尝试将具有持续时间的文件转换00:36:27.78为wav,但是我得到一个持续时间00:36:26.04为1.74s 的文件.

在文件的开头 - 音频是相同的,但在大约10分钟后,WebM文件播放的延迟很小.

经过一些研究,我发现它也无法正常使用浏览器的MediaSource API,我用它来播放这些块.我尝试了两种方式来玩这些块:

在我将所有部件合并为一个blob的情况下 - 它工作正常.如果我通过sourceBuffer对象添加它们,它有一些空白(我可以通过检查buffered属性看到它们).697.196 - 697.528(~330ms)996.198 - 996.754(~550ms)1597.16 - 1597.531(~370ms)1896.893 - 1897.183(~290ms)

这些差距总共是1.55秒,它们恰好位于wav和webm文件之间的异步开始的地方.遗憾的是,无法共享可重现的文件,因为它是客户的私人数据,而我无法在不同媒体上重现此类问题.

造成这种问题的原因是什么？

-----更新-----我能够在https://jsfiddle.net/96uj34nf/4/上重现这个问题

要查看问题,请单击"打印缓冲区"按钮,它将显示时间范围.你可以看到有两个差距:0 - 136.349,141.388 - 195.439,197.57 - 198.589

1. 136.349 - 141.388 …

当我使用 Media Recorder API 录制视频并使用 VLC 下载并打开它时，视频的长度未知。

此外，在 Chrome 移动版 (52.0.2743.98) 上，如果我在视频标签中阅读它，则不会显示长度，currentTime 将始终为 0，并且 ontimeupdate 只会在视频结束时启动。

在 Chrome 桌面 (52.0.2743.116) 上，长度不显示，但 ontimeupdate 和 currentTime 似乎工作正常。

我已经从开发人员 google demo录制并下载了视频。该视频是 webm，因为它似乎是chrome 支持的唯一类型

任何的想法 ？

来自 ffpmeg 的元数据：

libavutil 54. 31.100 / 54. 31.100 libavcodec 56. 60.100 / 56. 60.100 libavformat 56. 40.101 / 56. 40.101 libavdevice 56. 4.100 / 56. 4.100 libavfilter 5. 40.101 / 5. 40.101 libswscale 3. 1.101 / 3. 1.101 libswresample 1. 2.101 / 1. …

我正在构建一个小的Angular2应用程序,我正在尝试使用MediaRecorder对象(https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder),如下所示:

var mediaRecorder = new MediaRecorder(stream);

但是,TypeScript告诉我它找不到名称'MediaRecorder'.我猜这是我的TypeScript配置,我直接从QuickStart指南(https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html)中提取.配置如下所示:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "compileOnSave": true
}

我已经看到网络上的各种配置,包括"target:es6"或"lib:es6"以及其他模块"commonjs",但我是新手,所以我不确定发生了什么.当我尝试更新这些值时,我会收到更多错误.

有谁知道我怎么能让这个工作？

Media Recorder非常适合我，可以与 Mozilla 上记录的其余 Web Audio API 一起完成相当复杂的过程。然而。除非我能让它以波形格式一致地录制音频，否则它对我来说毫无用处。我曾尝试在许多浏览器上设置 MimeType，但在 Mozilla 不知情的情况下，这些浏览器似乎已被弃用，任何设置 mimeType 的尝试（即使使用此处文档中的示例）也无法在任何代码中工作。

如果有人有任何方法可以使用前端处理（不使用服务器中介）将此文件保存为波形，我将非常感激听到它。

可能值得注意的是，只要文件编码是 wav，ogg 格式以前就对我有效。这个带有源代码的示例直到几天前才在我的浏览器（Brave/Chrome）上运行，之后它开始保存为 webm 格式。

另外，值得注意的是，只要我能够在录制后使用 WebAudioAPI 获取通道数据进行处理，我就不会在这个项目中使用 MediaRecorder API。

我正在尝试实时向其他客户端播放网络摄像头的视频,但是当观众开始在中间观看时我遇到了一些问题.

为此,我使用getUserMedia(及其所有兄弟姐妹)获取网络摄像头的流.

然后,在按钮单击时,我开始记录流并将每个段/块/任何你调用它发送到广播公司的websocket的后端:

var mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start(1000);
mediaRecorder.ondataavailable = function (event) {
    uploadVideoSegment(event); //wrap with a blob and call socket.send(...)
}

在服务器端(Web API,使用Microsoft.Web.WebSockets),我得到了完美的byte [].

然后我将byte []发送到当前连接到Broadcaster的Viewers,使用FileReader在socket的onmessage事件上读取它,并将Uint8Array附加到MediaSource的sourceBuffer,这是HTML5视频元素的src.

当观众从头开始获取byte []时,具体地说,前面的126个字节以EBMLHeader(0x1A45DFA3)开头并以Cluster的开头(0x1F43B675)结束,然后是整个媒体 - 它正好被播放.

当新的查看器加入中间并获取第二个块以及之后时,会出现此问题.

我一直在努力研究并用某种方式让手有点脏.我知道标题是必不可少的(http://www.slideshare.net/mganeko/media-recorder-and-webm),关于关键帧和所有这些东西有一些东西,但我很快就感到困惑.

到目前为止,我尝试在c#中编写自己的简单webm解析器(来自github中的node.js项目的引用 - https://github.com/mganeko/wmls).因此,我从第一个块中分割出标头,缓存它并尝试稍后将其与每个块一起发送.当然它没有用.

我认为可能是MediaRecorder在中间分裂集群,因为ondataavailable事件被触发(这是因为我注意到第二个块的开始并不是从Cluster的头开始).

在这一点上,我不知道如何使用解析器使其工作.

然后我读到了使用ffmpeg来转换webm流,每个帧也是一个关键帧 - 编码FFMPEG到MPEG-DASH - 或带有Keyframe Clusters的WebM - 用于MediaSource API(在Chris Nolet的回答中).

我尝试使用FFMpegConverter(用于.Net):

var conv = new FFMpegConverter();
var outputStream = new MemoryStream();

var liveMedia = conv.ConvertLiveMedia("webm", outputStream, "webm", new ConvertSettings { VideoCodec = "vp8", CustomOutputArgs = "-g 1" …

我在decodeAudioData使用Web Audio APIChrome浏览器播放方法时遇到问题(在Firefox中运行正常) -

我正在从服务器发送媒体记录器记录的音频缓冲区.

服务器端

wss = new WebSocketServer({server: server}, function () {});

wss.on('connection', function connection(ws) {

   ws.binaryType = "arraybuffer";

   ws.on('message', function incoming(message) {
     if ((typeof message) == 'string') {
        console.log("string message: ", message);
     } else {
        console.log("not string: ", message);
        ws.send(message);
     }
   });
});  

客户端

window.AudioContext = window.AudioContext||window.webkitAudioContext;
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

var context = new AudioContext();
var mediaRecorder;
var chunks = [];
var startTime = 0;

ws = …

我正在尝试使用 mediaRecorder API 录制媒体。这是我的代码（只是相关部分）。我希望在 saveChunks 中获得控制台日志，但似乎从未触发 ondataavailable 事件。我能够在视频元素中看到视频。

     recordedChunks = [];

     navigator.mediaDevices.getUserMedia({video:true, audio:true})
      .then(function(stream) {
          myVideoMedia = document.getElementById("vid1");
          myVideoMedia.srcObject = stream;
          myVideoMedia.onloadedmetadata = function(e) {
             myVideoMedia.play();
             mediaRecorder = new MediaRecorder(stream);
             mediaRecorder.ondataavailable = saveChunks;
             mediaRecorder.start();
             console.log(mediaRecorder);
        };
     })

     function saveChunks(event) {
       console.log("Data recorded...");
       //...
       };
     }

mediaRecorder.state 的控制台日志是“正在录制” 我确实尝试通过将 1000 的时间片传递给 start() 并且它现在正在工作！如果没有传递时间片，则该函数在最后被调用一次。

我正在尝试使用 MediaRecorder API 构建屏幕录制。

作为暗示性媒体记录方法

var chunks = [];
var recorder = new MediaRecorder(stream);

recorder.streams = [stream];

recorder.ondataavailable = function(e) {
    chunks.push(e.data);
};

recorder.onstop = function(){
      var blob = new Blob(chunks, {type: "video/webm"});
      chunks = [];

      var mimeType = 'video/webm';
      var fileExtension = 'webm';

      var file = new File([blob ? blob : ''], getFileName(fileExtension), {
          type: mimeType
      });
};

使用这种方法录制工作正常，但录制的视频搜索不起作用。

我在网上搜索了一些关于这个问题的信息，我发现视频标题不包含持续时间。

在file控制台上打印对象时，它包含以下属性，

lastModified : 1527592713006
lastModifiedDate : Tue May 29 2018 16:48:33 GMT+0530 (India Standard Time) 
name : …

我是反应新手，我正在尝试开发一个具有视频录制功能的网络应用程序。这是我的代码： App.js：

import ScreenRecording from './Recorder'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <ScreenRecording />
      </header>
    </div>
  );
}

export default App;

记录器.js：

import './Recorder.css'
import React from 'react';
import ReactDom from 'react-dom';
import axios from "axios";

const ScreenRecording = () => {
  
  var strName = null;
  var strEmail = null;
  const video = document.getElementById('video');

  async function captureMediaDevices(mediaConstraints = {
      video: {
        width: 1280,
        height: 720
      },
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        sampleRate: 44100
      }
    }) { …

如何指定与MediaRecorder API一起使用的编解码器？我看到的唯一选择是mimeType,这还不够.填写mimeType选项中的编解码器似乎不起作用.

var mediaRecorder = new MediaRecorder(
    outputMediaStream
  ),
  {
    mimeType: 'video/webm; codecs="opus,vp8"'
  }
);

这导致带有Vorbis和VP8的WebM流:

FFMPEG STDERR: Input #0, matroska,webm, from 'pipe:':
  Metadata:
    encoder         : QTmuxingAppLibWebM-0.0.1
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Video: vp8, yuv420p, 640x360, SAR 1:1 DAR 16:9, 30 fps, 30 tbr, 1k tbn, 1k tbc (default)
    Stream #0:1(eng): Audio: vorbis, 44100 Hz, stereo, fltp (default)

如果我制作的MediaStream只有一个音轨(没有视频),那么MediaRecorder会在一个Ogg容器中输出Opus音频:

FFMPEG STDERR: Input #0, ogg, from 'pipe:':
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream …