Page History

...

The script establishes connection to the WCS server and manages publishing of the WebRTC stream. In addition, the script places the test RTMP player on the webpage and passes the resulting RTMP address to it for playback.

1. Initialize API. line 14After the page is loaded, we initialize the API and pass the path to the swf file for compatibility with Flash when publishing the stream in IE and Edge browsers.

Flashphoner.init() code

Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf'});

If you don’t want to use Flash, simply do not pass the initialization parameter:

Flashphoner.init();

2. Connect to the server. line 55When the Start button is clicked, connection to the server is established.

Flashphoner.createSession() code

        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);
            $('#url').prop('disabled', false);
            onStopped();
        }).on(SESSION_STATUS.FAILED, function(){
            setStatus(SESSION_STATUS.FAILED);
            $('#url').prop('disabled', false);
            onStopped();
        });

On successful connection, the ESTABLISHED status is set, and the startStreaming function is called to publish the WebRTC video stream down the line.

3. Send WebRTC video stream. line 733. Receiving the event confirming successful connection

ConnectionStatusEvent ESTABLISHED code

session.createStream({
 name: streamName,
 display: localVideo,
 cacheLocalResources: true,
 receiveVideo: false,
 receiveAudio: false,
 rtmpUrl: rtmpUrl
  Flashphoner.createSession({urlServer: url}).on(STREAMSESSION_STATUS.PUBLISHINGESTABLISHED, function(publishStreamsession){
 setStatus(STREAM_STATUS.PUBLISHING);
 onStarted(publishStream);
 sendDataToPlayer();
           //session connected, start streaming
            startStreaming(session);
        }).on(STREAMSESSION_STATUS.UNPUBLISHEDDISCONNECTED, function(){
 setStatus(STREAM_STATUS.UNPUBLISHED);
 //enable start button
 onStopped();
            ...
        }).on(STREAMSESSION_STATUS.FAILED, function(){
 setStatus(STREAM_STATUS.FAILED);
 //enable start button
 onStopped();
 }).publish();            ...
        });

3. Send WebRTC video stream with republishing to RTMP server.

session.createStream(), publish() code

When the createStream() method is used to create the stream, aside from the standard parameters this field is also specified rtmpUrl. It contains the RTMP address of the server this stream will be republished to. The name of the republished RTMP stream is rtmp_{streamName}, where rtmp_ is the standard prefix set in
the server configuration of the WCS server, in the flashphoner.properties file.

For example, if streamName=stream1, then the resulting RTMP stream will be named rtmp_stream1The publish() method begins sending the stream to the server.

    session.createStream({
        name: streamName,
        display: localVideo,
        cacheLocalResources: true,
        receiveVideo: false,
        receiveAudio: false,
        rtmpUrl: rtmpUrl
        ...
    }).publish();

5. Receiving the event confirming successful streaming

StreamStatusEvent PUBLISHING code

    session.createStream({
        name: streamName,
        display: localVideo,
        cacheLocalResources: true,
        receiveVideo: false,
        receiveAudio: false,
        rtmpUrl: rtmpUrl
    }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
        setStatus(STREAM_STATUS.PUBLISHING);
        onStarted(publishStream);
        sendDataToPlayer();
    }).on(STREAM_STATUS.UNPUBLISHED, function(){
        ...
    }).on(STREAM_STATUS.FAILED, function(){
        ...
    }).publish();

4. Using the test RTMP player. line 108, line 127

If you redirect an RTMP stream to another RTMP server or service such as YouTube Live, you probably already know how to test your stream.
The test page has the built-in SWF player that allows playing an RTMP stream by its name and making sure it does play ok.

These two functions are used:

loadPlayer –

loadPlayer() code

This function positions the player on the page using swfobject

function loadPlayer() {
    detectFlash();
    var attributes = {};
    attributes.id = "player";
    attributes.name = "player";
    attributes.styleclass="center-block";
    var flashvars = {};
    var pathToSWF = "../../dependencies/rtmp_player/player.swf";
    var elementId = "player";
    var params = {};
    params.menu = "true";
    params.swliveconnect = "true";
    params.allowfullscreen = "true";
    params.allowscriptaccess = "always";
    params.bgcolor = "#777777";
    swfobject

...

.embedSWF(pathToSWF, elementId, "350", "400", "11.2.202", "expressInstall.swf", flashvars, params, attributes);
}

sendDataToPlayer() code
This function forms the RTMP URL for the player and passes it for playback. Then this URL is simply put to the Stream field.

function sendDataToPlayer() {
    var player = document.getElementById("player");
    var host = field("rtmpUrl")
        .replace("localhost", window.location.hostname)
        .replace("127.0.0.1", window.location.hostname);

    var rtmpStreamPrefix = "rtmp_";
    var url = host + "/" + rtmpStreamPrefix + field("streamName");
    player.setURLtoFlash(url);
}