Skip to content

Instantly share code, notes, and snippets.

@keepitsimple
Forked from kkm/index.html
Created April 16, 2020 12:58
Show Gist options
  • Save keepitsimple/f536ebced79fbe086b56cd0463c47b63 to your computer and use it in GitHub Desktop.
Save keepitsimple/f536ebced79fbe086b56cd0463c47b63 to your computer and use it in GitHub Desktop.
Chrome MediaRecorder in H264
<!DOCTYPE html>
<head>
<script>
var recordedChunks = [];
var constraints = {
audio: true,
video: true
};
var mediaRecorder = null;
navigator.mediaDevices.getUserMedia(constraints).then(onMediaSuccess, function(errorCallback) {
console.log(errorCallback);
});
function onMediaSuccess(stream) {
try {
window.stream.getVideoTracks()[0].stop();
} catch (err) {}
window.stream = stream;
var gumVideo = document.querySelector('video#local');
gumVideo.src = window.URL.createObjectURL(stream);
}
function start() {
var options = {
mimeType: 'video/webm;codecs=H264'
};
mediaRecorder = new MediaRecorder(window.stream, options);
mediaRecorder.ondataavailable = onDataAvailable;
mediaRecorder.start(1000);
}
function stop() {
mediaRecorder.stop();
}
function onDataAvailable(event) {
if (event.data.size > 0) {  
recordedChunks.push(event.data);  
}
}
function download() { 
var blob = new Blob(recordedChunks, {  
type: 'video/webm' 
}); 
var url = URL.createObjectURL(blob); 
var a = document.createElement('a'); 
document.body.appendChild(a); 
a.style = 'display: none'; 
a.href = url; 
a.download = 'test.webm'; 
a.click(); 
window.URL.revokeObjectURL(url);
}
</script>
</head>
<body>
<button onclick="start()">record</button>
<button onclick="stop()">stop</button>
<button onclick="download()">download</button>
<br>
<video id="local" autoplay/>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment