Versions Compared

Key

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

...

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

1. Инициализация 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();
    })

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

ConnectionStatusEvent ESTABLISHED кодESTABLISHED code

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

...

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

getConstraints() кодcode

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

...

session.createStream(), publish() код code

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

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

...

StreamStatusEvent PUBLISHING кодcode

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

...

session.createStream(), play() код code

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

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

...

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

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

stopStreams() код code

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

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

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

...

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

...