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