Question

我正在使用此处的代码MediaStreamRecorder来录制视频和单一webm格式的音频。我根据我的用例修改了代码。

我想在这里做的就是用户点击按钮，例如＆＃34; 开始＆＃34;它应该开始录制视频，当他们点击＆＃34; 停止＆＃34;它应该停止。但每当我试图停止视频时（使用mediaRecorder.stop()）它根本不会停止，它会抛出一些错误，如

TypeError: medaiRecorder is undefined

即使在mediaRecorder

上调用Stop（）之后，录制也会继续

PS：我正在使用Rails。同样，使用onclick（）时，相同的代码也能正常工作。

以下是来自控制台的日志：

"start worked "
TypeError: mediaRecorder is undefined
"stop worked"

这是我想要运行的代码：

<div class="container">
<button id="first">Start!!</button>
<button id="second">Stop!!</button>

     </div>   
<script>

  var mediaConstraints = {
  audio: !!navigator.mozGetUserMedia,
  video: true
  };

var mediaRecorder;

function onMediaSuccess(stream) {
    var mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.mimeType = 'video/webm';
    mediaRecorder.ondataavailable = function (blob) {
         // do something with blob
    };
    mediaRecorder.start(3000);
}

function onMediaError(e) {
    console.error('media error', e);
}

document.getElementById('first').addEventListener('click',firstHandler,false);
document.getElementById('second').addEventListener('click',secondHandler,false);

    function firstHandler() 
    {  
        console.log('start worked ');
        navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
    }

    function secondHandler() 
    {  
        console.log('stop worked');
        mediaRecorder.stop();
    }


// below function via: http://goo.gl/B3ae8c
  function bytesToSize(bytes) 
  {
    var k = 1000;
    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    if (bytes === 0) return '0 Bytes';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)),10);
    return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
  }

// below function via: http://goo.gl/6QNDcI
  function getTimeLength(milliseconds) 
  {
    var data = new Date(milliseconds);
    return data.getUTCHours()+" hours, "+data.getUTCMinutes()+" minutes and "+data.getUTCSeconds()+" second(s)";
  }

////////////////////////////////////////////
// Identify Browser with below code
///////////////////////////////////////////

// function GetBrowser()
// {
//     return  navigator ? navigator.userAgent.toLowerCase() : "other";
// }
// console.log(GetBrowser());

</script>

TypeError：调用mediaRecorder.stop（）时未定义mediaRecorder

0 个答案: