Javascript 使用React/NextJS useRef切换网络摄像头视频失败

我已经定义了一个网络摄像头组件，可以在代码库中的几个地方使用，但它只在加载时渲染。我试图添加一个开关来打开和关闭它，但我很难让它工作

下面是我在Next.js中使用的组件的TypeScript实现

从'react'导入{useRef，useState，useffect}
导出默认函数WebcamVideo（）{
const router=useRouter（）
const[mediaStream，setMediaStream]=useState（）
const videoRef=useRef（空）
useffect（（）=>{
setupWebcamVideo（）
}，[mediaStream]）
异步函数setupWebcamVideo（）{
如果（！mediaStream）{
等待设置MediaStream（）
}否则{
const videoCurr=videoRef.current
如果（！videoCurr）返回
const video=videoCurr！作为HTMLVideoElement
如果（！video.srcObject）{
video.srcObject=mediaStream
}
}
}
异步函数setupMediaStream（）{
试一试{
const ms=wait navigator.mediaDevices.getUserMedia（{video:{facingMode:'user'}，audio:true}）
setMediaStream（ms）
}捕获（e）{
警报（'相机已禁用'）
掷e
}
}
...
返回(
)
}

我在这个场景中使用组件：

导出默认函数SomePage（）{
常量[toggleTab，setToggleTab]=useState（真）
返回(
{切换标签(
切换网络摄像头
)
}

---

切换两次后，我看不到网络摄像头视频，但如果我重新加载页面，它会出现。

我已经按照上面的评论创建了CSB，切换两次按钮后，视频会出现

从“react”导入{useRef，useState，useffect}；
导出默认函数WebcamVideo（）{
const[mediaStream，setMediaStream]=useState（）；
const videoRef=useRef（空）；
useffect（（）=>{
//已移动到useEffect内部，因为此函数依赖于“mediaStream”`
异步函数setupWebcamVideo（）{
如果（！mediaStream）{
等待设置MediaStream（）；
}否则{
const videoCurr=videoRef.current；
如果（！videoCurr）返回；
const video=videoCurr；
如果（！video.srcObject）{
video.srcObject=mediaStream；
}
}
}
setupWebcamVideo（）；
}，[mediaStream]）；
异步函数setupMediaStream（）{
试一试{
const ms=wait navigator.mediaDevices.getUserMedia({
视频：{facingMode:“用户”}，
音频：正确
});
setMediaStream（ms）；
}捕获（e）{
警报（“摄像机被禁用”）；
投掷e；
}
}
返回(
);
}

我不知道这是否与问题有关，但我认为您应该在

useEffect

的内部定义

setupWebcamVideo

，因为该功能依赖于

mediaStream

。这似乎没有什么区别。