webRTC（三）：Webrtc获取视频设备

页面

<html>
	<head>
		<title>WebRtc get audio and video devices</title>
	</head>
	<body>	
			<div>
				<label>audio input device:</label>
				<select id="audioSource"></select>
			</div>
			<div>
				<label>audio output device:</label>
				<select id="audioOutput"></select>
			</div>
			<div>
				<label>video input device:</label>
				<select id="videoSource"></select>
			</div>
			<script src="./js/client.js"></script>
	</body>
</html>

'use strict'

var audioSource =document.querySelector("select#audioSource");
var audioOutput =document.querySelector("select#audioOutput");
var videoSource =document.querySelector("select#videoSource");

if (!navigator.mediaDevices||
		!navigator.mediaDevices.enumerateDevices) {
	console.log('enumerateDevices  is not supported!')
} else {
	navigator.mediaDevices.enumerateDevices()
			 .then(gotDevices)
			 .catch(handleError);
	
}

function gotDevices(deviceInfos){
	
	deviceInfos.forEach(function(deviceInfo){
		var option = document.createElement('option');
		option.text= deviceInfo.label;
		option.value= deviceInfo.deviceId;
		if(	deviceInfo.kind ==='audioinput'){
			audioSource.appendChild(option);
		}else if(	deviceInfo.kind ==='audiooutput'){
			audioOutput.appendChild(option);
		}else if(	deviceInfo.kind ==='videoinput'){
			videoSource.appendChild(option);
		}
		console.log(deviceInfo.kind +", label = " 
						+ deviceInfo.label + ", id ==> "
						+ deviceInfo.deviceId + ", groupId = "
						+ deviceInfo.groupId);
						
	})
}

function handleError(err){
	console.log( err.name + " : " + err.message);
}

结果

R0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5neGlhb2d1bzE=,size_16,color_FFFFFF,t_70)

晓果博客博客专家

发布了316 篇原创文章 · 获赞 660 · 访问量 122万+

他的留言板关注

webRTC（三）：Webrtc获取视频设备

猜你喜欢