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> |
@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
I have received the blob at server side using multer.
But
But how do I save it as a video file there?
@prof3ssorSt3v3 please help me sir.