html5 - Assign the value of MediaDevices.enumerateDevices() into global variable in JavaScript -


i have question sequence of javascript. let me show code first:

here html:

<video id="video" width="320" height="320" autoplay></video><br> <button id="snap">snap photo</button><br> <canvas id="canvas" width="320" height="320"></canvas> <p id="pngholder"></p> 

and here javascript:

<script> var id; //list cameras , microphones. if (!navigator.mediadevices || !navigator.mediadevices.enumeratedevices) {     console.log("enumeratedevices() not supported."); } navigator.mediadevices.enumeratedevices() .then(function (devices) {     devices.foreach(function (device) {         if (device.kind == "videoinput" && device.label.indexof('back') >= 0) {             id = device.deviceid;             alert("id 1 : " + id);         }     }); }) .catch(function (err) {     console.log(err.name + ": " + err.message); });  // put event listeners place window.addeventlistener("domcontentloaded", function () {     // grab elements, create settings, etc.     alert("id 2 : "+ id);     var canvas = document.getelementbyid("canvas"),         videoobj = {             video: {                 optional: [{ deviceid: id }]             }         },         context = canvas.getcontext("2d"),         video = document.getelementbyid("video"),         errback = function (error) {             console.log("video capture error: ", error.code);         };      // trigger photo take     document.getelementbyid("snap").addeventlistener("click", function () {         context.drawimage(video, 0, 0, 640, 480);         // image         var image = convertcanvastoimage(canvas);         // actions         document.getelementbyid("pngholder").appendchild(image);         // converts canvas image         function convertcanvastoimage(canvas) {             var image = new image();             image.src = canvas.todataurl("image/png");             return image;         }     });      //alert("id 2 : " + id);     // put video listeners place     if (navigator.getusermedia) { // standard         navigator.getusermedia(videoobj, function (stream) {             video.src = stream;             video.play();         }, errback);     } else if (navigator.webkitgetusermedia) { // webkit-prefixed         navigator.webkitgetusermedia(videoobj, function (stream) {             video.src = window.webkiturl.createobjecturl(stream);             video.play();         }, errback);     } else if (navigator.mozgetusermedia) { // firefox-prefixed         navigator.mozgetusermedia(videoobj, function (stream) {             video.src = window.url.createobjecturl(stream);             video.play();         }, errback);     } }, false); 

want insert value of device.deviceid variable id define on first of javascript row. still success (it shown alert("id 1 : " + id);). when try put optional: [{ deviceid: id }], id doesn't have value.

and also, when try run browser, have found alert("id 2 : " + id); shown first instead of alert("id 1 : " + id);. in fact, have put alert("id 1 : " + id); first. think that's why variable still empty.

my question how can insert device.deviceid value optional: [{ deviceid: id }] ?

navigator.mediadevices.enumeratedevices , domcontentloaded racing, , latter winning, you're using id before it's set.

to solve use temporary haveid promise:

var haveid = navigator.mediadevices.enumeratedevices()   .then(devices => devices.find(d => d.kind == "videoinput" &&                                 d.label.indexof("back") >= 0));  // put event listeners place window.addeventlistener("domcontentloaded", function () {   haveid.then(id => {     // grab elements, create settings, etc.     alert("id 2 : "+ id);     var canvas = document.getelementbyid("canvas"),     videoobj = { video: { deviceid: id } }, // <-- adapter.js constraints 

promise-chains create dependencies, , way getusermedia code wont proceed until both things have happened.

the second problem you're mixing new , outdated chrome-specific constraints. either use adapter.js until chrome catches up, or in pinch, use chrome-only sourceid (but wont work in other browser).


Comments