I am using Twilio Video for creating a video/chat application, and the remote video tracks are displayed dark on Safari IOS (Using Safari Technology Preview) as shown in the picture below. (One way video)
I was thinking the issue is with the Browsers Autoplay Policy, but i think this should not be the case, since the audio track is played, while the video track remains dark. Also, i make sure that the user presses a "Join Call" button, to ensure user interaction, which allows the rendering of a component which runs this React useEffect.
The codec of the video is H264, to ensure all Safari users can join the Room (Group Room)
useEffect(() => {
const canConnectToRoom = !room && !isConnectingToRoom && token && roomName
if (canConnectToRoom) {
connectToRoom(token, {
video: false,
name: roomName,
})
}
}, [room, isConnectingToRoom, token, roomName, connectToRoom])
Any help would be appreciated, thanks.
UPDATE 1:
TO RECEIVE THE REMOTE VIDEO STREAM
1. Render a RemoteParticipant component:
The collapsed code is for rendering a fallback UI when the remote camera is disabled (This gets shown when the remote camera is disabled, but when the remote camera is enabled just a dark screen)
2. Extract the participant publications
3. Render the publication tracks as:
4. Render the Video Track
5. Warnings in Safari Console
The warnings in the console are printed out until i allow microphone access. I tried joining the room after allowing microphone access, we eliminate console warnings that way, but remote video is still dark.
