blob: 100aa628e6bb01fadc27771f8a3c8c97be29cbad [file] [log] [blame] [edit]
<!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>