navigator.mediaDevices.getUserMedia 权限被拒绝

Question

I am trying to navigator.mediaDevices.getUserMedia to select a camera from a dropdown and use it, here is my code that gets my devices:

var video = document.getElementById('video');

    navigator.mediaDevices.enumerateDevices().then(function (devices) {
        for (var i = 0; i < devices.length; i++) {
            var device = devices[i];
            if (device.kind === 'videoinput') {
                var option = document.createElement('option');
                option.value = device.deviceId;
                option.text = device.label || 'camera ' + (i + 1);
                document.querySelector('select#videoSource').appendChild(option);
            }
        };
    });

and here is my on change code to use the camera:

$("#videoSource").on("change", function () {

        var x = $(this).value;
        var constraints = { deviceId: { exact: x } };

        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

            navigator.mediaDevices.getUserMedia({ video: constraints }).then(function (stream) {
                video.srcObject = stream;
                video.play();
            });

        }

    });

When I goto select an option to use a camera I get this error:

Uncaught (in promise) DOMException: Permission denied

What am I doing wrong?

Answer 1

I have test your code in Stackblitz and it works for me!

JQuery Camera

For triggering the change event in the select, I have added an extra option for selection.

Maybe your problem is that you have denied the permissions.