webrtc - 关闭WebRTC轨道不会关闭相机设备或选项卡相机指示器

Question

用这个把我的头撞到墙上，我似乎无法理解相机视频流上保存着什么，并且在 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
}

在“Room”类中，我使用以下代码来获取流。

const videoDevice = this.webcam.device
if (!videoDevice) {
    throw new Error('no webcam devices')
}

const userMedia = await navigator.mediaDevices.getUserMedia({
    video: this.environmentPlatformService.isMobile ?
        true : {
            deviceId: {
                exact: this.webcam.device.deviceId
            },
            ...VIDEO_CONSTRAINS[this.webcam.resolution],
        },
})

const videoTrack = userMedia.getVideoTracks()[0]

this.eventSubject.next({
    eventName: RoomEvents.WebcamProducerAdded,
    data: {
        track: videoTrack,
    },
})

我使用下面的代码保留 this.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,
        },
    })
}

刷新页面将关闭相机和标签指示器。

Answer 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
}

上面我看到有一个音频调用可能是问题所在？无法过度检查，但也许您打开了两者并仅关闭了视频？尝试循环播放所有轨道，而不仅仅是视频，看看有什么？