Versions Compared

Key

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

...

1. Обертка для кода

createControls() code

Функция-обертка для вызова из основной логики, ограничивает область видимости

...

2. Создание объекта controls

code

Создание объекта controls, содержащего все HTML элементы для настройки. Здесь же инициализируются таблицы для настройки публикации дорожек.

...

3. Заполнение полей модального окна входа

code

Заполнение полей модального окна входа в соответствии с текущей конфигурацией

...

4. Добавление новых аудио дорожек в объект controls

addAudioTrackRow() code

Добавление новых аудиодорожек и оповещение основного модуля

...

Запрос локального медиа через WebRTC API

code

Code Block
languagejs
themeRDark
getMedia([track]).then(function(stream){

Добавление аудио дорожки в таблицу дорожек

code

Code Block
languagejs
themeRDark
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();

Подписка на событие "click". По нажатию кнопки "Delete" дорожка останавливается, генерируется событие "ended"

code

Code Block
languagejs
themeRDark
         $('#' + 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"));
        }); 

Подписка на событие "ended" и очистка таблицы при получении данного события

code

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

Оповещение основного модуля о том, что добавлена новая дорожка

code

Code Block
languagejs
themeRDark
trackCallback({
    stream: stream,
    encodings: track.encodings
});

5. Добавление новых видео дорожек

addVideoTrackRow() code

Добавление новых видео дорожек и оповещение основного модуля, аналогично функции addAudioTrackRow.

...

6. Форматирование настроек кодирования видео

format() code

Вспомогательная функция форматирует настройки кодирования видео для их отображения в таблице

...

7. Добавление обработчика для отображения/скрытия данных дорожки

code

Добавление обработчика для тогтого, чтобы показать или спрятать данные видео дорожки

...

8. Добавление аудио дорожек в таблицу

code

Добавление всех настроенных аудио дорожек в таблицу

...

9. Добавление видео дорожек в таблицу

code

Добавление всех настроенных видео дорожек в таблицу

...

10. Отключение элементов формы

muteForm() code

Вспомогательная функция, отключающая все элементы указанной формы

...

11. Включение элементов формы

unmuteForm() code

Вспомогательная функция, включающая все элементы указанной формы

...

12. Отключение полей ввода модального окна входа

muteInput() code

Вспомогательная функция, отключающая поля ввода в модальном окне

...

13. Создание объекта конфигурации комнаты

roomConfig() code

Функция собирает объект конфигурации комнаты

...

14. Получение локальных видео дорожек

getVideoStreams() code

Функция возвращает все локальные видео дорожки

...

15. Получение локальных аудио дорожек

getAudioStreams() code

Функция возвращает все локальные аудио дорожки

...

16. Обработчик для добавления видео дорожки в таблицу

code

Подписка на событие "click" кнопки добавления дорожки. Функция добавляет новую дорожку в таблицу

...

17. Обработчик для удаления параметров кодирования видео из таблицы

code

Удаление параметров кодирования видео из таблицы

...

18. Обработчик для добавления параметров кодирования видео в таблицу

code

Добавление параметров кодирования видео в таблицу

Code Block
languagejs
themeRDark
document.getElementById("addVideoTrackEncoding").addEventListener("click", function(){
    let button = '<button class="btn btn-primary remove">Delete</button>';
    controls.tables.encodings.row.add({
        rid: controls.addVideoEncoding.rid.value,
        active: controls.addVideoEncoding.active.value,
        maxBitrate: controls.addVideoEncoding.maxBitrate.value,
        resolutionScale: controls.addVideoEncoding.resolutionScale.value,
        action: button
    }).draw();
});

19.

...

Обработчик для добавления

...

аудио дорожки в таблицу

code

Подписка на событие "click" кнопки добавления дорожки. Функция добавляет новую дорожку в таблицу

...

20. Передача callback функции новым дорожкам

code

Функция передает указанную callback функцию новым дорожкам

Code Block
languagejs
themeRDark
const onTrack = function(callback) {
    trackCallback = callback;
}

21. Экпорт функций

code

Экспорт функций для использования в основном модуле

...

22. Получение медиа потоков из WebRTC API

getMedia() code

Запрос списка локальных медиа потоков от WebRTC API

...