Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3
Created August 25, 2018 19:26
Show Gist options
  • Save prof3ssorSt3v3/48621be79794a8a3adeed7971786d4d8 to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/48621be79794a8a3adeed7971786d4d8 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MediaCapture and Streams API</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>MediaCapture, MediaRecorder and Streams API</h1>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit molestiae itaque facere totam saepe tempore esse temporibus, quae reprehenderit aliquid iusto ea laborum, iure eligendi odio exercitationem sapiente illum quos.</p>
<p><button id="btnStart">START RECORDING</button><br/>
<button id="btnStop">STOP RECORDING</button></p>
<video controls></video>
<video id="vid2" controls></video>
<!-- could save to canvas and do image manipulation and saving too -->
</main>
<script>
let constraintObj = {
audio: false,
video: {
facingMode: "user",
width: { min: 640, ideal: 1280, max: 1920 },
height: { min: 480, ideal: 720, max: 1080 }
}
};
// width: 1280, height: 720 -- preference only
// facingMode: {exact: "user"}
// facingMode: "environment"
//handle older browsers that might implement getUserMedia in some way
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
navigator.mediaDevices.getUserMedia = function(constraintObj) {
let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraintObj, resolve, reject);
});
}
}else{
navigator.mediaDevices.enumerateDevices()
.then(devices => {
devices.forEach(device=>{
console.log(device.kind.toUpperCase(), device.label);
//, device.deviceId
})
})
.catch(err=>{
console.log(err.name, err.message);
})
}
navigator.mediaDevices.getUserMedia(constraintObj)
.then(function(mediaStreamObj) {
//connect the media stream to the first video element
let video = document.querySelector('video');
if ("srcObject" in video) {
video.srcObject = mediaStreamObj;
} else {
//old version
video.src = window.URL.createObjectURL(mediaStreamObj);
}
video.onloadedmetadata = function(ev) {
//show in the video element what is being captured by the webcam
video.play();
};
//add listeners for saving video/audio
let start = document.getElementById('btnStart');
let stop = document.getElementById('btnStop');
let vidSave = document.getElementById('vid2');
let mediaRecorder = new MediaRecorder(mediaStreamObj);
let chunks = [];
start.addEventListener('click', (ev)=>{
mediaRecorder.start();
console.log(mediaRecorder.state);
})
stop.addEventListener('click', (ev)=>{
mediaRecorder.stop();
console.log(mediaRecorder.state);
});
mediaRecorder.ondataavailable = function(ev) {
chunks.push(ev.data);
}
mediaRecorder.onstop = (ev)=>{
let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
chunks = [];
let videoURL = window.URL.createObjectURL(blob);
vidSave.src = videoURL;
}
})
.catch(function(err) {
console.log(err.name, err.message);
});
/*********************************
getUserMedia returns a Promise
resolve - returns a MediaStream Object
reject returns one of the following errors
AbortError - generic unknown cause
NotAllowedError (SecurityError) - user rejected permissions
NotFoundError - missing media track
NotReadableError - user permissions given but hardware/OS error
OverconstrainedError - constraint video settings preventing
TypeError - audio: false, video: false
*********************************/
</script>
</body>
</html>
@QIEPS
Copy link

QIEPS commented Jul 8, 2020

Hello, can you help me for some reason when I download a video that was recorded when opening it does not display the recorded video just a black screen.Also do not tell me how to save videos to server files

@sathiis
Copy link

sathiis commented Aug 3, 2020

Hello sir,when I download a video, the fast forward and backward option in that video is not working. Can you help me ?

@marianamarini
Copy link

This code is fantastic - thank you, Professor!
Question - when I click on the "download" option, only the sound comes up, not the video. Any idea why?
I tried changing the file type to other ones like .mov, and still only the sound comes up.
Thanks for any info.

@LightingSpider
Copy link

Hello, is there any way to capture and record the whole system audio (not input from microphone).

@prof3ssorSt3v3
Copy link
Author

Not on every browser / OS. Thanks Apple.
Try looking at the HTML5 Screen Capture API - https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API

@dmtomas
Copy link

dmtomas commented Mar 16, 2021

Does someone know how to take the audio part of the saved video? I'm using the mediaStreamObj on tensorflowjs and is translating it as empty.
BTW thanks for the audio and video code I don't know how I would have solve that problem jaja.

@eeshanwaqar
Copy link

Any idea on how can i directly download the video when i press stop recording button?

@prof3ssorSt3v3
Copy link
Author

Downloads MUST be initiated by the user. They have to click the anchor with the express intention of downloading a file. This can't be done before the file is generated.

@Ellecus
Copy link

Ellecus commented Jun 18, 2022

i have a problem that i think it might be with my apache settings but i'm not sure, so i use the code you published without editing and it still didn't work for me i didn't event get the notification to use my camera when i refreshed my http://localhost/

@nikhilreddydev
Copy link

I have received the blob at server side using multer.
But

  • type of file in req.file is converted to text/plain

But how do I save it as a video file there?
@prof3ssorSt3v3 please help me sir.

@amankhale
Copy link

@prof3ssorSt3v3 Hey, I'm not able to seek in the HTML video player of chrome browser. Is there any configurations that I need to perform to achieve seeking in the player?

@techGlen
Copy link

Hi
am struggling to store captured video using webcam( js) into file server

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment