...

1. Wrapper function

createControls() code

Wrapper function which keeps controls inside the closure.

...

2. Create controls object

code

Create controls object which will hold all the html handles. Also initialize tables for displaying local tracks configuration.

...

3. Fill entrance modal window fields

code

Populate entrance modal with provided config

...

4. Add new audio tracks to controls

addAudioTrackRow() code

Function that will add new audio tracks to controls and notify main script.

...

Request local media from the WebRTC API

code

getMedia([track]).then(function(stream){

Add track to the audio tracks table

code

let button = '<button id="' + stream.id + '-button" class="btn btn-primary">Delete</button>';
const row = controls.tables.audio.row.add({
    source: track.source,
    channels: track.channels,
    action: button,
    stream: stream
}).node();
controls.tables.audio.draw();

Subscribe to "click" event. Once "Delete" button is clicked stop the track and dispatch "ended" event

code

         $('#' + stream.id + "-button").on('click', function(){
            //terminate stream
            console.log("terminate stream " + stream.id);
            let track = stream.getAudioTracks()[0];
            track.stop();
            track.dispatchEvent(new Event("ended"));
        }); 

Subscribe to track's "ended" event and clean the table once track is ended

code

stream.getTracks()[0].onended = function() {
    controls.tables.audio.row(row).remove().draw();
}

Notify main script we have a new local track

code

trackCallback({
    stream: stream,
    encodings: track.encodings
});

5. Add new video tracks to controls

addVideoTrackRow() code

Function that will add new video tracks to controls and notify main script. This is the same as addAudioTrackRow function except it adds video.

...

6. Format video encodings

format() code

Helper function  to format video encodings so we can display them in the table nicely

...

7. Add handler to display/hide track details

code

Add open and close handler for video tracks details

...

8. Add audio tracks to the table

code

Add all configured audio tracks to the table

...

9. Add video tracks to the table

code

Add all configured video tracks to the table

config.media.video.tracks.forEach(function(track){
    addVideoTrackRow(track);
})

10. Mute forms

muteForm() code

Define helper function for muting forms

...

11. Unmute forms

unmuteForm() code

Define helper function for unmuting forms

...

12. Mute entrance modal window inputs

muteInput() code

Define function that mutes entrance inputs

...

13. Create room configuration object

roomConfig() code

Define function that will assemble room config

...

14. Get local video tracks

getVideoStreams() code

Define function that will return all available local video tracks

...

16. Handler to add video track to the table

code

Subscribe to "click" event of add video track button. This function will parse input and add new track to the table

...

17. Handler to remove encoding from the table

code

Add ability to remove encodings from the encodings table

...

18. Handler to add encoding to the table

code

Subscribe to "click" event of add encoding button. This function will parse input and add a new encoding to the encodings table

...

19. Handler to add audio track to the table

code

Subscribe to "click" event of add audio track button. This function will parse input and add new track to the table

...

20. Pass callback function to new tracks

code

Define function that will help to pass the callback function for the new tracks

const onTrack = function(callback) {
    trackCallback = callback;
}

21. Export functions

code

Export functions for the script

...

22. Get media streams from WebRTC API

getMedia() code

Requests local media streams from the WebRTC API.

...