ReactJS初始关闭摄像头时画中画无摄像头切换按钮问题

问题出在初始禁用摄像头时，浏览器未检测到可用的摄像头媒体轨道，导致PiP界面不渲染摄像头切换按钮。麦克风能正常显示按钮，大概率是因为你初始已经获取了麦克风轨道（只是静音状态），而摄像头则完全没有初始化轨道。

核心原因 #

Media Session的togglecamera按钮是否显示，浏览器不仅看setCameraActive()的状态，更依赖是否存在已获取的摄像头媒体轨道——哪怕轨道是禁用状态。如果从未请求过摄像头权限、未创建视频轨道，浏览器会认为摄像头不可用，直接隐藏按钮。

解决步骤 #

1. 提前初始化摄像头轨道（即使初始不启用）

在组件挂载时，先获取摄像头权限并创建轨道，初始设置为禁用状态，让浏览器知道摄像头是可用的：

import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

const VideoConference = () => {
  const dispatch = useDispatch();
  const [cameraTrack, setCameraTrack] = useState(null);
  const { isUseVideo, isUseMicrophone, isAllowUnmute } = useSelector(state => state.conference);

  // 初始化摄像头轨道
  useEffect(() => {
    let track;
    const initCamera = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        track = stream.getVideoTracks()[0];
        track.enabled = isUseVideo; // 初始禁用
        setCameraTrack(track);
      } catch (err) {
        console.error('摄像头权限获取失败:', err);
      }
    };

    initCamera();

    // 组件卸载时停止轨道
    return () => {
      if (track) track.stop();
    };
  }, [isUseVideo]);

  // 同步Media Session状态与轨道状态
  useEffect(() => {
    navigator.mediaSession.setMicrophoneActive(isUseMicrophone);
    if (cameraTrack) {
      cameraTrack.enabled = isUseVideo;
      navigator.mediaSession.setCameraActive(isUseVideo);
    }

    // 麦克风切换逻辑
    try {
      navigator.mediaSession.setActionHandler("togglemicrophone", () => {
        console.log('点击了麦克风切换');
        if (isAllowUnmute) {
          const newState = !isUseMicrophone;
          navigator.mediaSession.setMicrophoneActive(newState);
          dispatch(setUseMicrophone(newState));
        }
      });
    } catch (error) {
      console.log('togglemicrophone 不支持');
    }

    // 摄像头切换逻辑：直接操作轨道enabled属性
    try {
      navigator.mediaSession.setActionHandler("togglecamera", () => {
        console.log('点击了摄像头切换');
        if (!cameraTrack) return;
        const newState = !cameraTrack.enabled;
        cameraTrack.enabled = newState;
        navigator.mediaSession.setCameraActive(newState);
        dispatch(setUseVideo(newState));
      });
    } catch (error) {
      console.log('togglecamera 不支持');
    }
  }, [isUseMicrophone, isUseVideo, cameraTrack, isAllowUnmute, dispatch]);

  // ... 其他组件逻辑
};

2. 进入PiP后同步状态（可选）

部分浏览器在进入PiP模式后可能会重置Media Session状态，建议在调用requestPictureInPicture后重新同步一次：

const enterPiP = async (videoElement) => {
  try {
    await videoElement.requestPictureInPicture();
    if (cameraTrack) {
      navigator.mediaSession.setCameraActive(cameraTrack.enabled);
    }
  } catch (err) {
    console.error('进入画中画失败:', err);
  }
};

验证点 #

• 确认组件挂载时浏览器是否弹出摄像头授权提示，且授权成功
• 检查cameraTrack是否存在（即使isUseVideo为false）
• 进入PiP后观察摄像头切换按钮是否显示，点击后是否能正常切换摄像头状态

内容的提问来源于stack exchange，提问作者Owenn