是否有可能检查用户是否有摄像头和麦克风，以及是否授予Javascript权限？ [英] Is it possible to check if the user has a camera and microphone and if the permissions have been granted with Javascript?
本文介绍了是否有可能检查用户是否有摄像头和麦克风，以及是否授予Javascript权限？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道用户的设备是否有连接的摄像头和麦克风，如果是，则授予权限以使用Javascript获取音频和视频流。我想至少在Chrome和Firefox上进行此项检查。什么是一致的API呢？
解决方案
现场演示：
如果用户不允许摄像头和/或麦克风，则媒体设备将具有NULL属性的标签/ strong>值。上面的页面将显示以下消息：请调用getUserMedia一次。
PS。您可以在Chrome控制台开发人员工具中键入DetectRTC.MediaDevices。
$ b 注意：它仅适用于Chrome。
更新于2015年12月16日
注意：以下代码段可在Chrome和Firefox中使用。
if（navigator.mediaDevices&& navigator.mediaDevices。 enumerateDevices）{
// Firefox 38+似乎支持enumerateDevicesx
navigator.enumerateDevices = function（callback）{
navigator.mediaDevices.enumerateDevices（）。then（callback）;
};
}
var MediaDevices = [];
var isHTTPs = location.protocol ==='https：';
var canEnumerate = false;
if（MediaFreamTrack中的typeof MediaStreamTrack！=='undefined'&&'getSources'）{
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;
函数checkDeviceSupport（回调函数）{
if（！canEnumerate）{
return; $！
$ b if（！navigator.enumerateDevices& window.MediaStreamTrack& window.MediaStreamTrack.getSources）{
navigator.enumerateDevices = window.MediaStreamTrack.getSources .bind（window.MediaStreamTrack）; $！
$ b if（！navigator.enumerateDevices&& navigator.enumerateDevices）{
navigator.enumerateDevices = navigator.enumerateDevices.bind（navigator）;
}
if（！navigator.enumerateDevices）{
if（callback）{
callback（）;
}
返回;
}
MediaDevices = [];
navigator.enumerateDevices（函数（设备）{
devices.forEach（函数（_device）{
var device = {};
（_device中的var d）{
device [d] = _device [d];
}
if（device.kind ==='audio'）{
device.kind ='audioinput';
}
if（device.kind ==='video'）{
device.kind ='videoinput';
}
$ b $ （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 ='请调用getUserMedia一次。';
if（！isHTTPs）{
device.label ='需要HTTP才能获得此'+ device.kind +'设备的标签。';
}
} 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;
}
//规范中没有'videoouput'。
MediaDevices.push（设备）;
}）;
if（callback）{
callback（）;
}
}）;
}
//检查话筒/相机支持！
checkDeviceSupport（function（）{
document.write（'hasWebCam：'，hasWebcam，'< br>'）;
document.write（'hasMicrophone：'，hasMicrophone'，< ;'b $ b document.write（'isWebcamAlreadyCaptured：'，isWebcamAlreadyCaptured，'< br>'）;
document.write（'isMicrophoneAlreadyCaptured：'，isMicrophoneAlreadyCaptured，'< br>'）; ）;
}）;
I would like to find out if the user's device has an attached camera and microphone, and if so, has permissions been granted to get the audio and video stream using Javascript. I want to make this check to be made across Chrome and Firefox at the very least. What's a consistent API for this?
解决方案
Live Demo:
If user didn't allow webcam and/or microphone, then media-devices will be having "NULL" value for the "label" attribute. Above page will show this message: "Please invoke getUserMedia once."
PS. You can type "DetectRTC.MediaDevices" in the Chrome Console developers tool.
Note: It works only in Chrome. Firefox isn't supporting similar API yet. (Updated: Firefox supports as well)
Updated at Dec 16, 2015
Note: Following code snippet works both in Chrome and 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>');
});
这篇关于是否有可能检查用户是否有摄像头和麦克风，以及是否授予Javascript权限？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
