Skip to content

Instantly share code, notes, and snippets.

@giuliohome

giuliohome/my_video_capture.html

Created March 14, 2023 16:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save giuliohome/540361cee7b1140aa8ea4945c36c2429 to your computer and use it in GitHub Desktop.
Save giuliohome/540361cee7b1140aa8ea4945c36c2429 to your computer and use it in GitHub Desktop.
Download ZIP
video capture, html5
Raw
my_video_capture.html
<!DOCTYPE html>
<html>
<body>
<h1>Recording Video from the User</h1>
<p>Acquire access to the camera</p>
<video id="player" controls></video>
<a id="download">Download</a>
<button id="stop">Stop</button>
<script>
var player = document.getElementById('player');
let shouldStop = false;
let stopped = false;
const downloadLink = document.getElementById('download');
const stopButton = document.getElementById('stop');
stopButton.addEventListener('click', function() {
shouldStop = true;
mediaRecorder.stop();
})
var handleSuccess = function (stream) {
player.srcObject = stream;
const options = {mimeType: 'video/webm'};
const recordedChunks = [];
window.mediaRecorder = new MediaRecorder(stream, options);
window.mediaRecorder.ondataavailable = e => {
if (e.data.size > 0) {
recordedChunks.push(e.data);
}
if(shouldStop === true && stopped === false) {
stopped = true;
}
};
window.mediaRecorder.onstop = e => {
downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
downloadLink.download = 'myvideo.webm';
};
player.play();
mediaRecorder.start();
}
navigator.mediaDevices
.getUserMedia({audio: true, video: true})
.then(handleSuccess);
</script>
<p>save data to a blob</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment