如何在 navigator.devicemedia 处更新数据而不会出现任何错误

Question

我是 JS 的新手，我正在创建一个音乐放大器。您看到的图片是我正在创建的内容的一小段。

我的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。您的第一个示例代码段中的那个。第二个示例片段已弃用。

这里的问题（据我所知）是 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。

如何在 navigator.devicemedia 处更新数据而不会出现任何错误

How to update data at navigator.devicemedia without any errors

html

javascript

css

audio

web-audio-api