-
-
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> |
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.
Hello, is there any way to capture and record the whole system audio (not input from microphone).
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
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.
Any idea on how can i directly download the video when i press stop recording button?
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.
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/
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.
@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?
Hi
am struggling to store captured video using webcam( js) into file server
Hello sir,when I download a video, the fast forward and backward option in that video is not working. Can you help me ?