求助：react-webcam/react-mic跳转后无法释放音视频权限

核心思路 #

不要通过页面刷新释放权限，而是在组件卸载/跳转前，直接调用浏览器的MediaStream API停止音视频轨道，同时配合react-webcam和react-mic的实例方法完成清理。

具体实现步骤 #

1. 为组件添加Ref获取实例

在你的音视频检查组件中，分别为react-webcam和react-mic创建Ref，用于访问底层媒体流：

import React, { useRef, useEffect } from 'react';
import Webcam from 'react-webcam';
import { ReactMic } from 'react-mic';

const MediaCheckComponent = (props) => {
  const webcamRef = useRef(null);
  const micRef = useRef(null);

2. 编写资源清理函数

分别编写停止摄像头和麦克风的函数，手动终止所有媒体轨道：

// 停止摄像头并释放资源
const stopWebcam = () => {
  if (webcamRef.current?.stream) {
    webcamRef.current.stream.getTracks().forEach(track => {
      track.stop();
    });
  }
};

// 停止麦克风录制并释放资源
const stopMic = () => {
  if (micRef.current) {
    // 调用react-mic自带的停止录制方法
    micRef.current.stopRecording();
    // 手动终止麦克风轨道
    if (micRef.current?.stream) {
      micRef.current.stream.getTracks().forEach(track => {
        track.stop();
      });
    }
  }
};

3. 在跳转前执行清理

点击跳转按钮时，先调用清理函数，再执行路由跳转：

const handleNavigateToSecond = () => {
  stopWebcam();
  stopMic();
  props.history.push('/second-component');
};

4. 组件卸载时自动清理（兜底）

添加useEffect的清理函数，确保组件被卸载时（比如用户通过浏览器后退按钮返回）也能释放资源：

useEffect(() => {
  // 组件卸载时执行清理
  return () => {
    stopWebcam();
    stopMic();
  };
}, []);

5. 组件JSX部分对应绑定Ref

确保你的Webcam和ReactMic组件绑定对应的Ref：

return (
  <div>
    <Webcam ref={webcamRef} />
    <ReactMic 
      ref={micRef}
      record={true}
      className="sound-wave"
      onStop={(recordedBlob) => console.log('录制停止', recordedBlob)}
    />
    <button onClick={handleNavigateToSecond}>完成检查，进入下一页</button>
  </div>
);
};

export default MediaCheckComponent;

为什么页面刷新方案在iPhone上失效？ #

iPhone的Safari浏览器在执行window.location.reload()时，会重置当前页面的会话存储（Session Storage）和Cookie状态，导致你的应用登出逻辑被触发。而通过MediaStream API手动停止轨道，不会影响会话状态，是更安全的方案。

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