0

ブラウザでビデオを録画し、ユーザーのために再生したいと思います。私は現在、これを行うために MediaRecorder API (現時点では Firefox でのみ利用可能) を使用しています。数秒未満のビデオでは問題なく動作しますが、それ以外の場合、ビデオはまったく表示されません。

コンソールなどにエラーはありません。また、ドキュメントにファイル サイズの制限について何も見つかりませんでした。

私が使用しているコードは次のとおりです（Firefoxのみ）：

index.html:

<!DOCTYPE html>
<html>
<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <video id="player" src="" width="300" height="300" autoplay></video>

  <script src="script.js"></script>
</body>
</html>

script.js:

var record = document.getElementById('start');
var stop = document.getElementById('stop');
var video = document.getElementById('player');

var constraints = {video: true};

var onSuccess = function(stream) {
  var mediaRecorder = new MediaRecorder(stream);

  record.onclick = function() {
    mediaRecorder.start();
  }

  stop.onclick = function() {
    mediaRecorder.stop();
  }

  mediaRecorder.ondataavailable = function(e) {    
    video.src = window.URL.createObjectURL(e.data);
  }
};

var onError = function(err) {
  console.log('The following error occured: ' + err);
}

navigator.mozGetUserMedia(constraints, onSuccess, onError);

Codepen について: http://codepen.io/anon/pen/xGqKgE

これはバグ/ブラウザの問題ですか? 私が認識していないこの API の制限はありますか?

4

0 に答える 0