Video does not appear in local and remote streams on iOS Safari

[testester]

After stream.stop () the published stream in Web SDK,
Immediately after, you need to publish with another stream name in the same session.

In this case, the video published later may not be displayed on iOS Safari only.

However, if you setTimeout () for about 1 second between stop () and publish (), the video is almost certainly displayed.

I'd like to synchronize with the stop () function to make publish () later, is that possible?

Is there any other way if I can't do that?

The following is a sample.

// …
// …One stream has already been successfully published

stream.stop() // Publish Stream stop

// If setTImeout () is executed here, the stream to be published is displayed...

if (MediaServerManager.getSessions().length > 0) {
  // eslint-disable-next-line no-undef
  const session = MediaServerManager.getSessions()[0]
  if (Browser.isSafariWebRTC()) {
    playFirstVideo(localVideoDiv, true)
  }

  session.createStream({
    name: streamName,
    display: LocalVideoDiv,
    …
  }).on(STREAM_STATUS.PUBLISHING, (publishStream) => {
  }).on(STREAM_STATUS.FAILED, () => {
  }).on(STREAM_STATUS.UNPUBLISHED, () => {
  }).publish() // the video published later may not be displayed
}

 

[Max]

Good day.
You should use STREAM_STATUS.UNPUBLISHED event as trigger to publish stream again. Please see call flow here for details. You can not publish stream with the same name before you receive this event.

 

[testester]

Hi Max.

I did the second publish () in the first STREAM_STATUS.UNPUBLISHED event trigger, but the problem was not solved.

However, after stopping () a stream that was published with constraints.audio = false, it turned out that it was not streamed only when publishing with constraints.audio = true in the STREAM_STATUS.UNPUBLISHED event trigger for that session.

The sample at this time is as follows.

function videoOnlyPublish () {
  if (Flashphoner.getSessions().length > 0) {
    const session = Flashphoner.getSessions()[0]
    if (Browser.isSafariWebRTC()) {
      Flashphoner.playFirstVideo(localVideoDiv, true)
    }
    session.createStream({
      name: streamName,
      display: LocalVideoDiv,
      constraints: { video: true, audio: false }
    }).on(STREAM_STATUS.PUBLISHING, (publishStream) => {
    }).on(STREAM_STATUS.FAILED, () => {
    }).on(STREAM_STATUS.UNPUBLISHED, () => {
      videoAudioPublish()
    }).publish() // success.
  }
}

function videoAudioPublish () {
  if (Flashphoner.getSessions().length > 0) {
    const session = Flashphoner.getSessions()[0]
    if (Browser.isSafariWebRTC()) {
      Flashphoner.playFirstVideo(localVideoDiv, true)
    }
    session.createStream({
      name: streamName,
      display: LocalVideoDiv,
      constraints: { video: true, audio: true }
    }).on(STREAM_STATUS.PUBLISHING, (publishStream) => {
    }).on(STREAM_STATUS.FAILED, () => {
    }).on(STREAM_STATUS.UNPUBLISHED, () => {
    }).publish() // the video published later may not be displayed.
  }
}

videoOnlyPublish()
//…
stream.stop()

 

[Max]

Good day.
Please update WebSDK to latest build from this page, then try to modify Two Way Streaming sample source code as follows:

function publishStream() {
    var session = Flashphoner.getSessions()[0];
    var streamName = $('#publishStream').val();

    session.createStream({
        name: streamName,
        display: localVideo,
        cacheLocalResources: true,
        receiveVideo: false,
        receiveAudio: false
    }).on(STREAM_STATUS.PUBLISHING, function (stream) {
        setStatus("#publishStatus", STREAM_STATUS.PUBLISHING);
        onPublishing(stream);
    }).on(STREAM_STATUS.UNPUBLISHED, function () {
        setStatus("#publishStatus", STREAM_STATUS.UNPUBLISHED);
        onUnpublished();
// Please add this
        publishBtnClick();
    }).on(STREAM_STATUS.FAILED, function () {
        setStatus("#publishStatus", STREAM_STATUS.FAILED);
        onUnpublished();
    }).publish();
}

This sample works in our tests.
publishBtnClick function in Two Way Streaming sample looks as follows

function publishBtnClick() {
    if (validateForm("streamerForm")) {
        $('#publishStream').prop('disabled', true);
        $(this).prop('disabled', true);
        if (Browser.isSafariWebRTC()) {
            Flashphoner.playFirstVideo(localVideo, true, PRELOADER_URL).then(function() {
                publishStream();
            });
            return;
        }
        publishStream();
    }
}

As you can see, stream should be published in Safari browser only when promise returned by playFirstVideo function is resolved.

 

[testester]

Hi Max.

Thank you for the sample source code.

After updating WebSDK to the latest build, I changed it like the sample source code, but it did not resolve. .
And I was wrong, the problem was MacOS, not iOS.

Is there any other solution?

 

[Max]

Good day.
We cannot reproduce the issue in Safari 12.1.2 on MacOS 10.14.6 with code example from the post above.
Those are the steps we've done:
1. Modified Two Way Streaming example code WCS_HOME/client2/examples/demo/streaming/two_way_streaming/two_way_streaming.js
2. Opened Two Way Streaming example page
3. Pressed Connect, the session was established
4. Pressed Publish, the stream was published
5. Pressed Stop, the stream was stopped then published again.
Please clarify your steps to reproduce issue with this code example. Also please collect the report as described here, including browser console log, and send to support@flashphoner.com, we will check.

 

[Max]

Good day.
We've reproduced the problem by steps you've sent us by email. We raised internal ticket WCS-2306 to investigate it.
You can reload page every time before stream publishing as workaround.

 

[Max]

Good day.
We've fixed the issue with video packets sending from MacOS Safari for video only streams in WebSDK build 0.5.28.2753.118. Please update WebSDK and check.