JS检查浏览器是否支持摄像头

 方式一、

<script>
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>');
});

</script>

方式二、

let videoNum = 0,
microphoneNum = 0,
deviceList = [];
navigator.mediaDevices.enumerateDevices().then(devices = >{
	devices.forEach(device = >{
		//console.log(device);
		deviceList.push(device.kind);
		if (device.kind === "videoinput") videoNum++;
		if (device.kind === "audioinput") microphoneNum++;
	});
	console.log("设备列表:", deviceList);
	document.querySelector('#videoNum').value = "摄像头[" + videoNum + "]个";
	document.querySelector('#microphoneNum').value = "麦克风[" + microphoneNum + "]个";
}).
catch(function(err) {
	document.querySelector('#videoNum').value = "摄像头[" + videoNum + "]个";
	document.querySelector('#microphoneNum').value = "麦克风[" + microphoneNum + "]个";
	alert(err.name + ": " + err.message);
});

参照:https://cloud.tencent.com/developer/ask/145992

WEBRTC官方提供的检测方法:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/enumerateDevices

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值