Laravel+React+Pusher视频通话：第二位用户媒体流获取失败报错

Hey there, let's break down why your second user can't access media resources even after granting permissions—this is a common gotcha with local video call testing, and we'll fix it step by step.

First, Fix the Syntax Error in Your Error Message #

Looking at your MediaHandler.js code, I spot a quick issue with template strings: you're using single quotes (') instead of backticks (`) for your error message. This means ${err} won't interpolate the actual error details, making it way harder to debug what's really going wrong.

Fix this line:

throw new Error('unable to fetch stream ${err}');

Change to:

throw new Error(`unable to fetch stream ${err}`);

Most Likely Culprit: Media Device Occupancy #

When testing locally on the same physical device, your camera and microphone can only be accessed by one browser tab at a time. If the first user's tab is already holding onto the media devices, the second tab will fail to grab the stream—even if permissions are granted.

Quick Test for This: #

• Open the second user's session in a different browser (e.g., if first is Chrome, use Firefox)
• Or use an incognito/private window for the second user—this isolates media device access from the main browser session

Improve Your Promise Error Handling #

Your current getPermissions method throws an error inside the Promise catch, which can lead to uncaught promise rejections. Instead, use the Promise's rej callback to properly propagate errors to the caller, so you can handle them gracefully:

Revised MediaHandler.js:

export default class MediaHandler {
  getPermissions() {
    return new Promise((res, rej) => {
      navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then((stream) => {
          res(stream);
        })
        .catch(err => {
          // Pass the error to the caller's .catch() handler
          rej(new Error(`unable to fetch stream ${err}`));
        });
    });
  }
}

Now when you call getPermissions(), you can handle errors properly with .catch(error => console.error(error)) instead of getting an uncaught promise error in the console.

Additional Checks #

• Browser Permissions Cache: Sometimes browsers cache permission settings even if the device is occupied. Go to your browser's site settings for localhost and reset media permissions, then re-test.
• Pusher Connection Timing: Ensure your Pusher events are only triggered after the media stream is successfully fetched. If the second user tries to access the stream before Pusher confirms the connection, it might fail silently.

内容的提问来源于stack exchange，提问作者kiana.ka