如何通过GetUserMedia分别控制麦克风与摄像头？如何区分音视频权限状态？

Great question! I’ve faced this exact frustration before—when you request both audio and video permissions in a single getUserMedia call, any denial (even just one of them) triggers a generic rejection, leaving you in the dark about which permission went wrong. Let’s fix that with a couple of reliable approaches:

Approach 1: Request Audio and Video Separately #

By making two isolated getUserMedia calls (one for audio, one for video), you can handle each permission’s success or failure individually. This way, you’ll know exactly which permission was denied or is working.

Here’s the code:

// Helper to request audio permission
async function requestAudio() {
  try {
    const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    return { audio: true, stream: audioStream };
  } catch (err) {
    // Audio permission denied or device unavailable
    return { audio: false, error: err };
  }
}

// Helper to request video permission
async function requestVideo() {
  try {
    const videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
    return { video: true, stream: videoStream };
  } catch (err) {
    // Video permission denied or device unavailable
    return { video: false, error: err };
  }
}

// Main function to check both permissions
async function checkMediaPermissions() {
  const [audioResult, videoResult] = await Promise.all([requestAudio(), requestVideo()]);

  if (audioResult.audio && videoResult.video) {
    // Merge streams if you need a single combined stream for your app
    const combinedStream = new MediaStream([
      ...audioResult.stream.getAudioTracks(),
      ...videoResult.stream.getVideoTracks()
    ]);
    console.log("Both audio and video are working", combinedStream);
  } else if (audioResult.audio && !videoResult.video) {
    alert("你的音频正常，请修改视频权限"); // Your desired message
  } else if (!audioResult.audio && videoResult.video) {
    alert("你的视频正常，请修改音频权限");
  } else {
    alert("音频和视频权限均未开启，请检查设置");
  }
}

// Start the permission check
checkMediaPermissions();

Why this works: #

• Each permission request is independent, so a failure in one doesn’t block the other.
• You get clear, granular feedback on which permission succeeded or failed.
• You can easily merge the streams later if your app requires a single media stream.

Approach 2: Use the Permissions API (More Granular Control) #

The Permissions API lets you check the status of microphone and camera permissions before requesting media, which can help avoid unnecessary permission prompts. This works in all modern browsers (Chrome, Firefox, Edge, Safari 16.4+).

Here’s how to implement it:

async function checkMediaPermissions() {
  let audioStatus, videoStatus;

  // Check audio permission status
  try {
    audioStatus = await navigator.permissions.query({ name: 'microphone' });
  } catch (err) {
    // Fallback if Permissions API isn't supported
    audioStatus = { state: 'unknown' };
  }

  // Check video permission status
  try {
    videoStatus = await navigator.permissions.query({ name: 'camera' });
  } catch (err) {
    videoStatus = { state: 'unknown' };
  }

  // Handle known permission states first
  if (audioStatus.state === 'granted' && videoStatus.state === 'granted') {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    console.log("Both audio and video are working", stream);
  } else if (audioStatus.state === 'granted' && videoStatus.state === 'denied') {
    alert("你的音频正常，请修改视频权限");
  } else if (audioStatus.state === 'denied' && videoStatus.state === 'granted') {
    alert("你的视频正常，请修改音频权限");
  } else {
    // If status is 'prompt' or 'unknown', request media to confirm
    try {
      await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
      console.log("Both permissions granted after prompt");
    } catch (err) {
      // Fall back to separate requests to pinpoint the issue
      const audioTest = await requestAudio();
      const videoTest = await requestVideo();
      if (audioTest.audio && !videoTest.video) {
        alert("你的音频正常，请修改视频权限");
      } else if (!audioTest.audio && videoTest.video) {
        alert("你的视频正常，请修改音频权限");
      } else {
        alert("音频和视频权限均未开启，请检查设置");
      }
    }
  }
}

// Reuse helper functions from Approach 1
async function requestAudio() {
  try {
    await navigator.mediaDevices.getUserMedia({ audio: true });
    return { audio: true };
  } catch (err) {
    return { audio: false };
  }
}

async function requestVideo() {
  try {
    await navigator.mediaDevices.getUserMedia({ video: true });
    return { video: true };
  } catch (err) {
    return { video: false };
  }
}

checkMediaPermissions();

Why this works: #

• You can avoid prompting users if you already know their permission status (e.g., they denied it previously).
• It gives you more control over the user flow, with a fallback for browsers that don’t support the Permissions API.

Key Tips: #

• Error Details: When handling getUserMedia errors, check the err.name property to differentiate between permission denials (NotAllowedError) and hardware issues (NotFoundError).
• User Experience: Requesting permissions in parallel with Promise.all minimizes duplicate prompts, as most browsers will remember the user’s choice for subsequent requests.

Choose the approach that fits your app’s needs—separate requests are simpler and more widely compatible, while the Permissions API offers extra granularity.

内容的提问来源于stack exchange，提问作者React-Developer