如何在没有任何错误的情况下更新 navigator.devicemedia 上的数据

Question

我是 JS 的新手，我正在创建一个音乐放大器。你看到的图像是我正在创建的一个小sn-p。

我的 HTML

 <label for = "noisesup">Noise Suppression</label>   
 <input type = "checkbox" id = "noisesup"class = "checker">  

我的 CSS

.checker{
    width: 80px;
    height: 30px;
    -webkit-appearance: none;
    background: rgb(141, 103, 54);
    border-radius: 3px;
    border: 0.7px solid rgb(177, 124, 51);
    box-shadow: 0 0 10px;
    transition: .4s;
    
}

.checker::before{
    content: '';
    position: absolute;
    border-radius: 3px;
    background: rgb(101, 70, 43);
    outline: 1px solid rgb(71, 50, 23);
    height: 29px;
    width:40px;
    box-shadow: 0 0 10;
    transition: .4s;
    
    
}

.checker:checked:before{
    transition: .4s;
    transform: translateX(40px);
    
}

我的 JS

const canvas = document.getElementById("canvas");
const gaincont = document.getElementById("gain");
const echocan = document.getElementById("echo");
const noisesup = document.getElementById("noisesup");
const latency = document.getElementById("latency");

const width = canvas.width;
const height = canvas.height;

const context = new AudioContext();

function eventlistners() {

    noisesup.addEventListener("change", n=>{

        const value = n.target.value
        navigator.mediaDevices.getUserMedia({
            audio:{
                noiseSuppression: value
            }
        })
    })
}


function getmusic() {
    return navigator.mediaDevices.getUserMedia({
        audio:{
            echoCancellation: false,
            noiseSuppression: false,
            autoGainControl: false,
            latency: 0,
        }
    })
}

async function setupcontext() {
    try{const audio = await getmusic();
        if (context.state === "suspended"){
            await context.resume();
        }
        const source = context.createMediaStreamSource(audio);
        source       
            .connect(analyser)
            .connect(context.destination);}

    catch{alert("Access Denied")}
    
}


eventlistners();

setupcontext();

所以我想做的是，每当我切换这些开关时，我应该能够在以下位置更新它们

navigator.mediaDevices

我尝试了以下代码，但每次切换开关时它都会反复询问我：

noisesup.addEventListener("change", n=>{

        const value = n.target.value
        navigator.mediaDevices.getUserMedia({
            audio:{
                noiseSuppression: value
            }
        })
    })

然后我这样做了，但现在它说我需要 3 个参数，但只找到了 1 个。

noisesup.addEventListener("change", n=>{

        const value = n.target.value
        navigator.getUserMedia({
            audio:{
                noiseSuppression: value
            }
        })
    })

那我该怎么办呢？

Answer 1

您应该使用navigator.mediaDevices.getUserMedia。您的第一个示例 sn-p 中的那个。第二个示例 sn-p 已弃用。

这里的问题（据我所知）是getUserMedia 假设每次调用它时都会请求权限。所以提示是预期的。

您需要将流存储在一个变量中，并且该变量需要在事件处理程序之外声明。

async function start(constraints) {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* use the stream */
  } catch(err) {
    /* handle the error */
  }
}

将流存储在变量中后，您应该能够通过getTracks() 访问轨道，然后从那里将约束应用于轨道。

• getUserMedia: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
• getTracks(): https://developer.mozilla.org/en-US/docs/Web/API/MediaStream/getTracks
• applyContraints(): https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/applyConstraints

总之，不要在事件处理程序中调用getUserMedia。