Versions Compared

Key

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

Table of Contents

Пример клиента для участника многоточечной конференции

Данный пример может использоваться для организации многоточечной видео конференции (MCU) на Web Call Server. Каждый участник такой конференции может публиковать WebRTC-поток и воспроизводить микшированный поток с аудио и видео других участников и собственным видео (без собственного аудио).

...

На скриншоте ниже участник конференции публикует поток и воспроизводит микшированный поток конференции:

Image RemovedImage Added

Код примера

Код данного примера находится на WCS-сервере по следующему пути:

...

Здесь host - адрес WCS-сервера.

Работа с кодом примера

Для разбора кода возьмем файл mcu_client.js, который находится здесь и доступен для скачивания в соответствующей сборке 2.0.5.28.2753.133.212.

1. Инициализация API

Flashphoner.init() code

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

2. Подключение к серверу

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();...
    })

3. Получение от сервера события, подтверждающего успешное соединение

ConnectionStatusEvent ESTABLISHED code

При получении данного события публикуется видеопоток этого участника

...

4. Получение граничных параметров для публикации и воспроизведения со страницы клиента

getConstraints() code

Параметр audio: true или false (в зависимости от значения и публикация, и воспроизведение будут производиться с аудио или без)

...

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

5. Публикация видеопотока

session.createStream(), stream.publish() code

При создании потока передаются следующие параметры

...

StreamStatusEvent PUBLISHING code

При получении данного события создается видеопоток для воспроизведения микшера конференции для этого участника

...

7. Воспроизведение потока конференции

session.createStream(), stream.play() code

При создании потока передаются следующие параметры

  • streamName - имя микшера, кторый который будет воспроизводиться для участника (в данном случае roomName + "-" + login + roomName, где login - имя участника)
  • remoteVideo - div-элемент, в котором будет отображаться видео
  • constraints - getConstraints() code (чтобы указать, должно ли воспроизводиться аудио)

...

StreamStatusEvent PLAYING code

Code Block
languagejs
themeRDark
    conferenceStream = session.createStream({
        ...
    }).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) {
       ...
    });

9. Остановка публикации и воспроизведения видеопотоков при отключении от конференции

stopStreamsstream.stop() code

Code Block
languagejs
themeRDark
function stopStreams() {
    if(conferenceStream) {
        conferenceStream.stop();
    }
    if(publishStream) {
        publishStream.stop();
    }
}

...

StreamStatusEvent UNPUBLISHED code

Code Block
languagejs
themeRDark
    publishStream = session.createStream({
        ...
    }).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
        ...
    }).on(STREAM_STATUS.UNPUBLISHED, function () {
        onStopped();
    }).on(STREAM_STATUS.FAILED, function (stream) {
        ...
    });

...

StreamStatusEvent STOPPED code

Code Block
languagejs
themeRDark
    conferenceStream = session.createStream({
        ...
    }).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) {
        ...
    });

Использование Flash для публикации потока

Для использования Flash необходимо указать соответствующего медиапровайдера при инициализации API

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

...