Skip to content

Firewall Streaming

Example of TURN server usage

The example of firewall traversal video streaming and playback using TURN server. It works in all browsers except Microsoft Legacy Edge because this browser do not support TURN over TCP.

The code of the example

The source code of the example is on WCS server by this path:

/usr/local/FlashphonerWebCallServer/client2/examples/demo/streaming/firewall-traversal-streaming/

  • firewall-traversal-streaming.css - CSS style file
  • firewall-traversal-streaming.html - the example page
  • firewall-traversal-streaming.js - script for example to work

The example may be tested at this URL:

https://host:8888/client2/examples/demo/streaming/firewall-traversal-streaming/firewall-traversal-streaming.html

where host is your WCS server address.

Analyzing the code

To analyze the code get firewall-traversal-streaming.js file version with hash ecbadc3 that can be found here and is available to download in build 2.0.212.

1. API initializing

Flashphoner.init() code

Flashphoner.init();

2. Connection to the server

Flashphoner.createSession() code

These parameters are passed to createSession() method:

  • WCS server URL
  • TURN server URL
  • TURN server user credentials
var options = {
    urlServer: url,
    mediaOptions: {
        "iceServers": [
            {
                'url': $('#urlTurnServer').val(),
                'username': $('#usernameTurnServer').val(),
                'credential': $('#credentialTurnServer').val()
            }
        ]
    }
};
if ($("#forceRelay").is(':checked')) {
    options.mediaOptions.iceTransportPolicy = "relay";
}
Flashphoner.createSession(options).on(SESSION_STATUS.ESTABLISHED, function (session) {
    ...
});

3. Receiving the event confirming successful connection

ConnectionStatusEvent ESTABLISHED code

Flashphoner.createSession(options).on(SESSION_STATUS.ESTABLISHED, function (session) {
    setStatus("#connectStatus", session.status());
    onConnected(session);
}).on(SESSION_STATUS.DISCONNECTED, function () {
    ...
}).on(SESSION_STATUS.FAILED, function () {
    ...
});

4. Video streaming

Session.createStream(), Stream.publish() code

These parameters are passed to createStream() method:

  • streamName - the stream name
  • localVideo - <div> element to display preview stream.
session.createStream({
    name: streamName,
    display: localVideo,
    cacheLocalResources: true,
    receiveVideo: false,
    receiveAudio: false
    ...
}).publish();

5.Receiving the event confirming successful streaming

StreamStatusEvent PUBLISHING code

session.createStream({
    ...
}).on(STREAM_STATUS.PUBLISHING, function (stream) {
    setStatus("#publishStatus", STREAM_STATUS.PUBLISHING);
    onPublishing(stream);
}).on(STREAM_STATUS.UNPUBLISHED, function () {
    ...
}).on(STREAM_STATUS.FAILED, function () {
    ...
}).publish();

6. Stream playback

Session.createStream(), Stream.play() code

These parameters are passed to createStream() method:

  • streamName - the stream name (including the stream published on step above)
  • remoteVideo - <div> element to display stream playback.
session.createStream({
    name: streamName,
    display: remoteVideo
    ...
}).play();

7. Receiving the event confirming successful stream playback

StreamStatusEvent PLAYING code

session.createStream({
    ...
}).on(STREAM_STATUS.PLAYING, function (stream) {
    document.getElementById(stream.id()).addEventListener('resize', function (event) {
        resizeVideo(event.target);
    });
    setStatus("#playStatus", stream.status());
    onPlaying(stream);
}).on(STREAM_STATUS.STOPPED, function () {
    ...
}).on(STREAM_STATUS.FAILED, function () {
    ...
}).play();

8. Stream playback stop

Stream.stop() code

function onPlaying(stream) {
    $("#playBtn").text("Stop").off('click').click(function () {
        $(this).prop('disabled', true);
        stream.stop();
    }).prop('disabled', false);
}

9. Receiving the event confirming successful playback stop

StreamStatusEvent STOPPED code

session.createStream({
    name: streamName,
    display: remoteVideo
}).on(STREAM_STATUS.PLAYING, function (stream) {
    ...
}).on(STREAM_STATUS.STOPPED, function () {
    setStatus("#playStatus", STREAM_STATUS.STOPPED);
    onStopped();
}).on(STREAM_STATUS.FAILED, function () {
    ...
}).play();

10. Streaming stop

Stream.stop() code

function onPublishing(stream) {
    $("#publishBtn").text("Stop").off('click').click(function () {
        $(this).prop('disabled', true);
        stream.stop();
    }).prop('disabled', false);
}

11. Receiving the event confirming successful streaming stop

StreamStatusEvent UNPUBLISHED code

session.createStream({
    ...
}).on(STREAM_STATUS.PUBLISHING, function (stream) {
    ...
}).on(STREAM_STATUS.UNPUBLISHED, function () {
    setStatus("#publishStatus", STREAM_STATUS.UNPUBLISHED);
    onUnpublished();
}).on(STREAM_STATUS.FAILED, function () {
    ...
}).publish();