Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

1. Initialization of the API

Flashphoner.init() code

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

...

Flashphoner.createSession() code

Code Block
languagejs
themeRDark
    Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) {
        setStatus(session.status());
        //session connected, start playback
        startStreaming(session);
    }).on(SESSION_STATUS.DISCONNECTED, function () {
        setStatus(SESSION_STATUS.DISCONNECTED);
        onStopped();
    }).on(SESSION_STATUS.FAILED, function () {
        setStatus(SESSION_STATUS.FAILED);
        onStopped();
    })

...

ConnectionStatusEvent ESTABLISHED code

On receiving the event, streaming is started

Code Block
languagejs
themeRDark
    Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
        setStatus(session.status());
        //session connected, start playback
        startStreaming(session);
    }).on(SESSION_STATUS.DISCONNECTED, function(){
        ...
    }).on(SESSION_STATUS.FAILED, function(){
        ...
    });

4. Get audio publishing and playing constraints from the client page

getConstraints() code

Audio constraint: true or false (depending on the value both published and played stream will have or have not audio)

Video constraint: true (published and played streams will have video)

Code Block
languagejs
themeRDark
    var constraints = {
        audio: $("#hasAudio").is(':checked'),
        video: true
    };

5. Video streaming

session.createStream(), publish() code

When stream is created, the following parameters are passed

  • streamName - name of the stream (login + "#" + roomName in this case, where login is the name of the participant)
  • mockLocalDisplay - <div> element, required for the local camera video (will not be displayed to the user in the case)
  • constraints - getConstraints() code (in this case is used to specify if the published stream will have audio)
Code Block
languagejs
themeRDark
    publishStream = session.createStream({
        name: streamName,
        display: mockLocalDisplay,
        receiveVideo: false,
        receiveAudio: false,
        constraints: getConstraints()
    }).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
        ...
    });
    publishStream.publish();

56. Receiving the event confirming successful streaming

StreamStatusEvent PUBLISHING code

On receiving the event, a stream for playing the participant's conference mixer is created

Code Block
languagejs
themeRDark
    publishStream = session.createStream({
        ...
    }).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
        //play preview
        playStream(session);
        ...
    });

67. Playback of conference stream

session.createStream(), play() code

When stream is created, the following parameters are passed

  • streamName - name of the stream (roomName + "-" + login + roomName in this case, where login is the name of the participant)
  • remoteVideo - <div> element, in which the video will be displayed
  • constraints - getConstraints() code (in this case is used to specify if the played stream will have audio)
Code Block
languagejs
themeRDark
    conferenceStream = session.createStream({
        name: streamName,
        display: remoteVideo,
        constraints: getConstraints()
        ...
    });
    conferenceStream.play();

78. Receiving the event confirming successful playback

StreamStatusEvent PLAYING code

Code Block
languagejs
themeRDark
    conferenceStream = session.createStream({
        name: streamName,
        display: remoteVideo,
        constraints: getConstraints()
    }).on(STREAM_STATUS.PENDING, function (stream) {
        ...
    }).on(STREAM_STATUS.PLAYING, function (stream) {
        $("#preloader").hide();
        setStatus(stream.status());
        onStarted();
    }).on(STREAM_STATUS.STOPPED, function () {
        ...
    }).on(STREAM_STATUS.FAILED, function (stream) {
       ...
    });

89. Stop of playback and streaming on leaving the conference

conferenceStream.stop() and publishStream.stopstopStreams() code

Code Block
languagejs
themeRDark
    $("#joinBtn").text("Leave").off('click').click(function () {
        $(this).prop('disabled', true);
        conferenceStream.stop();
        publishStream.stop();
    }).prop('disabled', false)

...

10. Receiving the event confirming playback stop

StreamStatusEvent STOPPED code

Code Block
languagejs
themeRDark
    conferenceStream = session.createStream({
        name: streamName,
        display: remoteVideo,
        constraints: getConstraints()
    }).on(STREAM_STATUS.PENDING, function (stream) {
        ...
    }).on(STREAM_STATUS.PLAYING, function (stream) {
        ...
    }).on(STREAM_STATUS.STOPPED, function () {
        $("#preloader").hide();
        setStatus(STREAM_STATUS.STOPPED);
        onStopped();
    }).on(STREAM_STATUS.FAILED, function (stream) {
        ...
    });

1011. Receiving the event confirming successful streaming stop

StreamStatusEvent UNPUBLISHED code

Code Block
languagejs
themeRDark
    publishStream = session.createStream({
        name: streamName,
        display: mockLocalDisplay,
        receiveVideo: false,
        receiveAudio: false,
        constraints: getConstraints()
    }).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
        ...
    }).on(STREAM_STATUS.UNPUBLISHED, function () {
        onStopped();
    }).on(STREAM_STATUS.FAILED, function (stream) {
        ...
    });