admin管理员组文章数量:1320625
I have a question about the sequence of JavaScript. Let me show you my code first:
Here is my 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 is my JavaScript:
<script>
var Id;
//List cameras and 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 into 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);
// Get the image
var image = convertCanvasToImage(canvas);
// Actions
document.getElementById("pngHolder").appendChild(image);
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
});
//alert("ID 2 : " + Id);
// Put video listeners into 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);
I want to insert the value of device.deviceId
into variable Id
that I define on the first of my JavaScript row. It is still a success (it is shown by the alert("ID 1 : " + Id);
). But when I try to put it into optional: [{ deviceId: Id }]
, the Id
doesn't have any value.
And also, when I try to run it with browser, I have found that the alert("ID 2 : " + Id);
is shown first instead of alert("ID 1 : " + Id);
. In fact, I have already put the alert("ID 1 : " + Id);
first. I think that's why the variable is still empty.
My question is how can I insert the device.deviceId
value to optional: [{ deviceId: Id }]
?
I have a question about the sequence of JavaScript. Let me show you my code first:
Here is my 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 is my JavaScript:
<script>
var Id;
//List cameras and 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 into 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);
// Get the image
var image = convertCanvasToImage(canvas);
// Actions
document.getElementById("pngHolder").appendChild(image);
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
});
//alert("ID 2 : " + Id);
// Put video listeners into 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);
I want to insert the value of device.deviceId
into variable Id
that I define on the first of my JavaScript row. It is still a success (it is shown by the alert("ID 1 : " + Id);
). But when I try to put it into optional: [{ deviceId: Id }]
, the Id
doesn't have any value.
And also, when I try to run it with browser, I have found that the alert("ID 2 : " + Id);
is shown first instead of alert("ID 1 : " + Id);
. In fact, I have already put the alert("ID 1 : " + Id);
first. I think that's why the variable is still empty.
My question is how can I insert the device.deviceId
value to optional: [{ deviceId: Id }]
?
2 Answers
Reset to default 5navigator.mediaDevices.enumerateDevices
and DOMContentLoaded
are racing, and the latter is winning, so you're using Id
before it's set.
To solve this use a temporary haveId
promise:
var haveId = navigator.mediaDevices.enumerateDevices()
.then(devices => devices.find(d => d.kind == "videoinput" &&
d.label.indexOf("back") >= 0));
// Put event listeners into 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, and this way the getUserMedia
code wont proceed until both things have happened.
The second problem is you're mixing new and outdated Chrome-specific constraints. Either use adapter.js until Chrome catches up, or in a pinch, use the Chrome-only sourceId
(but that wont work in any other browser).
navigator.mediaDevices.enumerateDevices() is asynchronous. It returns a promise (think callback, but fancier).
You should trigger your call to getUserMedia from there or wait for both DOMContentLoaded and enumerateDevices and then execute getUserMedia.
版权声明:本文标题:html - Assign the value of MediaDevices.enumerateDevices() into global variable in JavaScript - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742073299a2419258.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论