I have a custom WebRTC application that uses two video streams and one audio stream.
Everything is working nicely on Chrome (93.0) and Firefox (92.0), but Safari (14.1) refuses to play one of the streams (the one for the first video element with ID "stream").
HTML looks as follows (mostly placeholders):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="icon" href="data:;base64,iVBORw0KGgo="/>
<script src="stream.js"></script>
<style>
</style>
</head>
<body>
<div style="display:grid">
<video style="grid-column:1;grid-row:1;width:720px;z-index:5" id="stream" autoplay playsinline>Your browser does not support video</video>
<canvas style="grid-column:1;grid-row:1;justify-self:end;width:1280px;height:720px;z-index:10" id="canvas"></canvas>
<video style="grid-column:1;grid-row:1;justify-self:end;width:1280px;height:720px" id="stream2" autoplay playsinline>Your browser does not support video</video>
</div>
</body>
</html>
The relevant part of the Javascript code (html5VideoElement == ID "stream", html5VideoElement2 == ID "stream2"):
function onAddRemoteStream(event) {
if (event.transceiver.mid == remotemap["front"]) {
frontstream.addTrack(event.track);
html5VideoElement.srcObject = frontstream;
html5VideoElement.play();
}
if (event.transceiver.mid == remotemap["audio"]) {
frontstream.addTrack(event.track);
}
if (event.transceiver.mid == remotemap["surface"]) {
surfacestream.addTrack(event.track);
html5VideoElement2.srcObject = surfacestream;
html5VideoElement2.play();
}
}
onAddRemoteStream is the onTrack method for the RTCPeerConnection object. remotemap contains a mapping from track type to MID value, sent by the remote peer. frontstream and surfacestream are two (initially empty) MediaStream objects.
Weirdly enough, there are no exceptions or warnings with any browser, the first video element just stays empty and silent with Safari.
All outgoing streams (camera, audio, canvas) work on all three browsers.
Any suggestions welcome!