Publisher playback video black

M

Michael

Member
We started to receive complaints from a few customers on Android and iPhone with black video when publishing. Our connection workflow is the following:

1. Broadcaster open the page, video playback is shown and it connects to Flashphoner server to create the session (Video showing)
2. Broadcaster click to start broadcasting -> the video transmission to Flashphoner server starts (Video area is black)

* The broadcaster has the option to stop and start the video broadcasting at any time. We repeat the step 2 and reuse the same session connection on step 1.

- Some of our customers started complaining this week
- 5 days ago we started to receive complaints from some Android users
- 3 days ago we started to receive complaints from some iOS users
- Nothing was changed in our system
- We were running the version 5.2.479
- We upgraded to the version 5.2.791 but the problem persists
- We can not reproduce the error. Our test Androids and iPhones works well.
 
Max

Max

Administrator
Staff member
Hello!

Please specify the following information:
  • Does a black screen appear on the publishing side? Or the viewer?
  • On which models of smartphones and in which browsers does the problem appear most often?
  • What operating system and browser do the publisher use to launch the broadcast?
  • Have you updated the version of the WebSDK for your applications?
  • When a publisher pauses video publishing, is the stream to the WCS server interrupted? Or Video Mute function is used (https://flashphoner.com/embedding-c...tream-parameters-controls/#TurningCameraOnOff)
 
M

Michael

Member
Hello

Does a black screen appear on the publishing side? Or the viewer?
Click to expand...
Publisher side.
On page load, both (android and Iphone) can see it self camera on the video tag as we call Flashphoner.getMediaAccess()
For broadcaster on android:
Once they click to start broadcast (We call session.createStream().publish()), the video tag gets just a black fill.
The stream.getStats() function show no video bytes/packages sent to server.
The viewer can not play the video.

For broadcaster on Iphone:
Once they click to start broadcast (session.createStream(stream_options).publish()), the video tag gets freeze, like a static image of the cam.
But the viewer can see the stream normally.

On which models of smartphones and in which browsers does the problem appear most often?
Click to expand...
Some cases of complaint:
Android 6.0.1
Samsung SM-J500M
Chrome 86.0.4240.99

Android 8.1.0
Samsung SM-J410G
Chrome 86.0.4240.99

Android 7.1.1
Motorola Moto G7 play
Chrome 86.0.4240.99

Android 9
Motorola Moto G6 play
Chrome 86.0.4240.75

Android 7.0
LG LG-M250
Chrome 86.0.4240.75

iOS 14.0.1
iPhone 7
Mobile Safari 14

iOS 13.3.1
iPhone 8
Mobile Safari 13.0.5

Have you updated the version of the WebSDK for your applications?
Click to expand...
We had updated the webSDK once we update the server version to 5.2.791. We did the upgrade to check if this could fix the issue, but we keep one server with 5.2.479 version, and webSDK version according with that server.

When a publisher pauses video publishing, is the stream to the WCS server interrupted? Or Video Mute function is used
Click to expand...
  • On the page load, we create a session with Flashphoner.createSession()
  • We call Flashphoner.getMediaAccess() to show the camera it self to the publisher.
  • When broadcaster wants publish, we create a stream, and publish, with publish_stream = session.createStream(stream_options).publish()
  • When broadcaster need stop the current publish stream, we call publish_stream.stop();
  • When broadcaster wants publish again, we reuse the same session created at page load. This flow:
JavaScript: 
// Check if session still exists, and is connected
if(session && session.status() == Flashphoner.constants.SESSION_STATUS.ESTABLISHED)
{
    //Verify if a publish stream was not stopped previously, and stop it:
    if(publish_stream.status() == Flashphoner.constants.STREAM_STATUS.PUBLISHING)
            publish_stream.stop();

    // here we call the Flashphoner.playFirstVideo for Iphone. I will supreess this code part, just to get cleaner this explanation
    publish_stream = session.createStream(stream_options).publish();
}
else
{
    // this calls internally this same block once the session is created with session = Flashphoner.createSession()
    createSession();
}
 
Last edited:
M

Michael

Member
Hello

Just to complement, on android issues, seems to happen more with cell phones that have lower hardware specifications.

Regards
 
M

Michael

Member
We were able to confirm the issue is happening with Android only. We found a device where we can reproduce the issue: Samsung J6+ - SM-J610G - Android 10.

We could reproduce the issue at two_way_streaming.html demo, as you can see on the print screen below:

screenshot.jpg







We can use Flashphoner.getMediaAcess(), and see the camera in the video tag before publishing the stream. The issue only happens on the stream.publish() method. If we try this hack after stream.publish(), we can see our camera on the video área:

setTimeout(function(){
navigator.mediaDevices.getUserMedia({video:true, audio:true}).then(function(stream){
player = document.querySelector('video');
player.srcObject = stream;
player.play();
});
}, 5000);

But this code does not fixes the publish stream, the viewer still can not play the video, even with Flashphoner sending STREAM_STATUS.PLAYING.
 
Max

Max

Administrator
Staff member
We reproduced the issue on Samsung device with our demo server and raised the ticket WCS-2933 to investigate and fix. Will let you know in this topic.
As workaround, use Samsung Internet Browser for stream publishing, Two Way Streaming example works in this browser.
About complaints from this post: for Apple devices please check this post, also please make sure you are using playFirstVideo() function before every publishing/playback
Code: 
function publishBtnClick() {
    if (validateForm("streamerForm")) {
        ...
        if (Browser.isSafariWebRTC()) {
            Flashphoner.playFirstVideo(localVideo, true, PRELOADER_URL).then(function() {
                publishStream();
            });
            return;
        }
        publishStream();
    }
}
 
You must log in or register to reply here.
Top