准备环境:
此功能要基于http服务器,将下面的代码放到任意的web服务器下运行即可
<html>
<head>
<title>2video</title>
<script>
function gotDevices(deviceInfos) {
let i = 0;
deviceInfos.map(function(deviceInfo){
if (deviceInfo.kind === 'audioinput') {
// option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`;
} else if (deviceInfo.kind === 'audiooutput') {
// option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
} else if (deviceInfo.kind === 'videoinput') {
console.log(deviceInfo.deviceId);
constraints = {
video: {deviceId: {exact: deviceInfo.deviceId}}
};
navigator.mediaDevices.getUserMedia(constraints).then((function(i){
return (stream)=>{
document.getElementById('view' + i).srcObject = stream;
}
})(i));
i++;
} else {
console.log('Some other kind of source/device: ', deviceInfos);
}
});
}
init = () => {
let constraints = {
video: {deviceId: undefined}
};
navigator.mediaDevices.getUserMedia(constraints).then(()=>{
navigator.mediaDevices.enumerateDevices().then(gotDevices);
});
}
window.onload = function(){
init();
}
</script>
</head>
<body>
<video width="320" height="240" id="view0" playsinline autoplay></video>
<video width="320" height="240" id="view1" playsinline autoplay></video>
</body>
</html>