Question

好的，我会尽量让我的问题变得清晰，但我很困惑，所以如果我没有收到消息，请告诉我。

我正在尝试使用getUserMedia来使用网络摄像头，然后使用此

http://www.w3.org/TR/mediastream-recording/

录制简短的拍摄视频。问题是，当我尝试定义新的MediaRecorder（流）时，我被告知它是未定义的。我以前没用过这个api，所以我真的不知道自己错过了什么。以下是相关代码：

function onVideoFail(e) {
console.log('webcam fail!', e);
};

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||     navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia ||
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia ||
                        navigator.msGetUserMedia;


    if (navigator.getUserMedia) {
        navigator.getUserMedia({video: true, audio: false}, function(stream){
        var video = document.querySelector('video');
        var recorder = new MediaRecorder(stream); <<<<<< THIS IS MY PROBLEM SPOT
        video.src = window.URL.createObjectURL(stream);
        video.play();

        // webcamstream = stream;
        // streamrecorder = webcamstream.record();
        }, onVideoFail);
    } else {
    alert('failed');
    }
} else {
alert('getUserMedia() is not supported by this browser!!');
}

我一直试图将此作为参考：

HTML5 getUserMedia record webcam, both audio and video

Answer 1

我目前正在使用这个API，我发现它目前只在firex的Nightly版本上实现，它只能录制音频。

Chrome上没有实现（据我所知）。

以下是我如何使用它，如果它可以帮助：

function record(length,stream) {
    var recorder = new window.MediaRecorder(stream);

    recorder.ondataavailable = function(event) {
        if (recorder.state == 'recording') {
            var blob = new window.Blob([event.data], {
                type: 'audio/ogg'
            });

            // use the created blob

            recorder.stop();
        }
    };

    recorder.onstop = function() {
        recorder = null;
    };

    recorder.start(length);
}

Answer 2

MediaStream Recording（或 Media Recorder API 在它定义的CREATE PROCEDURE [dbo].[UpdateTables] @excelTable NVARCHAR(128) , @TableName NVARCHAR(128) AS Declare @channel_Id nvarchar(50) Declare @url varchar(400) BEGIN Select * Into #Temp From QUOTENAME(@excelTable) While EXISTS(SELECT * From #Temp ) Begin Select Top 1 @channel_Id = channel_Id, @url = url From #Temp update QUOTENAME(@TableName) set channelid = @channel_Id where pagefullurl like '%'+ @url + '%' Delete #Temp Where channelid = @channel_Id End END JS对象之后）现已在桌面上的两个主要浏览器中实现：

Firefox 30 音频+视频
Chrome 47, 48仅适用于chrome：// flags中带有实验性Web平台的视频。
Chrome 49音频+视频

<强>集装箱：

两者都记录到.webm容器。

视频编解码器：

记录VP8视频
Chrome 49+可以录制VP9视频
Chrome 52+可以录制H.264视频

音频编解码器：

Firefox记录Vorbis音频@ 44.1 kHz
Chrome 49录制Opus audio @ 48 kHz

演示/ GitLab：

确保在HTTPS或localhost上运行这些演示：

从Chrome 47开始，getUserMedia（）请求仅允许来自安全来源：HTTPS或localhost。

进一步阅读：

MediaRecorder spec
HTML5’s Media Recorder API in Action on Chrome and Firefox
MediaRecorder API
Chrome 47 WebRTC: media recording, secure origins
MediaRecorder API Available in Chrome 49

免责声明：我在Pipe处理视频录制。

Answer 3

我在simpl.info/mediarecorder放了一个MediaStream录制演示。

目前适用于Firefox Nightly，正如@Apzx所说，它只是音频。 Chrome有一个Intent to Implement。

Answer 4

从版本49开始，Chrome现在支持MediaRecorder API。您现在可以录制MediaStream对象。不幸的是，如果您正在构建一个必须为早于Chrome最新版本的浏览器记录MediaStreams的产品（至少在撰写本文时），那么您将需要使用WebRTC媒体服务器/网关。 / p>

基本思想是在服务器上实例化对等连接，并且本地对等方将视频和/或音频流附加到其连接对象以发送到服务器对等方。然后，服务器侦听传入的WebRTC流并将其记录到文件中。您可能想要查看几个媒体服务器：

我个人正在使用Kurento并使用它录制流，并取得了巨大成功。

为了让媒体服务器正常工作，您需要启动自己的应用服务器来处理ICE Candidates的信令和处理。这非常简单，Kurento与Node和Java有一些相当不错的examples。

如果您的目标是普通受众并且正在使用媒体服务器，那么您可能还需要STUN或TURN服务器。这些服务器主要使用网络拓扑来获取媒体服务器的公共IP和客户端的公共IP。请注意，如果任一端（媒体服务器或客户端）位于symmetric NAT后面，则STUN服务器将不够用，您将需要使用TURN服务器（可以找到一个免费服务器here ）。没有太多细节，要记住的一件好事是STUN服务器充当信令网关，其中TURN服务器是中继网关。这意味着媒体流将真正通过TURN服务器，而媒体流将直接从RTC对等连接传递到另一个连接。

希望这很有帮助。如果你真的需要RTC录制功能，那么你将会走很长的路，所以要确保它值得。

Answer 5

另请参阅RecordRTC，其中包含Chrome的解决方法，可以大致模拟MediaStream Recording的功能。 Firefox文档为here

如何使用MediaStream Recording

5 个答案: