Created
August 25, 2018 19:26
-
-
Save prof3ssorSt3v3/48621be79794a8a3adeed7971786d4d8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.