WebRTC as RTMP re-publishing demo is working

Max

Max

Administrator
Staff member
As you can see, actually your bitrate is too low to have a good quality.
You can increase bitrate using the following settings:
/usr/local/FlashphonerWebCallServer/conf/flashphoner.properties
1. Switch to VP8 priority codec:
Do replace
Code: 
codecs=opus,alaw,ulaw,g729,speex16,g722,mpeg4-generic,telephone-event,h264,vp8,flv,mpv
with
Code: 
codecs=opus,alaw,ulaw,g729,speex16,g722,mpeg4-generic,telephone-event,vp8,h264,flv,mpv
2. Set min bitrate limit
Code: 
webrtc_cc_min_bitrate=300000
You can try one of these settings or both.
To apply settings you have to perform WCS restart
Code: 
service webcallserver restart
 
F

Faraz Ahmed

Member
Hi @Max We are still getting low frame rate error in Facebook

upload_2017-5-29_16-48-56.png


How we can set following default properties
audio bitrate to 128000
video resolution to 1280 X 720
video frame rate to 30

Also when i embed select device code in WebRTC as RTMP re-publishing demo then its not working
please find below js code for this demo i am using. Can you please let me know where i am wrong?
Code: 
var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var localVideo;

$(document).ready(function () {
    init_page();
});

function init_page() {
    $("#url").val(setURL());
    //init api
    try {
        Flashphoner.init({flashMediaProviderSwfLocation: base_url+'web/js/flashphoner/media-provider.swf'});
    } catch(e) {
        $("#notifyFlash").text("Your browser doesn't support Flash or WebRTC technology necessary for work of an example");
        return;
    }
    Flashphoner.getMediaDevices(null, true).then(function (list) {
        list.audio.forEach(function (device) {
            var audio = document.getElementById("audioInput");
            var i;
            var deviceInList = false;
            for (i = 0; i < audio.options.length; i++) {
                if (audio.options[i].value == device.id) {
                    deviceInList = true;
                    break;
                }
            }
            if (!deviceInList) {
                var option = document.createElement("option");
                option.text = device.label || device.id;
                option.value = device.id;
                audio.appendChild(option);
            }
        });
        list.video.forEach(function (device) {
            console.log(device);
            var video = document.getElementById("videoInput");
            var i;
            var deviceInList = false;
            for (i = 0; i < video.options.length; i++) {
                if (video.options[i].value == device.id) {
                    deviceInList = true;
                    break;
                }
            }
            if (!deviceInList) {
                var option = document.createElement("option");
                option.text = device.label || device.id;
                option.value = device.id;
                video.appendChild(option);
            }
        });
        //local displays
        localVideo = document.getElementById("localVideo");

        //set initial button callback
        onStopped();
    }).catch(function (error) {
        $("#notifyFlash").text("Failed to get media devices");
    });
}

function onStarted(publishStream) {
    $("#publishBtn").text("Stop").off('click').click(function(){
        $(this).prop('disabled', true);
        publishStream.stop();
        // Stream is stopped call ajax and enable stop live video on facebook
    }).prop('disabled', false);
}

function onStopped() {
    $("#publishBtn").text("Start").off('click').click(function(){
        // Start and push stream to facebook using webcall server
        start();
    }).prop('disabled', false);
   
}

function start() {
    var url = 'wss://35.163.225.113:8443';
    //check if we already have session
    if (Flashphoner.getSessions().length > 0) {
        var session = Flashphoner.getSessions()[0];
        if (session.getServerUrl() == url) {
            startStreaming(session);
            return;
        } else {
            //remove session DISCONNECTED and FAILED callbacks
            session.on(SESSION_STATUS.DISCONNECTED, function () {
            });
            session.on(SESSION_STATUS.FAILED, function () {
            });
            session.disconnect();
        }
    }
    else
    {
        //create session
        console.log("Create new session with url " + url);
        Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
            //session connected, start streaming
            startStreaming(session);
        }).on(SESSION_STATUS.DISCONNECTED, function(){
            setStatus(SESSION_STATUS.DISCONNECTED);
            onStopped();
        }).on(SESSION_STATUS.FAILED, function(){
            setStatus(SESSION_STATUS.FAILED);
            onStopped();
        });
    }
}

function startStreaming(session) {
    var streamName = fb_stream_name;
    var rtmpUrl = fb_rtmp_url;

    constraints = {
        audio: true,
        video: true
    };
    if (constraints.audio) {
        constraints.audio = {
            deviceId: $('#audioInput').val()
        };
        constraints.audio.bitrate = 128000;// 128Kbps
    }
    if (constraints.video) {
        constraints.video = {
            deviceId: $('#videoInput').val(),
            width: 1280,
            height: 720
        };
        constraints.video.bitrate = 3000000;// 3Mbps
        constraints.video.frameRate = 30;
    }

    session.createStream({
        name: streamName,
        display: localVideo,
        cacheLocalResources: true,
        receiveVideo: false,
        receiveAudio: false,
        constraints: constraints,
        rtmpUrl: rtmpUrl
    }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
        setStatus(STREAM_STATUS.PUBLISHING);
        onStarted(publishStream);
    }).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();
}

//show connection or local stream status
function setStatus(status) {
    var statusField = $("#status");
    statusField.text(status).removeClass();
    if (status == "PUBLISHING") {
        statusField.attr("class","text-success");
    } else if (status == "DISCONNECTED" || status == "UNPUBLISHED") {
        statusField.attr("class","text-muted");
    } else if (status == "FAILED") {
        statusField.attr("class","text-danger");
    }
}
upload_2017-5-29_16-54-58.png
 
Max

Max

Administrator
Staff member
We have tested your server with 1280x720. It works well.
Please test your stream as on this page:
https://host:8888/demo2/media-devices
webrtc-media-devices.jpg

Please check chrome://webrtc-internals

webrtc-bitrate.jpg


As you can see, from this graph,
1) Bitrate is 2.5 Mbps (googTransmitBitrate)
2) Resolution is 1280x720 (googFrameWidthSent x googFrameHeightSent)
3) Frame rate is 30 FPS (googFrameRateSent)
If you don't have similar values, especially bitrate, at least 1 Mbps, you want be able to stream to Facebook with 720p resolution because network is too poor between your PC and WCS server. Make sure you have a good network connection with your Amazon EC2 server, at least 1 Mbps.
 
Max

Max

Administrator
Staff member
If your connection to this server is really poor, you have to get server closer to your physical location to be able to pass stream 1 Mbps and more for 1280x720.
 
Max

Max

Administrator
Staff member
Also when i embed select device code in WebRTC as RTMP re-publishing demo then its not working
please find below js code for this demo i am using. Can you please let me know where i am wrong?
Click to expand...
Please zip and attach full code sample including .html and .js file
Then we will able to check why it does not work.
 
F

Faraz Ahmed

Member
Hi @Max thanks for your reply.
I appreciate your timely response.
Please see my recording video in below link.

https://www.screencast.com/t/z1OHtQVopZz

As you can see my internet connection is very high.
I have tested two demos one is Media devices and second is Webrtc as RTMP
As you can see in Webrtc as RTMP demo bit rate is too slow even i have high speed internet connection also frame rate is very low in the range of 10 to 12 you can see facebook also giving error of frame rate.
Now in other demo Media devices bit rate is improve up to 2.5 Mbps but frame rate is still 10 to 12 not 30 even i have set it to 30 also in both demos audio bit rate is very slow.
We want to develop webcam live streaming to Facebook with high quality resolution 1280 X 720 video bit rate up to 4Mbps audio bit rate 128 Kbps with codes H264/AAC.
Please help me how i can improve quality. We want to be your customer when we are satisfied 100% with trials then we will purchase license.

Thanks,
Faraz
 
Max

Max

Administrator
Staff member
Hi
You are using Amazon EC2 instance located in the USA California, Portland city
https://www.db-ip.com/35.163.225.113
I'm not sure you have a high speed upload connection to this host. Please check your upload speed with a server located in Portland.
Now in other demo Media devices bit rate is improve up to 2.5 Mbps but frame rate is still 10 to 12 not 30 even i have set it to 30 also in both demos audio bit rate is very slow.
Click to expand...
You have to check your webcam.
If you have a high bitrate (2.5M) and too low FPS, it looks like a web cam issue.
It is from your graphs. It says that your cam captures 12 FPS.

cam-12fps.jpg


So please check
1. Your network upload speed to the Portland server.
If you have a low speed, please consider relocation of your server instance to another location where you have a good upload speed.
2. Make sure you have a good web cam that supports 30 FPS encoding on 1280x720 resolution
We use cam Logitech C270 for testing without any problems.
 
Max

Max

Administrator
Staff member
Thanks @@Max i will check it what about test.zip files which i sent to you?
Click to expand...
We will check it. I will inform you once we have any progress.
 
F

Faraz Ahmed

Member
OK @Max

One thing i notice in case of media device demo bit rate is 2.5 Mbps but in case of Webrtc as RTMP demo bit rate is in the range of 200Kbps to 800Kbps
Can you please explain the reason i am testing both demos from the same internet connection.
 
Max

Max

Administrator
Staff member
Looks like a performance issue.
When you test WebRTC Media Devices demo, stream works without server-side transcoding. Published VP8, played VP8.
When you test WebRTC as RTMP demo, stream works with server side transcoding. Published VP8, re-published H.264.
So when you transcode 720p stream from VP8 to H.264, server may take 100% CPU.
Try to revert back to H.264 as priority codec:
Code: 
codecs=opus,alaw,ulaw,g729,speex16,g722,mpeg4-generic,telephone-event,h264,vp8,flv,mpv
Or add virtual CPUs for better transcoding performance.
 
Max

Max

Administrator
Staff member
Also when i embed select device code in WebRTC as RTMP re-publishing demo then its not working
please find below js code for this demo i am using. Can you please let me know where i am wrong?
Click to expand...
Your code was wrong because it was missed some dependencies and paths.
Please check two working attached archives.
1. webrtc-rtmp-php.zip is based on your code with corrected paths and dependencies.
2. webrtc-rtmp-select-camera.zip is based on our scripts
https://github.com/flashphoner/flas...es/demo/streaming/webrtc-as-rtmp-republishing
 

Attachments

F

Faraz Ahmed

Member
After that we are not able to go to dashboard we got following screen at the end we stop the complete server restart the server and the service

upload_2017-5-31_10-28-57.png
 
Max

Max

Administrator
Staff member
To fix that temporary, you can accept certificates manually:
Open page https://35.163.225.113:8443 and accept server's certificates as described here
Then try to connect again to wss://35.163.225.113:8443

To fix that permanently, you have to get SSL certificates for your domain and import the certificates to WCS server.
You can try either via
Dashboard / Security / Certificates
or
Dashboard / Security / Let's encrypt (for Amazon EC2 instance only)
Once you imported certificates you will be able to connect wss://domain:8443 and https://domain:8888
Example:
Code: 
wss://wcs.livepigeon.com:8443
https://wcs.livepigeon.com:8888
 
F

Faraz Ahmed

Member
Hi @Max,

I have imported all certificate as you mentioned.

Please check below link with the same login info
https://wcc.livepigeon.com:8888/

The problem is that when i implement webrtc demo into my project which is hosted on amazon EC2 its not work it says disconnected
Please see screen shoot and attached code.
In Facebook_Live_Video.html file please change the variables fb_stream_name and fb_rtmp_url with your RTMP url and stream then try it is it working for you.

upload_2017-6-5_15-7-47.png


Please see below logs, also its hangs the server we are not able to access the demo on https://wcc.livepigeon.com:8888/ first we need to restart the server then we can access the demo.

Code: 
[root@ip-172-31-30-160 ~]# tail -f /usr/local/FlashphonerWebCallServer/logs/server_logs/flashphoner.log
09:41:40,555 INFO                Codecs - Stun4J Message Processor AAC codec loaded, pt 107 sr 24000
09:41:40,555 INFO                Codecs - Stun4J Message Processor AAC codec loaded, pt 108 sr 32000
09:41:40,555 INFO                Codecs - Stun4J Message Processor AAC codec loaded, pt 109 sr 44100
09:41:40,555 INFO                Codecs - Stun4J Message Processor AAC codec loaded, pt 110 sr 48000
09:41:40,555 INFO                Codecs - Stun4J Message Processor load codec: vp8 priority: 9100
09:41:40,556 INFO                Codecs - Stun4J Message Processor load codec: mpv priority: 9000
09:41:40,556 INFO                Codecs - Stun4J Message Processor codecs: [opus [], PCMA [], PCMU [], G729 [A annexb:no], speex [], G722 [], mpeg4-generic [A profile-level-id:1, A mode:HBR], mpeg4-generic [A profile-level-id:1, A mode:HBR], mpeg4-generic [A profile-level-id:1, A mode:HBR], mpeg4-generic [A profile-level-id:1, A mode:HBR], mpeg4-generic [A profile-level-id:1, A mode:HBR], mpeg4-generic [A profile-level-id:1, A mode:HBR], mpeg4-generic [A profile-level-id:1, A mode:HBR], mpeg4-generic [A profile-level-id:1, A mode:HBR], mpeg4-generic [A profile-level-id:1, A mode:HBR], H264 [A packetization-mode:1, A profile-level-id:42e01f], H264 [A packetization-mode:0, A profile-level-id:42e01f], VP8 [], MPV []]
09:41:40,557 INFO        RtpVideoConfig - Stun4J Message Processor PlayerVideoResolution C 0x0, StreamerVideoResolution C 0x0
09:41:40,557 INFO       AudioSdpFactory - Stun4J Message Processor proxySession: null
09:41:40,570 INFO        RtpVideoConfig - Stun4J Message Processor PlayerVideoResolution C 0x0, StreamerVideoResolution C 0x0
^C
Code: 
[root@ip-172-31-30-160 ~]# tail -f /usr/local/FlashphonerWebCallServer/logs/flashphoner_manager.log
        at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:526)
        at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1033)
        at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:652)
        at org.apache.coyote.http11.Http11NioProtocol$Http11ConnectionHandler.process(Http11NioProtocol.java:222)
        at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1566)
        at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.run(NioEndpoint.java:1523)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
        at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
        at java.lang.Thread.run(Thread.java:745)
^C
Please help me to resolve it.


Thanks,
Faraz
 

Attachments

You must log in or register to reply here.
Top