Troubleshooting: Black Box issue with WebRTC on iOS

If you are facing a black box issue when using WebRTC on iOS Safari for video streams, both local and remote, there is a simple fix you can apply. This problem usually occurs when working with the PeerJS library.

Solution

To resolve this issue, you need to add the playsinline attribute to the video tags for both the local and remote streams. This attribute allows the video to play inline without going into full screen mode.

Here is an example of how to add the playsinline attribute:

<video id="local" autoplay playsinline muted></video>
<video id="remote" autoplay playsinline></video>

Please note that if you are using JSX, you should use playsInline instead of playsinline.

By implementing this fix, you should be able to see the video streams properly on iOS Safari without the black box issue.

If you encounter any other issues with WebRTC or have further questions, feel free to reach out for assistance.