HTML

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width">
 6   <title>recorded</title>
 7 </head>
 8 <body>
 9 
10     <video id="gum" autoplay muted></video>
11     <video id="recorded" autoplay loop></video>
12 
13     <div>
14       <button id="opencamera">Open camera</button>
15       <button id="record" disabled>Start Recording</button>
16       <button id="play" disabled>Play</button>
17       <button id="download" disabled>Download</button>
18     </div>
19 </body>
20 </html>

 

 

JavaScript

\'use strict\';


var mediaRecorder;
var recordedBlobs;

var gumVideo = document.querySelector(\'video#gum\');
var recordedVideo = document.querySelector(\'video#recorded\');

var recordButton = document.querySelector(\'button#record\');
var playButton = document.querySelector(\'button#play\');
var downloadButton = document.querySelector(\'button#download\');
recordButton.onclick = toggleRecording;
playButton.onclick = play;
downloadButton.onclick = download;

var isSecureOrigin = location.protocol === \'https:\' ||
location.hostname === \'localhost\';
if (!isSecureOrigin) {
  alert(\'getUserMedia() must be run from a secure origin: HTTPS or localhost.\' +
    \'\n\nChanging protocol to HTTPS\');
  location.protocol = \'HTTPS\';
}

var constraints = {
  audio: true,
  video: true
};

function handleSuccess(stream) {
  recordButton.disabled = false;
  console.log(\'getUserMedia() got stream: \', stream);
  window.stream = stream;
  if (window.URL) {
    gumVideo.src = window.URL.createObjectURL(stream);
  } else {
    gumVideo.src = stream;
  }
}

function handleError(error) {
  console.log(\'navigator.getUserMedia error: \', error);
}

document.querySelector(\'#opencamera\').onclick = function(){
  this.disabled = true;
  navigator.mediaDevices.getUserMedia(constraints).
    then(handleSuccess).catch(handleError);
};

recordedVideo.addEventListener(\'error\', function(ev) {
  console.error(\'MediaRecording.recordedMedia.error()\');
  alert(\'Your browser can not play\n\n\' + recordedVideo.src
    + \'\n\n media clip. event: \' + JSON.stringify(ev));
}, true);

function handleDataAvailable(event) {
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}

function handleStop(event) {
  console.log(\'Recorder stopped: \', event);
}

function toggleRecording() {
  if (recordButton.textContent === \'Start Recording\') {
    startRecording();
  } else {
    stopRecording();
    recordButton.textContent = \'Start Recording\';
    playButton.disabled = false;
    downloadButton.disabled = false;
  }
}

function startRecording() {
  recordedBlobs = [];
  var options = {mimeType: \'video/webm;codecs=vp9\'};
  if (!MediaRecorder.isTypeSupported(options.mimeType)) {
    console.log(options.mimeType + \' is not Supported\');
    options = {mimeType: \'video/webm;codecs=vp8\'};
    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
      console.log(options.mimeType + \' is not Supported\');
      options = {mimeType: \'video/webm\'};
      if (!MediaRecorder.isTypeSupported(options.mimeType)) {
        console.log(options.mimeType + \' is not Supported\');
        options = {mimeType: \'\'};
      }
    }
  }
  try {
    mediaRecorder = new MediaRecorder(window.stream, options);
  } catch (e) {
    console.error(\'Exception while creating MediaRecorder: \' + e);
    alert(\'Exception while creating MediaRecorder: \'
      + e + \'. mimeType: \' + options.mimeType);
    return;
  }
  console.log(\'Created MediaRecorder\', mediaRecorder, \'with options\', options);
  recordButton.textContent = \'Stop Recording\';
  playButton.disabled = true;
  downloadButton.disabled = true;
  mediaRecorder.onstop = handleStop;
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start(10); // collect 10ms of data
  console.log(\'MediaRecorder started\', mediaRecorder);
}

function stopRecording() {
  mediaRecorder.stop();
  console.log(\'Recorded Blobs: \', recordedBlobs);
  recordedVideo.controls = true;
}

function play() {
  var superBuffer = new Blob(recordedBlobs, {type: \'video/webm\'});
  recordedVideo.src = window.URL.createObjectURL(superBuffer);
}

function download() {
  var blob = new Blob(recordedBlobs, {type: \'video/webm\'});
  var url = window.URL.createObjectURL(blob);
  var a = document.createElement(\'a\');
  a.style.display = \'none\';
  a.href = url;
  a.download = \'test.webm\';
  document.body.appendChild(a);
  a.click();
  setTimeout(function() {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
}

 

版权声明：本文为cisum原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/cisum/p/8763453.html