Javascript 如何使用MediaStream录制

好的，我会尽量把我的问题弄清楚，但是我很困惑，所以如果我没有理解清楚，请告诉我

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

录制简短的捕获视频。问题是，当我试图定义新的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!!');
}

函数onVideoFail（e）{
console.log（'webcam fail！'，e）；
};
函数hasGetUserMedia（）{
return！！（navigator.getUserMedia | | | navigator.webkitGetUserMedia | | | navigator.mozGetUserMedia | | navigator.msGetUserMedia）；
}
如果（hasGetUserMedia（））{
window.URL=window.URL | | window.webkitURL；
navigator.getUserMedia=navigator.getUserMedia||
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||
navigator.msGetUserMedia；
if（navigator.getUserMedia）{
getUserMedia（{video:true，audio:false}，函数（流）{
var video=document.querySelector（'video'）；
var recorder=new media recorder（stream）；我目前正在使用这个API，我发现我们的API目前只在firefox的夜间版本上实现，并且它只能录制音频

据我所知，它没有在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);
}

我放了一个MediaStream录音演示

目前，Firefox每晚都可以使用此功能，正如@Apzx所说，它只提供音频。Chrome有一个新的功能。
另请参阅，它为Chrome提供了一些变通方法，可以大致模拟MediaStream录制功能。Firefox文档是MediaStream录制（或者在它定义的
Media Recorder
JS对象之后，Media Recorder API）现在已经在桌面上的两个主要浏览器中实现：


Firefox 30音频+视频
仅适用于在中使用实验Web平台的视频chrome://flags. 
音频+视频

容器：


两个记录到.webm容器

视频编解码器：


两者都录制VP8视频
Chrome 49+可以录制VP9视频
Chrome 52+可以录制H.264视频

音频编解码器：


Firefox在44.1 kHz时录制Vorbis音频
Chrome 49在48 kHz时录制Opus音频

演示/GitLab：





确保在HTTPS或本地主机上运行以下演示：

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

进一步阅读：


关于w3c
在addpipe.com上
在mozilla.org上
在developers.google.com上
在developers.google.com上

免责声明：我在处理视频录制的Pipe工作。
从49版开始，Chrome现在支持。您现在可以录制MediaStream对象。不幸的是，如果您正在构建的产品必须为比Chrome最新版本更旧的浏览器录制MediaStreams（至少在撰写本文时），则需要使用WebRTC媒体服务器/网关

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





我个人正在使用Kurento并用它记录流，非常成功

为了让媒体服务器正常工作，您需要启动自己的应用程序服务器来处理信令和数据处理。这非常简单，Kurento在Node和Java方面有一些非常好的功能

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

希望这是有帮助的。如果您真的需要RTC录制功能，那么您将要走很长的路，因此请确保它是值得的。
浏览器控制台中有错误吗？库未加载或其他什么？仅此：未捕获引用错误：没有定义MediaRecorder，因为MediaRecorder是最近添加的，如果您正在使用ng chrome检查是否已启用chrome://flags 等等。跨浏览器音频流录制实现：1）或2）/RecordRTC也支持它：有人知道是否有办法通过RTPeerConnections获取媒体流的字节吗？我需要一种不用MediaStreamRecorder模拟记录器获取字节的方法（视频帧的画布元素）。这会导致非常差的视频质量。您知道是否有办法通过RTPeerConnections获取MediaStream的字节？我需要一种方法，在没有MediaStreamRecorder的模拟记录器（视频帧的画布元素）的情况下获取字节。这会导致视频质量非常差。不确定这是否有帮助，但MediaRecorder现在已在Chrome中实现，您可以通过对等连接访问远程音频和视频。（不记得版本-您可能需要启用“实验平台”功能标志的Canary。）查看。是的，看到了