web-dev-qa-db-ja.com

ユーザーがカメラとマイクを持っているかどうか、Javascriptで権限が付与されているかどうかを確認することはできますか？

ユーザーのデバイスにカメラとマイクが接続されているかどうかを確認します。接続されている場合は、JavaScriptを使用してオーディオおよびビデオストリームを取得する権限が付与されています。 Chromeと少なくともFirefoxでこのチェックを行うようにします。このための一貫したAPIとは何ですか？

javascripthtml5html5-videowebrtchtml5-audio
16
Amal Antony

ライブデモ：

ユーザーがウェブカメラやマイクを許可しなかった場合、メディアデバイスの "NULL"値は "label"属性。上記のページには次のメッセージが表示されます： "getUserMediaを1回呼び出してください。"

PS。 Chromeコンソール開発者ツールに "DetectRTC.MediaDevices"と入力できます。

注：Chromeでのみ機能します。 Firefoxは同様のAPIをまだサポートしていません。 （更新：Firefoxもサポート）

2015年12月16日に更新

注：次のコードスニペットは、ChromeとFirefoxの両方で機能します。

if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
    // Firefox 38+ seems having support of enumerateDevicesx
    navigator.enumerateDevices = function(callback) {
        navigator.mediaDevices.enumerateDevices().then(callback);
    };
}

var MediaDevices = [];
var isHTTPs = location.protocol === 'https:';
var canEnumerate = false;

if (typeof MediaStreamTrack !== 'undefined' && 'getSources' in MediaStreamTrack) {
    canEnumerate = true;
} else if (navigator.mediaDevices && !!navigator.mediaDevices.enumerateDevices) {
    canEnumerate = true;
}

var hasMicrophone = false;
var hasSpeakers = false;
var hasWebcam = false;

var isMicrophoneAlreadyCaptured = false;
var isWebcamAlreadyCaptured = false;

function checkDeviceSupport(callback) {
    if (!canEnumerate) {
        return;
    }

    if (!navigator.enumerateDevices && window.MediaStreamTrack && window.MediaStreamTrack.getSources) {
        navigator.enumerateDevices = window.MediaStreamTrack.getSources.bind(window.MediaStreamTrack);
    }

    if (!navigator.enumerateDevices && navigator.enumerateDevices) {
        navigator.enumerateDevices = navigator.enumerateDevices.bind(navigator);
    }

    if (!navigator.enumerateDevices) {
        if (callback) {
            callback();
        }
        return;
    }

    MediaDevices = [];
    navigator.enumerateDevices(function(devices) {
        devices.forEach(function(_device) {
            var device = {};
            for (var d in _device) {
                device[d] = _device[d];
            }

            if (device.kind === 'audio') {
                device.kind = 'audioinput';
            }

            if (device.kind === 'video') {
                device.kind = 'videoinput';
            }

            var skip;
            MediaDevices.forEach(function(d) {
                if (d.id === device.id && d.kind === device.kind) {
                    skip = true;
                }
            });

            if (skip) {
                return;
            }

            if (!device.deviceId) {
                device.deviceId = device.id;
            }

            if (!device.id) {
                device.id = device.deviceId;
            }

            if (!device.label) {
                device.label = 'Please invoke getUserMedia once.';
                if (!isHTTPs) {
                    device.label = 'HTTPs is required to get label of this ' + device.kind + ' device.';
                }
            } else {
                if (device.kind === 'videoinput' && !isWebcamAlreadyCaptured) {
                    isWebcamAlreadyCaptured = true;
                }

                if (device.kind === 'audioinput' && !isMicrophoneAlreadyCaptured) {
                    isMicrophoneAlreadyCaptured = true;
                }
            }

            if (device.kind === 'audioinput') {
                hasMicrophone = true;
            }

            if (device.kind === 'audiooutput') {
                hasSpeakers = true;
            }

            if (device.kind === 'videoinput') {
                hasWebcam = true;
            }

            // there is no 'videoouput' in the spec.

            MediaDevices.Push(device);
        });

        if (callback) {
            callback();
        }
    });
}

// check for microphone/camera support!
checkDeviceSupport(function() {
    document.write('hasWebCam: ', hasWebcam, '<br>');
    document.write('hasMicrophone: ', hasMicrophone, '<br>');
    document.write('isMicrophoneAlreadyCaptured: ', isMicrophoneAlreadyCaptured, '<br>');
    document.write('isWebcamAlreadyCaptured: ', isWebcamAlreadyCaptured, '<br>');
});
38
Muaz Khan

はい、許可を与えた後、マイクとカメラが利用可能かどうかを検出することはかなり可能ですが、

navigator.getUserMedia({ audio: true, video: true},function (stream) {
     if(stream.getVideoTracks().length > 0 && stream.getAudioTracks().length > 0){
         //code for when none of the devices are available                       
     }else{
        // code for when both devices are available
     }
});
5
imal hasaranga perera

メディアストリームを表すMediaStreamTrackを使用し、次に説明するようにgetSourcesメソッドを使用できます。 html5rocks

メディアソースを取得していない場合、クライアントにはWebカメラがありません。 firefoxではサポートされていません。

1
BOUDA wahiba

シンプルなクロスブラウザコードを試してください。

注意!!!私のコードでウェブページを開くにはhttpsプロトコルを使用してください！ デモにアクセスしてください

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>Web camera</h1>
    <video autoplay></video>

    <script>
        function errorMessage(message, e) {
            console.error(message, typeof e == 'undefined' ? '' : e);
            //alert(message);
        }

        if (location.protocol === 'https:') {
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
            if (navigator.getUserMedia) {
                navigator.getUserMedia({ audio: true, video: true }, function (stream) {
                    document.querySelector('video').src = window.URL.createObjectURL(stream);
                    var mediaStreamTrack = stream.getVideoTracks()[0];
                    if (typeof mediaStreamTrack != "undefined") {
                        mediaStreamTrack.onended = function () {//for Chrome.
                            errorMessage('Your webcam is busy!')
                        }
                    } else errorMessage('Permission denied!');
                }, function (e) {
                    var message;
                    switch (e.name) {
                        case 'NotFoundError':
                        case 'DevicesNotFoundError':
                            message = 'Please setup your webcam first.';
                            break;
                        case 'SourceUnavailableError':
                            message = 'Your webcam is busy';
                            break;
                        case 'PermissionDeniedError':
                        case 'SecurityError':
                            message = 'Permission denied!';
                            break;
                        default: errorMessage('Reeeejected!', e);
                            return;
                    }
                    errorMessage(message);
                });
            } else errorMessage('Uncompatible browser!');
        } else errorMessage('Use https protocol for open this page.')
  </script>
</body>
</html>

私はそれを次のブラウザにテストしました：

ウインドウズ10

  • Chrome 52
  • エッジ25
  • Firefox 47
  • IE11互換性のないブラウザー！
  • オペラ39
  • Safari 5互換性のないブラウザー！

Android

  • Chrome 52
  • Firefox 48
  • オペラ37
1
Andrej