playFirstVideo error

[SLM]

There's a problem with some iOS devices such as iPhone with the Flashphoner.playFirstVideo() function.

After a few comments about streams not showing up and trying to figure out the cause, it seems that the result of that particular function is a rejection which causes the stream to never start.

The standard function for WebRTC Safari users we use is this:
Flashphoner.playFirstVideo(remoteVideo, false, '/streamer/'+ffver+'/dependencies/media/preloader.mp4').then(function () {
startSession();
});

For most users this works correctly.

However sometimes the startSession() would not fire. We have adjusted the function to notify us of this:

Flashphoner.playFirstVideo(remoteVideo, false, '/streamer/'+ffver+'/dependencies/media/preloader.mp4').then(function () {
updateLog("Play first vid ok, starting session");
startSession();
}, function(error) {
updateLog("Error playing firstvideo");
});
I cannot reproduce the problem myself and most users have no problems either so it's difficult to find a solution. If I try to log the error (the error parameter) to a server script it's empty (probably a javascript object) so this doesn't help either.

I thought that may be it would be a result of not interacting with the site (immediate action) but that's not the case because displaying a play button when the promise is rejected and then executing the same function again when the user clicks on it will still result in a rejection.

current client version: 28.2753133
server: v.0.5.28.2753-5.2.566

/edit:

This debug info is also produced when this happens:
[16:29:11.420] 16:29:11 INFO webrtc - Autoplay detected! Trying to play a video with a muted sound...

Which does not work by the way because the playfirstvideo still fails. How can we configure that all streams are played without sound? We do not need the webcam sound.

 

[Max]

a problem with some iOS devices

With which iOS version?
Autoplay is enabled for the player? (Autoplay does not work when Low Power Mode is enabled.)

configure that all streams are played without sound?

Audio constraint for the played stream can be set to false (Web SDK example Media Devices)

stream = session.createStream({
    name: streamName,
    display: remoteVideo,
    constraints: {
       audio: false,
       video: true
    }
    ...
});
stream.play();

 

[SLM]

With which iOS version?

mostly 13.3.1

Autoplay is enabled for the player? (Autoplay does not work when Low Power Mode is enabled.)

Yes. Is there a way to detect this correctly?

Audio constraint for the played stream can be set to false (Web SDK example Media Devices)

stream = session.createStream({
    name: streamName,
    display: remoteVideo,
    constraints: {
       audio: false,
       video: true
    }
    ...
});
stream.play();

This is already implemented but has no effect on the playfirstvideo function. The debug log entry "INFO webrtc - Autoplay detected! Trying to play a video with a muted sound..." appears when the playfirstvideo is called and the normal stream is not yet created via createstream.

 

[Max]

Good day.

The debug log entry "INFO webrtc - Autoplay detected! Trying to play a video with a muted sound..."

This message is displayed if unmuted video cannot be played. Current autoplay policy allows only muted video to play, so playFirstVideo() tries to mute video element and play preloader again. Then, if onsuspend event is raised (that means Low Power Mode is enabled), playFirstVideo() rejects.
So the issue is Low Power Mode enabled on the phone. This can be reproduced also in Player example using the parameters

https://wcs:8444/client2/examples/demo/streaming/player/player.html?streamName=test&autoplay=true

And there's no difference for Safari if stream has audio or not, it requires video element to be muted on the page for autoplay to work.

 

[SLM]

Good day.

This message is displayed if unmuted video cannot be played. Current autoplay policy allows only muted video to play, so playFirstVideo() tries to mute video element and play preloader again. Then, if onsuspend event is raised (that means Low Power Mode is enabled), playFirstVideo() rejects.
So the issue is Low Power Mode enabled on the phone. This can be reproduced also in Player example using the parameters

https://wcs:8444/client2/examples/demo/streaming/player/player.html?streamName=test&autoplay=true

And there's no difference for Safari if stream has audio or not, it requires video element to be muted on the page for autoplay to work.

That's great, but we only want to play the streams muted, so we want to be able to have the option to set the muted tag for the playfirstvid and the stream itself by default. As well as other html5 video tags by the way.
Next, the side effect of displaying a play button on autoplay rejection is that the video is played fullscreen after clicking on it on an iPhone which is in this case not desirable because it hides the custom (extra) controls.

On another note, we also display a play button when the video is paused by the OS (when the internet connection of the mobile user is slow). When the user clicks on it we issue a document.getElementById(stream).play() command. This works on WebRTC but not on WS Player because it's not a HTML5 video element. What is the corresponding WSP command for videoelement.play() ?

 

[Max]

Good day.

we want to be able to have the option to set the muted tag for the playfirstvid and the stream itself by default. As well as other html5 video tags by the way.

You can pass your own video page element to createStream function. Let's tweak Two Way Streaming example:
1. Set video tag for player on two_way_streaming.html page

...
                <div class="text-center text-muted">Player</div>
                <div class="fp-Video">
                    <div id="remoteVideo" class="display"><video id="videoControls" controls="controls" muted=true></div>
                </div>
...

2. Pass the tag to Session.createStream() function

var videoControls;
...
function init_page() {
...
    localVideo = document.getElementById("localVideo");
    remoteVideo = document.getElementById("remoteVideo");
    videoControls = document.getElementById("videoControls");
...
}
...
function playStream() {
    var session = Flashphoner.getSessions()[0];
    var streamName = $('#playStream').val();

    session.createStream({
        name: streamName,
        display: remoteVideo,
        remoteVideo: videoControls
    }).on(STREAM_STATUS.PENDING, function (stream) {
        var video = videoControls;
        if (!video.hasListeners) {
            video.hasListeners = true;
            video.addEventListener('resize', function (event) {
                resizeVideo(event.target);
            });
        }
    ...
    }).play();

3. Comment playFirstVideo invokation because we don't need it any more

function playBtnClick() {
    if (validateForm("playerForm")) {
        $('#playStream').prop('disabled', true);
        $(this).prop('disabled', true);
        if (Flashphoner.getMediaProviders()[0] === "WSPlayer") {
            Flashphoner.playFirstSound();
//        } else if (Browser.isSafariWebRTC() || Flashphoner.getMediaProviders()[0] === "MSE") {
//            Flashphoner.playFirstVideo(remoteVideo, false, PRELOADER_URL).then(function () {
//                playStream();
//            });
//            return;
        }
        playStream();
    }
}

4. Test publishing and playback

The stream will be muted, and autoplay will work (but not in Low Power mode). Also all the controls neede can be used except rewind, because it's realtime translation.

 

[Max]

What is the corresponding WSP command for videoelement.play() ?

There's no such command, you should use stream.stop() then createStream() and stream.play() calls in this case.