javascript - 将 MediaDevices.enumerateDevices() 的值分配给 JavaScript 中的全局变量

Question

我对 JavaScript 的序列有疑问。让我先向您展示我的代码:

这是我的 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>

这是我的 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);

我想将 device.deviceId 的值插入到我在 JavaScript 行的第一行定义的变量 Id 中。它仍然是成功的(它由 alert("ID 1 : "+ Id); 显示)。但是当我尝试将其放入 optional: [{ deviceId: Id }] 时，Id 没有任何值。

而且，当我尝试使用浏览器运行它时，我发现首先显示的是 alert("ID 2 : "+ Id); 而不是 alert("ID 1 : "+ Id);。事实上，我已经把 alert("ID 1 : "+ Id); 放在了前面。我认为这就是变量仍然为空的原因。

我的问题是如何将 device.deviceId 值插入到 optional: [{ deviceId: Id }] ？

Answer 1

navigator.mediaDevices.enumerateDevices 和 DOMContentLoaded 正在比赛，后者获胜，因此您在 Id 设置之前使用它。

要解决这个问题，请使用一个临时的 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 链创建依赖关系，这样 getUserMedia 代码将不会继续，直到两件事都发生。

第二个问题是你混合了新的和outdated Chrome-specific constraints .要么使用 adapter.js直到 Chrome catch ，或者在紧要关头，使用仅限 Chrome 的 sourceId(但这在任何其他浏览器中都不起作用)。