I'm currently developing a WebRTC user interface that displays the user's video in a small window positioned in front of the person they are speaking to.
Feel free to check out the working codepen example here:
https://codepen.io/VikR/pen/GXoXRp
CSS
#pipContainer {
position: relative;
top: 0;
left: 0;
width: 250px;
}
#otherCallerVideo {
position: relative;
top: 0;
left: 0;
width: 100%;
}
#myVideo {
width: 30%;
position: absolute;
bottom: 0;
right: 0;
transform: rotateY(-180deg);
z-index: 1000;
}
HTML
<p id="status">Loading room information...</p>
<div id="start">
<button onclick="start(event)">Start</button><br/>
</div>
<div id="pipContainer">
<video id="otherCallerVideo" playsInline="true" autoPlay></video>
<video id="myVideo" playsInline="true" autoPlay muted></video>
</div>
While this setup works smoothly on Chrome and Firefox, it seems Safari on OS X and iOS does not allow it. The user's video disappears in Safari. I have experimented with various methods including z-index and different positioning techniques, but so far no luck in getting it to work on Safari.
Is there a way to achieve this functionality in Safari?