更改 mediaStream 的 cam 约束 deviceId

问题描述 投票：0回答：0
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<video autoplay muted id="lh"></video>
<!--RCA type-->
<select id="y"></select>
<select id="rw"></select>

<script>
"use strict";
try {
    navigator.wakeLock.request("screen");
    const y = document.getElementById('y'),
        rw = document.getElementById('rw'),
        p1 = document.getElementById('lh');
    navigator.mediaDevices.enumerateDevices().then(a => {
        a.forEach(b => {
            let c = `<option value="${b.deviceId}">${b.label}</option>`;
            b.kind == 'videoinput' ? y.innerHTML += c : rw.innerHTML += c
        });
        navigator.mediaDevices.getUserMedia({
            audio: 1,
            video: 1
        }).then(e => {
            p1.srcObject = e;
            p1.onloadedmetadata = () => p1.play();
            y.onchange = () => {
                e.getVideoTracks()[0].applyConstraints({
                    video: {
                        deviceId: y.value
                    }
                })
            }
        })
    })
} catch (e) {
    alert(e)
}
</script>
</body>
</html>

现场演示网址

我想让用户更换凸轮。但它并没有改变。我无法追踪确切的问题。 

select
标签的值也被更改为用户成功选择的凸轮的
deviceId
。 
onchange
事件也正在触发。请帮助我。

Present Output

javascript stream camera constraints getusermedia
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.