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
Post a Comment