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); }