搭建类TokBox网站：WebRTC在Safari中无法显示相机输出求助

Hey there! I’ve run into this exact issue when building WebRTC-based apps for Safari before—super frustrating, but there are a few key things to check that usually resolve it. Let’s walk through them step by step:

• Verify you’re actually getting a media stream
  First, add some debug logging to confirm the stream is being fetched correctly. After calling getUserMedia, log the stream and its video tracks:

  async function initCamera() {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      // Log stream details
      console.log("Media Stream:", stream);
      console.log("Video Tracks:", stream.getVideoTracks());
      // Check track status
      stream.getVideoTracks().forEach(track => console.log("Track Status:", track.readyState));
    } catch (err) {
      console.error("Camera Access Error:", err);
    }
  }
  

  In Safari’s Web Inspector Console, look for:

  • Are there any video tracks listed?
  • Is the track’s readyState set to live?
    If tracks are missing or in an ended state, even with permission granted, something is blocking the stream (like another app using the camera).

• Fix your <video> element attributes
  Safari has strict rules for autoplay and inline playback—skip these, and your feed won’t show up. Make sure your video tag includes these mandatory attributes:

  <video id="cameraFeed" autoplay playsinline muted></video>
  

  • autoplay: Required to start playback automatically without user interaction (after permission is granted)
  • playsinline: Prevents the video from opening in fullscreen mode (critical for iOS Safari)
  • muted: Safari blocks autoplay of media with audio—even camera streams need this to play inline
    Also, ensure you’re using srcObject to attach the stream (avoid the deprecated URL.createObjectURL):

  document.getElementById("cameraFeed").srcObject = stream;
  

• Check for HTTPS/localhost requirement
  Safari requires WebRTC to run over HTTPS (with the exception of localhost for local development). If you’re testing on a non-HTTPS public domain, even with permission granted, getUserMedia will fail silently or throw a permission error. Switch to HTTPS or test locally to rule this out.

• Ensure no other apps are using the camera
  On macOS or iOS, if another app (FaceTime, Zoom, etc.) is already using the camera, Safari can’t access it—even if you’ve granted permission. Close all other camera-using apps, refresh your page, and try again.

• Test with a minimal code snippet
  Strip down your code to the absolute basics to isolate the issue. Use the minimal example below—if this works, the problem is in your app’s additional logic (like stream manipulation, CSS hiding the video element, or state management bugs):

  <video id="minimalFeed" autoplay playsinline muted style="width: 300px; height: auto;"></video>
  <button onclick="startMinimalCamera()">Start Camera</button>
  
  <script>
    async function startMinimalCamera() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        document.getElementById("minimalFeed").srcObject = stream;
      } catch (err) {
        alert("Error: " + err.message);
      }
    }
  </script>
  

• Update Safari and your OS
  Older versions of Safari (pre-13 on macOS, pre-12 on iOS) have known WebRTC bugs. Ensure you’re running the latest stable version of Safari and your operating system—many camera feed issues are fixed in updates.

If none of these work, share the specific error messages from Safari’s Console or a snippet of your relevant code, and I can help dig deeper!

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