| <!DOCTYPE html> |
| <html> |
| <head><title>MediaRecorder Test</title></head> |
| <body> |
| <video id="video" autoplay muted></video> |
| <script> |
| |
| let pageLoaded = false; |
| let mediaRecorder = null; |
| const recordedChunks = []; |
| let startTime = 0; |
| let elapsedTime = 0; |
| |
| const userMediaConstraints = {audio: true, video: {width: 1280, height: 720}}; |
| |
| // Starts recording with specified video codec and waits for the first |
| // recorded blob in ondataavailable, after recording for |recordDurationMs| |
| // milliseconds. |
| async function startRecordingForResult(codec, recordDurationMs) { |
| const stream = await navigator.mediaDevices.getUserMedia(userMediaConstraints); |
| |
| document.getElementById('video').srcObject = stream; |
| const mimeType = 'video/webm; codecs=' + codec; |
| const recorder = new MediaRecorder(stream, {mimeType}); |
| |
| return await new Promise((resolve, reject) => { |
| recorder.ondataavailable = (event) => { |
| if (event.data.size > 0) { |
| resolve(); |
| } |
| }; |
| recorder.onerror = (event) => { |
| reject(new Error('MediaRecorder error ' + event.error)); |
| }; |
| recorder.start(recordDurationMs); |
| }); |
| } |
| |
| // Starts recording with the specified video codec. |
| // Recording result will not be available until calling stopRecording(). |
| async function startRecording(codec) { |
| const stream = await navigator.mediaDevices.getUserMedia(userMediaConstraints); |
| |
| document.getElementById('video').srcObject = stream; |
| const mimeType = 'video/webm; codecs=' + codec; |
| mediaRecorder = new MediaRecorder(stream, {mimeType}); |
| mediaRecorder.ondataavailable = (event) => { |
| if (event.data.size > 0) { |
| recordedChunks.push(event.data); |
| } |
| }; |
| |
| return await new Promise((resolve, reject) => { |
| mediaRecorder.onstart = (event) => { |
| startTime = new Date().getTime(); |
| resolve(); |
| }; |
| mediaRecorder.onerror = (event) => { |
| reject(new Error('MediaRecorder error ' + event.error)); |
| }; |
| mediaRecorder.start(); |
| }); |
| } |
| |
| // Stops recording and returning a promise with recorded video content in |
| // base64 format. elapsedTime is also updated. |
| function stopRecording() { |
| return new Promise((resolve, reject) => { |
| mediaRecorder.onstop = (event) => { |
| const endTime = new Date().getTime(); |
| const recordedBlob = new Blob(recordedChunks, {type: 'video/webm'}); |
| const reader = new FileReader(); |
| reader.addEventListener("loadend", function() { |
| // reader.result contains the contents of blob as a typed array. |
| let videoBuffer = reader.result; |
| videoBuffer = videoBuffer.substr(videoBuffer.indexOf(',') + 1); |
| elapsedTime = endTime - startTime; |
| resolve(videoBuffer); |
| }); |
| reader.readAsDataURL(recordedBlob); |
| }; |
| mediaRecorder.stop(); |
| }); |
| } |
| |
| window.onload = () => { |
| pageLoaded = true; |
| }; |
| |
| </script> |
| </body> |
| </html> |