Safari + WebRtcPeerRecvonly.

[andrey-serdyuk]

Prerequisites

• [X] I agree to fill this issue template.
• [X] I have read the [Troubleshooting Guide] and [Support Instructions].

Issue description

Javascript-client application cannot establish a connection with server in Safari 14.0.1.

Context

The connection is always on "connecting" state.

How to reproduce?

I'm pasting the code I have created to help me to upderstend the issue:

`var deviceId = "7023403540"; var kurentoLocation = "wss://dvrlb.worldfleet.com/kurento"; var players = ["rtsp://10.4.4.230:6604/LDEyNTQ1LDcwMjM0MDM1NDAsMCwxLDAsMA=="];

var candidates = []; var src = $('');

$(document).ready(function () { players.forEach(function (item, index) { var videoPlayerId = 'video-player-' + index; var container = $("

").addClass('player-container'); var button = $('').text('Play').addClass('player-button').attr('data-video-player-id', videoPlayerId).attr('data-src', item).css({ display: 'block' }); var remoteVideo = $('').addClass('video-player').attr('id', 'remote-' + videoPlayerId).css({ width: '240px', height: '240px', display: 'inline-block', }); var localVideo = $('').addClass('video-player').attr('id', 'local-' + videoPlayerId).css({ width: '240px', height: '240px', display: 'inline-block' }); var videoStream = $('').addClass('video-player').attr('id', 'videoStream-' + videoPlayerId).css({ width: '240px', height: '240px', display: 'inline-block' }); var imageStream = $('').addClass('video-player').attr('id', 'image-' + videoPlayerId).css({ width: '240px', height: '240px', display: 'inline-block' }); //$(video).append(src); $(container).append(localVideo).append(remoteVideo).append(videoStream).append(imageStream).append(button); $('#players-container').append(container); }); });

$(document).on('click', '.player-button', function (e) { var src = $(this).data('src'); var videoPlayerId = $(this).data('video-player-id'); var webRtcPeer = undefined; var localVideo = document.querySelector('#local-' + videoPlayerId); var remoteVideo = document.querySelector('#remote-' + videoPlayerId); var videoStream = document.querySelector('#videoStream-' + videoPlayerId); var imageStream = document.querySelector('#image-' + videoPlayerId); var mediaStream = new MediaStream();

localVideo.playsinline = false;
localVideo.muted = true;
localVideo.autoplay = false;
localVideo.controls = true;

remoteVideo.playsinline = false;
remoteVideo.controls = true;
remoteVideo.muted = true;
remoteVideo.autoplay = false;

videoStream.playsinline = true;
videoStream.controls = true;
videoStream.muted = true;
videoStream.autoplay = false;
videoStream.srcObject = mediaStream;

var options = {
    localVideo: localVideo,
    remoteVideo: remoteVideo,
    videoStream: mediaStream,
    mediaConstraints: {
        audio: false,
        video: {
            width: 240,
            framerate: 30
        }
    },
    onaddstream: function (event) {
    }
};

webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(options, function (error) {
    
    webRtcPeer.peerConnection.ontrack = function(event) {
        console.log('---track', event);
        mediaStream.addTrack(event.track, mediaStream);
        videoStream.srcObject = mediaStream;
    };
    
    webRtcPeer.generateOffer(function (error, offer) {
        console.log('generateOffer', 'error', error);

        kurentoClient(kurentoLocation, function (error, client) {
            console.log('kurentoClient', 'error', error, 'client', client);
            console.log('webRtcPeer', webRtcPeer, webRtcPeer.peerConnection);
            
            
            setInterval(function() {
                console.log(webRtcPeer.currentFrame, webRtcPeer.peerConnection.connectionState);
            }, 2500);
            
            webRtcPeer.peerConnection.addEventListener('iceconnectionstatechange', function (event) {
                console.log('------webRtcPeer', webRtcPeer.peerConnection.connectionState, webRtcPeer.currentFrame);
            });
            
            client.create("MediaPipeline", function (error, pipeline) {
                console.log('MediaPipeline', 'error', error, 'pipeline', pipeline);
                
                pipeline.create("PlayerEndpoint", { uri: src }, function (error, playerEndpoint) {
                    console.log('PlayerEndpoint', 'error ', error, 'playerEndpoint ', playerEndpoint);
                    
                    pipeline.create("WebRtcEndpoint", function (error, webRtcEndpoint) {
                        console.log('WebRtcEndpoint', 'error', error, 'webRtcEndpoint', webRtcEndpoint);
                        
                        webRtcEndpoint.on('OnIceCandidate', function (event) {
                            console.log('OnIceCandidate', 'event ', event.candidate);
                            
                            webRtcPeer.addIceCandidate(event.candidate, function (error) {
                                console.log('webRtcPeer::addIceCaevent', 'error', error);

                                webRtcEndpoint.addIceCandidate(kurentoClient.register.complexTypes.IceCandidate(event.candidate), function (error) {
                                    console.log('webRtcPeer::addIceCaevent', 'error', error);
                                });
                            });
                        });
                        
                        webRtcEndpoint.processOffer(offer, function (error, answer) {
                            console.log('processOffer', 'error', error, 'answer', answer);
                            
                            webRtcEndpoint.gatherCandidates(function (error) {
                                console.log('gatherCandidates', 'error', error);
                            });
                            
                            webRtcPeer.processAnswer(answer);
                            
                            playerEndpoint.connect(webRtcEndpoint, function (error) {
                                console.log('playerEndpoint::connect', 'error', error);
                                
                                playerEndpoint.play(function (error) {
                                    console.log('localPlay');
                                    localVideo.play();
                                    remoteVideo.play();
                                    videoStream.play();
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});

}); `

Expected & current behavior

Connection with server should be established and video streaming should begin. Works well on Chrom but in Safari - the connection state is always in "connecting" state which doesn't allow to start video straming.

(Optional) Possible solution

INFO about Kurento Media Server

• Kurento version: 6.7.1
• Server OS: MacOS
• Installation method:
  • [] apt-get
  • [] Docker
  • [] AWS CloudFormation
  • [X] Built from sources

INFO about your Application Server

• Programming Language: JavaScript
• Kurento Client version: 6.7.1

INFO about end-user clients

• Device(s): Mac
• OS(es): MacOS
• Browser(s): Safari 14.0.1

INFO about your environment

As have been mentioned before: Computer: Mac OS: MacOS Browser: Safari

Run these commands

[github-actions[bot]]

Hello @andretmn! :wave: we're sorry you found a bug... so first of all, thank you very much for reporting it.

To know about progress, check in Triage. All issues are considered Backlog Candidates until work priorities align and the issue is selected for development. It will then become part of our official Backlog.

[j1elo]

When Kurento 6.7.1 was released, Safari 14 didn't exist so it wasn't testef d against it. Try with latest versions to see if it works better