Video connection does not work in Safari

Issues with deployment
1

Hi

If your device is rejected in Safari browser
safari browser only
Other users’ videos are not linked.

  1. safari

    image
    image1410×860 12.8 KB

  2. opera

    image
    image1410×860 102 KB

  3. chrom

    image
    image2820×1720 231 KB

Spec

  • react
  • 2.16 openvidu-browser

Source Code
import React, { useState, useEffect } from “react”;

export const OvVideoComponent = (props) => {

let videoRef = React.createRef();

useEffect(() => {
    // console.log(props.user);
    // console.log(videoRef);

    if (props && props.user.streamManager && !!videoRef) {
        // if (props.type == "pip") {
        //     videoRef.current.defaultMuted = props.mutedSound;
        //     videoRef.current.muted = props.mutedSound;
        // }
        props.user.getStreamManager().addVideoElement(videoRef.current);
        
    }
});

return (
    <>
        <video
            autoPlay={true}
            id={'video-' + props.user.getStreamManager().stream.streamId}
            ref={videoRef}
            muted={props.mutedSound}
        />
    </>
);

};

export default OvVideoComponent;

2

Safari has some strict autoplay features for video elements. These restrictions are gone when the page is accessing the mic/camera, that’s why they are playing correctly when the webcam is used by the page. And that’s probably why it is not working the same when not accesing the webcam. You should handle the playing of the video in a way that chaces of successful autoplay are increased. There is lots of information online. For example, take a look at this: Autoplay Best Practices with Video.js | Video.js Blog