关闭WebRTC轨迹不会关闭摄像机设备或tab摄像机指示器

我的头撞到了墙上，我似乎无法理解当调用

MediaStreamTrack.stop（）

时，相机视频流上有什么东西，而没有关闭

我有一个typescript类，我在其中处理获取WebRTC流跟踪并使用可观察事件将其传递给功能性reactjs组件，下面的代码是注册到事件并使用流跟踪状态的组件

const [videoStreamTrack, setVideoStreamTrack] = useState < MediaStreamTrack > (
    null
)

useEffect(() => {
    return () => {
        videoStreamTrack?.stop()
        videoElement.current.srcObject.getVideoTracks().forEach((track) => {
            track.stop()
            videoElement.current.srcObject.removeTrack(track)
        })
        videoElement.current.srcObject = null
    }
}, [])

case RoomEvents.WebcamProducerAdded:
case RoomEvents.VideoStreamReplaced: {
  if (result.data?.track) {
      if (result.data.track.kind === 'video') {
        previewVideoStreamTrack?.stop()
        setPreviewVideoStreamTrack(null)
        setVideoStreamTrack(result.data.track)
      }
    }
  break
}

我正在使用下面的代码保存此.webcam.device的详细信息

async updateInputOutputMediaDevices(): Promise < MediaDeviceInfo[] > {
    await navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
    })
    const devices = await navigator.mediaDevices.enumerateDevices()
    await this.updateWebcams(devices)
    await this.updateAudioInputs(devices)
    await this.updateAudioOutputs(devices)
    return devices
}

private async updateWebcams(devices: MediaDeviceInfo[]) {
    this.webcams = new Map < string, MediaDeviceInfo > ()

    for (const device of devices.filter((d) => d.kind === 'videoinput')) {
        this.webcams.set(device.deviceId, device)
    }

    const array = Array.from(this.webcams.values())

    this.eventSubject.next({
        eventName: RoomEvents.CanChangeWebcam,
        data: {
            canChangeWebcam: array.length > 1,
            mediaDevices: array,
        },
    })
}

async UpdateInputMediaDevices（）：Promise{
等待navigator.mediaDevices.getUserMedia({
音频：是的，
视频：真的
})
const devices=wait navigator.mediaDevices.enumerateDevices（）
等待此消息。updateWebcams（设备）
等待此消息。updateAudioInputs（设备）
等待此消息。updateAudioOutputs（设备）
返回装置
}
专用异步updateWebcams（设备：MediaDeviceInfo[]）{
this.webcams=新地图（）
对于（const device of devices.filter（（d）=>d.kind==='videoinput'））{
this.webcams.set（device.deviceId，device）
}
const array=array.from（this.webcams.values（））
this.eventSubject.next({
eventName:RoomEvents.CanChangeWebcam，
数据：{
canChangeWebcam:array.length>1，
媒体设备：阵列，
},
})
}

刷新页面将关闭相机和选项卡指示器

useEffect(() => {
    return () => {
        videoStreamTrack?.stop()
        videoElement.current.srcObject.getVideoTracks().forEach((track) => {
            track.stop()
            videoElement.current.srcObject.removeTrack(track)
        })
        videoElement.current.srcObject = null
    }
}, [])

所以你在这里搜索和销毁视频曲目。似乎是正确的；我们拭目以待

async updateInputOutputMediaDevices(): Promise < MediaDeviceInfo[] > {
    await navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
    })
    const devices = await navigator.mediaDevices.enumerateDevices()
    await this.updateWebcams(devices)
    await this.updateAudioInputs(devices)
    await this.updateAudioOutputs(devices)
    return devices
}

async UpdateInputMediaDevices（）：Promise{
等待navigator.mediaDevices.getUserMedia({
音频：是的，
视频：真的
})
const devices=wait navigator.mediaDevices.enumerateDevices（）
等待此消息。updateWebcams（设备）
等待此消息。updateAudioInputs（设备）
等待此消息。updateAudioOutputs（设备）
返回装置
}

---

上面我看到有一个音频呼叫可能在打嗝的地方？不能过度检查，但也许你只是打开和关闭视频？尝试在所有曲目中循环，而不仅仅是视频，看看有什么？

@blanknamefornow答案帮助我解决了这个问题

我们在多个地方调用getUserMedia，而不仅仅是在 “room”类处理mediasoup操作，但也有fore 预览/设备选择/etc，但从未真正关闭 找到了踪迹

有时，这些轨迹会保持在可用状态 如果您试图访问 变量它们已经被reactjs置为空。解决办法是 因为HTML元素仍然被引用，所以在 需要。我相信这是我在尝试 把它弄明白

async updateInputOutputMediaDevices(): Promise < MediaDeviceInfo[] > {
    await navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
    })
    const devices = await navigator.mediaDevices.enumerateDevices()
    await this.updateWebcams(devices)
    await this.updateAudioInputs(devices)
    await this.updateAudioOutputs(devices)
    return devices
}