What to do if WebRTC on iOS shows a black box
I was doing a project using WebRTC and in particular with the PeerJS library.
It worked fine on desktop but on iOS Safari, all I was seeing for the video streams was a black box.
Even for the local stream.
What I had to do was to add the playsinline
attribute to the video
tags for both the local and remote streams:
<video id="local" autoplay playsinline muted></video>
<video id="remote" autoplay playsinline></video>
(note: it’s playsInline
in JSX)
→ Read my DOM Tutorial on
The Valley of Code
→ Read my
Browser Events Tutorial
on The Valley of Code
→ Read my
Browser APIs Tutorials
on The Valley of Code
h
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X