Table of Contents |
---|
Пример клиента для участника многоточечной конференции
Данный пример может использоваться для организации многоточечной видео конференции (MCU) на Web Call Server. Каждый участник такой конференции может публиковать WebRTC-поток и воспроизводить микшированный поток с аудио и видео других участников и собственным видео (без собственного аудио).
...
На скриншоте ниже участник конференции публикует поток и воспроизводит микшированный поток конференции:
Код примера
Код данного примера находится на WCS-сервере по следующему пути:
...
Здесь host - адрес WCS-сервера.
Работа с кодом примера
Для разбора кода возьмем файл mcu_client.js, который находится здесь и доступен для скачивания в соответствующей сборке 2.0.5.28.2753.133.212.
1. Инициализация API
Flashphoner.init() code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.init({
flashMediaProviderSwfLocation: '../../../../media-provider.swf'
}); |
2. Подключение к серверу
Flashphoner.createSession() code
Code Block | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
function stopStreams() { if(conferenceStream) { conferenceStream.stop(); } if(publishStream) { publishStream.stop(); } } |
...
StreamStatusEvent UNPUBLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
Flashphoner.init({
flashMediaProviderSwfLocation: '../../../../media-provider.swf',
preferredMediaProviders: "Flash"
}); |
...