screen sharing and re-publish error

burak guder

Member
I using rtmp-re-publish for screen share but i am losing data.

FFMPEG OUT :
Bash:
Input #0, flv, from 'rtmp://******.com/live/rtmp_rtmp_333_share':
  Duration: N/A, start: 325.942000, bitrate: N/A
    Stream #0:0: Data: none
    Stream #0:1: Video: h264 (Constrained Baseline), yuv420p(progressive), 1280x692, 1k tbr, 1k tbn
Output #0, flv, to 'rtmp://*******:9099/app/test':
  Metadata:
    encoder         : Lavf58.29.100
    Stream #0:0: Video: h264 (Constrained Baseline) ([7][0][0][0] / 0x0007), yuv420p(progressive), 1280x692, q=2-31, 1k tbr, 1k tbn, 1k tbc
Stream mapping:
  Stream #0:1 -> #0:0 (copy)
Press [q] to stop, [?] for help
av_interleaved_write_frame(): Broken pipeB time=00:00:13.72 bitrate= 185.4kbits/s speed=   1x   
[flv @ 0x560c8f3a7d40] Failed to update header with correct duration.
[flv @ 0x560c8f3a7d40] Failed to update header with correct filesize.
Error writing trailer of rtmp://**********:9099/app/test: Broken pipe
frame=  284 fps= 21 q=-1.0 Lsize=     311kB time=00:00:13.74 bitrate= 185.1kbits/s speed=   1x   
video:305kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 1.941246%
Conversion failed!

flashphoner code :;


JavaScript:
/*******  scream share  ****************/

function onExtensionAvailable() {
        localVideoShare = document.getElementById("localVideoShare");
        onStoppedShare();
    }



 function onStartedShare(publishStream) {
     console.log("BUTTON : onStartedShare");
        $("#screensharebutton").off('click').click(function(){
            $(this).prop('disabled', true);
            publishStream.stop();
          
            $("#screensharebutton").css("color", "#212121");
        }).prop('disabled', false);
        //$('#mediaSource').prop('disabled', true);
    }

    function onStoppedShare() {
        console.log("BUTTON : onStoppedShare");
        $("#screensharebutton").off('click').click(function(){
            if (validateFormShare()) {
                //muteInputs();
                $(this).prop('disabled', true);
                startShare();
                $("#screensharebutton").css("color", "#ff2727");
                //Share_Session.disconnect();
            }
        }).prop('disabled', false);
        //$('#mediaSource').prop('disabled', false);
        //unmuteInputs();
        
    }

    function startShare() {
        //check if we already have session
        //var url = googleWS;
        //check if we already have session
        console.log("startShare ");
        if (Flashphoner.getSessions().length > 0) {
            var session = Flashphoner.getSessions()[0];
            if (session.getServerUrl() == url) {
                startStreamingShare(session);
                console.log("startStreamingShare ");
                return;
            } else {
                //remove session DISCONNECTED and FAILED callbacks
                session.on(SESSION_STATUS.DISCONNECTED, function(){});
                session.on(SESSION_STATUS.FAILED, function(){});
                console.log("remove session ");
                //session.disconnect();
            }
        }

        //console.log("Create new session with url " + url);
        Flashphoner.createSession({urlServer: googleSWS}).on(SESSION_STATUS.ESTABLISHED, function(session){
            //session connected, start streaming
            startStreamingShare(session);
            Share_Session = session;
        }).on(SESSION_STATUS.DISCONNECTED, function(){
            setStatus2(SESSION_STATUS.DISCONNECTED);
            onStoppedSahere();
            $("#screensharebutton").css("color", "#212121");
        }).on(SESSION_STATUS.FAILED, function(){
            setStatus2(SESSION_STATUS.FAILED);
            onStoppedSahere();
            $("#screensharebutton").css("color", "#212121");
        });

    }

    function startStreamingShare(session) {
        //var streamName = field("url").split('/')[3];
        console.log("Share stream name : ");
        var constraints = {
            video: {
                width: 1280,
                height: 720,
                //WCS-2014. fixed window/tab sharing
                frameRate: 30
            }
        };
        
        constraints.video.type = "screen";
        if ($("#woChromeExtension").prop('checked')) {
            constraints.video.withoutExtension = true;
        }
        if (Browser.isFirefox()){
            constraints.video.mediaSource = $('#mediaSource').val();
        }
        session.createStream({
            name: googleID+"_share",
            display: localVideoShare,
            constraints: constraints,
            rtmpUrl: googleServer
        }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
            /*
             * User can stop sharing screen capture using Chrome "stop" button.
             * Catch onended video track event and stop publishing.
             */
            document.getElementById(publishStream.id()).srcObject.getVideoTracks()[0].onended = function (e) {
                publishStream.stop();
            };
            document.getElementById(publishStream.id()).addEventListener('resize', function(event){
                resizeVideo(event.target);
            });
            console.log("OnstartedShare button active");
            setStatus2(STREAM_STATUS.PUBLISHING);
            onStartedShare(publishStream);
            
          
        }).on(STREAM_STATUS.UNPUBLISHED, function(){
            setStatus2(STREAM_STATUS.UNPUBLISHED);
            //enable start button
            onStoppedShare();
            $("#screensharebutton").css("color", "#212121");
        }).on(STREAM_STATUS.FAILED, function(stream){
            setStatus2(STREAM_STATUS.FAILED, stream);
            //enable start button
            onStoppedShare();
            $("#screensharebutton").css("color", "#212121");
        }).publish();
    }

    //show connection or local stream status
    function setStatus2(status, stream) {
        var statusField = $("#status2");
        var infoField = $("#info");
        statusField.text(status).removeClass();
      

        if (status == "PUBLISHING") {
             statusField.html('<span class="label label-success">Paylaşıldı</span>');
         } else if (status == "DISCONNECTED" || status == "UNPUBLISHED") {
             statusField.html('<span class="label label-warning">Durduruldu</span>');
             //statusField.attr("class","text-muted");
         } else if (status == "FAILED") {
             statusField.html('<span class="label label-danger">Paylaşılamıyor</span>');
         }

        
    }

    //install extension
    function installExtension() {
        if (Browser.isChrome()) {
            window.open("https://chrome.google.com/webstore/detail/flashphoner-screen-sharin/nlbaajplpmleofphigmgaifhoikjmbkg");
        } else if (Browser.isFirefox()) {
            var params = {
                "Flashphoner Screen Sharing": { URL: "../../dependencies/screen-sharing/firefox-extension/flashphoner_screen_sharing-0.0.10-fx.xpi",
                    IconURL: "../../dependencies/screen-sharing/firefox-extension/icon.png",
                    Hash: "sha1:96699c6536de455cdc5c7705f5b24fae28931605",
                    toString: function () { return this.URL; }
                }
            };
            InstallTrigger.install(params);
        }
    }

    function installFromMarket() {
        if (Browser.isChrome()) {
            var url = "https://chrome.google.com/webstore/detail/flashphoner-screen-sharin/nlbaajplpmleofphigmgaifhoikjmbkg";
            window.open(url, '_blank');
        }
    }

    function inIframe () {
        try {
            return window.self !== window.top;
        } catch (e) {
            return true;
        }
    }

    function muteInputs() {
        $(":input").each(function() {
           $(this).prop('disabled',true);
        });
    }

    function unmuteInputs() {
        $(":input").each(function() {
            if($(this).attr('id') == 'woChromeExtension' && extensionNotInstalled) {
                return;
            }
            $(this).prop('disabled',false);
        });
    }


    function validateFormShare() {
        var valid = true;
        /*
        $(':text').each(function(){
            if (!$(this).val()) {
                highlightInput($(this));
                valid = false;
            } else {
                var numericFields = ['fps', 'width', 'height'];
                if (numericFields.indexOf(this.id) != -1 && !(parseInt($(this).val()) > 0)) {
                    highlightInput($(this));
                    valid = false;
                } else {
                    removeHighlight($(this));
                }
            }
        });
        */
        return valid;

        function highlightInput(input) {
            input.closest('.form-group').addClass("has-error");
        }
        function removeHighlight(input) {
            input.closest('.form-group').removeClass("has-error");
        }
    }

/********** END *************\
 

Max

Administrator
Staff member
Good day.
We cannot reproduce the issue with the latest WCs and WebSDK builds. So please update to latest WCS build from this page.
This can be probably network issue between WCS and RTMP server to republish, the channel bandwidth is not enough for HD stream for example. Please try to use Chrome extension for screen sharing to set lower publishing resolution (without extension a stream will always be published in full screen resolution). Also please check if the issue persists while republishing screen share stream to localhost.
If nothing helps, please collect a report as described here including client debug logs, and sed using this link, we will check.
 

burak guder

Member
Hi

I observed some situations on the system

Webcam Flashphoner :

JavaScript:
session.createStream({
         name: googleID+"_teacher",
         display: localVideo,
         cacheLocalResources: true,
         receiveVideo: false,
         receiveAudio: false,
         rtmpUrl: googleServer
     }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
          console.log("publish start");
          onMediaPublished(publishStream);
          onStarted(publishStream);
         setStatus(STREAM_STATUS.PUBLISHING);
       
         //sendDataToPlayer();
       
     }).on(STREAM_STATUS.UNPUBLISHED, function(){
         setStatus(STREAM_STATUS.UNPUBLISHED);
         //enable start button
         onStopped();
     }).on(STREAM_STATUS.FAILED, function(){
         setStatus(STREAM_STATUS.FAILED);
         //enable start button
         onStopped();
     }).publish();

Screen share :


JavaScript:
        var constraints = {
                audio: false,
                video: {
                width: parseInt(320),
                height: parseInt(240),
                frameRate: parseInt(30),
                type: "screen"
                }
                };
       
       
        if (Browser.isFirefox()){
            constraints.video.mediaSource = $('#mediaSource').val();
        }
        session.createStream({
            name: googleID+"_share",
            display: localVideoShare,
            constraints: constraints,
            rtmpUrl: googleServer,
            stripCodecs: "h264,H264"
        }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
            /*
             * User can stop sharing screen capture using Chrome "stop" button.
             * Catch onended video track event and stop publishing.
             */
            document.getElementById(publishStream.id()).srcObject.getVideoTracks()[0].onended = function (e) {
                publishStream.stop();
            };
            document.getElementById(publishStream.id()).addEventListener('resize', function(event){
                resizeVideo(event.target);
            });
            console.log("OnstartedShare button active");
            setStatus2(STREAM_STATUS.PUBLISHING);
            onStartedShare(publishStream);
           
         
        }).on(STREAM_STATUS.UNPUBLISHED, function(){
            setStatus2(STREAM_STATUS.UNPUBLISHED);
            //enable start button
            onStoppedShare();
            $("#screensharebutton").css("color", "#212121");
        }).on(STREAM_STATUS.FAILED, function(stream){
            setStatus2(STREAM_STATUS.FAILED, stream);
            //enable start button
            onStoppedShare();
            $("#screensharebutton").css("color", "#212121");
        }).publish();

not working on application sharing but but chrome tab sharing is working
Another situation I noticed for video and screen sharing is that frame rate values do not come


Screen Share :
CSS:
[meta] => Array
        (
          [video] => Array
              (
                  [width] => 320
                  [height] => 174
                  [frame_rate] => 0
                  [codec] => H264
                  [profile] => Baseline
                  [compat] => 192
                  [level] => 2.1
               )
                [audio] => Array  ( )
            )
Webcam :

CSS:
[meta] => Array
                                (
                                    [video] => Array
                                        (
                                            [width] => 320
                                            [height] => 240
                                            [frame_rate] => 0
                                            [codec] => H264
                                            [profile] => Baseline
                                            [compat] => 192
                                            [level] => 2.1
                                        )

                                    [audio] => Array
                                        (
                                            [codec] => AAC
                                            [profile] => LC
                                            [channels] => 1
                                            [sample_rate] => 44100
                                        )

                                )
I did the following on your answer

1-) Update FlashPhoner

2-) I added the new chrome plugin to the market

in addition
can i put screen sharing into canvas?

JavaScript:
function createCanvasStream() {
    var canvasContext = canvas.getContext("2d");
    var canvasStream = canvas.captureStream(30);
    mockVideoElement = document.createElement("video");
    mockVideoElement.src = '../../dependencies/media/test_movie.mp4';
    mockVideoElement.loop = true;
    mockVideoElement.muted = true;
    mockVideoElement.addEventListener("play", function () {
        var $this = this;
        (function loop() {
            if (!$this.paused && !$this.ended) {
                canvasContext.drawImage($this, 0, 0);
                setTimeout(loop, 1000 / 30); // drawing at 30fps
            }
        })();
    }, 0);
    if (!$("#sendVideo").is(':checked')) {
        canvasStream.removeTrack(canvasStream.getVideoTracks()[0]);
    }
    mockVideoElement.play();
    if ($("#sendAudio").is(':checked')) {
        mockVideoElement.muted = false;
        try {
            var audioContext = new (window.AudioContext || window.webkitAudioContext)();
        } catch (e) {
            console.warn("Failed to create audio context");
        }
        var source = audioContext.createMediaElementSource(mockVideoElement);
        var destination = audioContext.createMediaStreamDestination();
        source.connect(destination);
        canvasStream.addTrack(destination.stream.getAudioTracks()[0]);
    }
    return canvasStream;
}
how should i edit this code
 
Last edited:

burak guder

Member
I can't get the auto-generated video publish object so i can't transfer images into canvas


JavaScript:
mockVideoElementForID = document.getElementById("localVideoShare");
    mockVideoElement_get = mockVideoElementForID.getElementsByTagName("video")[0].id;
     console.log("ID : ");
     console.log(mockVideoElement_get);
    //mockVideoElement.src = '<?php echo PATHVIEW;?>/client2/examples/demo/dependencies/media/test_movie.mp4';
    //mockVideoElement.loop = true;
    //mockVideoElement.muted = true;
    mockVideoElement = document.getElementById(""+mockVideoElement_get+"");
    console.log(mockVideoElement);
    mockVideoElement.addEventListener("play", function () {
        var $this = this;
        (function loop() {
            if (!$this.paused && !$this.ended) {
                canvasContext.drawImage($this, 0, 0);
                setTimeout(loop, 1000 / 30); // drawing at 30fps
            }
        })();
    }, 0);
 

burak guder

Member
Can I fix the quality in screen sharing?


var constraints = {
audio: false,
video: {
width: parseInt(400),
height: parseInt(280),
minBitrate : parseInt(300),
maxBitrate : parseInt(300),
frameRate: parseInt(15),
"x-google-max-bitrate":300,
type: "screen"
}
};
//constraints.video.withoutExtension = true;


are these settings correct ?
 

Max

Administrator
Staff member
not working on application sharing but but chrome tab sharing is working
This is an ancient issue which was fixed. Please update to latest WCS build and Web SDK build
Another situation I noticed for video and screen sharing is that frame rate values do not come
If the issue persists in latest build, please collect a report as described here including client debug logs, and sed using this link, we will check.
can i put screen sharing into canvas?
You can do the folowing:
1. Play the screen sharing stream from server
Code:
        var previewVideo;
        session.createStream({
            name: streamName,
            display: remoteVideo
        }).on(STREAM_STATUS.PLAYING, function(previewStream){
            previewVideo = document.getElementById(previewStream.id());
            previewVideo.addEventListener('resize', function(event){
                resizeVideo(event.target);
            });
            //enable stop button
            onStarted(publishStream, previewStream);
            ...
        }).play();
2. Use previewVideo element as the source for canvas capturing
Code:
var videoStream = previewVideo.captureStream(30);
publishCanvasStream = session.createStream({
    name: streamName,
    display: localVideo,
    constraints: {
        customStream: videoStream
    },
});
publishCanvasStream.publish();
Please see details here
var constraints = {
audio: false,
video: {
width: parseInt(400),
height: parseInt(280),
minBitrate : parseInt(300),
maxBitrate : parseInt(300),
frameRate: parseInt(15),
"x-google-max-bitrate":300,
type: "screen"
}
};
There's no such constraint x-google-max-bitrate. Please see this doc about raising bitrate via SDP parameters replacement.
 

burak guder

Member
This is an ancient issue which was fixed. Please update to latest WCS build and Web SDK build
application sharing is definitely not re-publishing.
I made all the updates. re-publishing works for chrome tab but screen sharing does not work.

I use nginx as an RTMP server and It works fine when I post from OBS program


Crome TAB sharing is sending this to the server:

JSON:
[meta] => Array
                        (
                            [video] => Array
                                (
                                    [width] => 400
                                    [height] => 192
                                    [frame_rate] => 0
                                    [codec] => H264
                                    [profile] => Baseline
                                    [compat] => 192
                                    [level] => 3.1
                                )

                            [audio] => Array
                                (
                                    [codec] => AAC
                                    [profile] => LC
                                    [channels] => 1
                                    [sample_rate] => 44100
                                )

                        )
screen sharing is sending this to the server:


JSON:
[meta] => Array
                        (
                            [video] => Array
                                (
                                    [width] => 400
                                    [height] => 210
                                    [frame_rate] => 0
                                    [codec] => H264
                                    [profile] => Baseline
                                    [compat] => 192
                                    [level] => 3.1
                                )

                            [audio] => Array
                                (
                                )

                        )


stream cannot be sent properly when no sound data is received

I lowered the quality but there are always interruptions in screen sharing sending

I couldn't find any log related to re-publishing in any of the log files

If there is no sound codec, can we add noise to the video?


I sent the codes in the attachment.


Please help. I don't want to change the structure because of the screen sharing problem because it will take me a lot of time
 

Attachments

Last edited:
Top