getusermedia

HTML5 getUserMedia record webcam, both audio and video

MediaStreamRecorder is a WebRTC API for recording getUserMedia() streams( still under implementation) . It allows web apps to create a file from a live audio/video session. <script language=”javascript” type=”text/javascript”> function onVideoFail(e) { console.log(‘webcam fail!’, e); }; function hasGetUserMedia() { // Note: Opera is unprefixed. return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); } if (hasGetUserMedia()) … Read more

How can I capture an image via the user’s webcam using getUserMedia?

You can use this working sample <!DOCTYPE html> <html> <head> </head> <body onload=”init();”> <h1>Take a snapshot of the current video stream</h1> Click on the Start WebCam button. <p> <button onclick=”startWebcam();”>Start WebCam</button> <button onclick=”stopWebcam();”>Stop WebCam</button> <button onclick=”snapshot();”>Take Snapshot</button> </p> <video onclick=”snapshot(this);” width=400 height=400 id=”video” controls autoplay></video> <p> Screenshots : <p> <canvas id=”myCanvas” width=”400″ height=”350″></canvas> </body> <script> … Read more

iOS 11 getUserMedia not working?

Solved it by using the following: $(function () { video = document.getElementById(‘vid’); video.style.width = document.width + ‘px’; video.style.height = document.height + ‘px’; video.setAttribute(‘autoplay’, ”); video.setAttribute(‘muted’, ”); video.setAttribute(‘playsinline’, ”); var constraints = { audio: false, video: { facingMode: ‘user’ } } navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) { video.srcObject = stream; }); });

NotReadableError: Could not start source

Update – 19/11/2020 WKWebView can use getUserMedia in iOS 14.3 beta 1. https://bugs.webkit.org/show_bug.cgi?id=208667 https://bugs.chromium.org/p/chromium/issues/detail?id=752458 Update – 04/06/2020 Another bug ticket has been filed specifically for WKWebView. No support. https://bugs.webkit.org/show_bug.cgi?id=208667 Updates to standalone mode gaining getUserMedia access in iOS 13.4 https://bugs.webkit.org/show_bug.cgi?id=185448#c6 Update – 14/09/2019 There are changes to Safari on iOS 13 & Safari 13: https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes … Read more

GetUserMedia – facingmode

Update: facingMode is now available in Chrome for Android through the adapter.js polyfill! facingMode is not yet implemented in Chrome for Android, but works natively in Firefox for Android. You must use standard constraints however: (use https fiddle for Chrome): var gum = mode => navigator.mediaDevices.getUserMedia({video: {facingMode: {exact: mode}}}) .then(stream => (video.srcObject = stream)) .catch(e … Read more

Accessing Multiple camera javascript getusermedia

You can create two different streams, one for each camera, and show them simultaneously in two <video> tags. The list of available devices is available using navigator.mediaDevices.enumerateDevices(). After filtering the resulting list for only videoinputs, you have access to the deviceIds without needing permission from the user. With getUserMedia you can then request a stream … Read more

Is it possible to control the camera light on a phone via a website?

Here is a little “torch-app” for a website: Edit 1: I also made a jsfiddle //Test browser support const SUPPORTS_MEDIA_DEVICES = ‘mediaDevices’ in navigator; if (SUPPORTS_MEDIA_DEVICES) { //Get the environment camera (usually the second one) navigator.mediaDevices.enumerateDevices().then(devices => { const cameras = devices.filter((device) => device.kind === ‘videoinput’); if (cameras.length === 0) { throw ‘No camera found … Read more