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

Posted 2023-03-22

【中文标题】如何在没有任何错误的情况下更新 navigator.devicemedia 上的数据

【英文标题】：How to update data at navigator.devicemedia without any errors

【发布时间】：2022-01-22 16:44:07

【问题描述】：

我是 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() 
    tryconst audio = await getmusic();
        if (context.state === "suspended")
            await context.resume();
        
        const source = context.createMediaStreamSource(audio);
        source       
            .connect(analyser)
            .connect(context.destination);

    catchalert("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
            
        )
    )

那我该怎么办呢？

【问题讨论】：

可以添加一些相关的 HTML 吗？

已添加到我的帖子中

【参考方案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。

【讨论】：

不是很懂。我应该对代码做哪些更改？

我知道我必须更改曲目以及如何将其应用于代码？

我没有时间为您重写所有代码，但是如果您阅读了上面的文档以及我上面的解释，它应该能够让您重新构建您的代码。关键是将流变量提升到处理程序之外