브 라 우 저 에서 카메라 장치 목록 을 가 져 오고 장 치 를 선택 하 십시오.

얼마 전에 수 요 를 받 았 는데 새로운 기능 이 추가 되 었 습 니 다. 현재 컴퓨터 에 따라 몇 개의 카 메 라 를 연결 하고 해당 하 는 카메라 목록 을 얻 으 며 카 메 라 를 선택 하여 촬영 합 니 다.
인터넷 의 각종 자 료 를 뒤 져 보 았 지만 방법 을 찾 지 못 했다. 마지막 으로 H5 페이지 가 앞 뒤 카 메 라 를 바 꾸 는 방법 을 참고 하여 다음 과 같이 기록 했다.
 
1. navigator. getUserMedia 를 통 해 로 컬 카 메 라 를 호출 합 니 다.
2. 호출 성공 후 로 컬 컴퓨터 의 모든 카메라 장치 목록 가 져 오기

        navigator.mediaDevices.enumerateDevices()
			.then(function(devices) {
				console.log(devices)
				devices.forEach(function(device) {
					if(device.kind == 'videoinput'){
                        videoArr.push({
                            'label': device.label,
                            'id': device.deviceId
						})
					}
				});
				return videoArr;

			})
			.catch(function(err) {
				layer.msg(err.name + ": " + err.message);
			});
        return videoArr;

 
3. 카메라 수량 판단, 만약  > 1. 카메라 목록 드 롭 다운 상 자 를 만들어 사용자 에 게 선택 합 니 다.

if(videoArr.length > 1){
                                    var html = '      ';
                                    for( var i = 0 ; i ${videoArr[i].label}`
                                    }
                                    videoArr = []
                                    $('#allvideo').html(html)
                                    form.render()
                                    videoIndex =layer.open({
                                        type: 1,
                                        shade: 0.4,
                                        area:['50%'],
                                        title: '     ',
                                        content: $('#videoBox'),
                                    })
                                }else{
                                    openMedia(constraints)
                                }

4. 감청 카메라 의 선택.

//      
                form.on('submit(videoBox)', function(data){
                    var selectValue = data.field.allvideo
                    layer.close(videoIndex);
                    if (typeof currentStream !== 'undefined') {
                        stopMediaTracks(currentStream);
                    }
                    const videoConstraints = {};
                    if (selectValue === '') {
                        videoConstraints.facingMode = 'environment';
                    } else {
                        videoConstraints.deviceId = { exact: selectValue };
                    }
                    var constraints = {
                        video: videoConstraints,
                    };
                    openMedia(constraints)
                    return false; //      。        ，      。
                });

openMedia（）           ，       。

 function openMedia(constraints){
            //        ,      
            getUserMedia(constraints, successMedia, errorMedia);
}

 function getUserMedia(constraints, success, error) {
            if (navigator.mediaDevices.getUserMedia) {
                //     API
                navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);

            } else if (navigator.webkitGetUserMedia) {
                //webkit     
                navigator.webkitGetUserMedia(constraints,success, error)
            } else if (navigator.mozGetUserMedia) {
                //firfox   
                navigator.mozGetUserMedia(constraints, success, error);
            } else if (navigator.getUserMedia) {
                //  API
                navigator.getUserMedia(constraints, success, error);
            }
        }

마지막 성공 은 사람의 얼굴 을 연결 할 때 컴퓨터 에 몇 개의 카메라 장치 가 있 는 지 판단 하고 여러 개가 있 으 면 팝 업 창 은 사용자 에 게 카 메 라 를 선택 하 라 고 알려 주 고 사진 을 찍 는 것 이다.