Table of Contents |
---|
Пример клиента для участника многоточечной конференции
Данный пример может использоваться для организации многоточечной видео конференции (MCU) на Web Call Server. Каждый участник такой конференции может публиковать WebRTC-поток и вопроизводить воспроизводить микшированный поток с аудио и видео других участников и собственным видео (без собственного аудио).
...
Code Block | ||
---|---|---|
| ||
mixer_auto_start=true mixer_mcu_audio=true mixer_mcu_video=true |
Когда новый участние подключается к конференции, используя данный клиентПри подключении нового участника, использующего данный клиент, к конференции
- публикуется поток с видео участника и именем <participantName> + "#" + <roomName>
- этот поток добавляется к микшеру с именем <roomName> (если такой микшер еще не существует, то он создается)
- публикуется другой микшер с именем <roomName> + "-" + <participantName> + <roomName>, который содержит видео всех участников (включая данного) и аудио только от других участников, и начанается начинается воспроизведение этого микшера
На скриншоте ниже участник конференции публикует поток и воспроизводит микшированный поток конференции:
Код примера
Код данного примера находится на WCS-сервере по следующему пути:
...
Здесь host - адрес WCS-сервера.
Работа с кодом примера
Для разбора кода возьмем файл mcu_client.js с хешем ecbadc3, который находится здесь и доступен для скачивания в соответствующей сборке 2.0.5.28.2753.123212.
1. Инициализация API
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 кодOn receiving the event, streaming is startedESTABLISHED 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(){ ... }).on(SESSION_STATUS.FAILED, function(){ ... }); |
4. Get audio publishing and playing constraints from the client pageПолучение граничных параметров для публикации и воспроизведения со страницы клиента
Audio constraint: true or false (depending on the value both published and played stream will have or have not audio)
Video constraint: true (published and played streams will have videoПараметр audio: true или false (в зависимости от значения и публикация, и воспроизведение будут производиться с аудио или без)
Параметр video: true (потоки будут публиковаться и воспроизводиться с видео)
Code Block | ||||
---|---|---|---|---|
| ||||
function getConstraints() { var constraints = { audio: $("#hasAudio").is(':checked'), video: true }; return constraints; } |
5. Video streamingПубликация видеопотока
session.createStream(), stream.publish() кодWhen stream is created, the following parameters are passed code
При создании потока передаются следующие параметры
- streamName - имя потокпотока, публикуемого участником конференции (в данном случае login + "#" + roomName, где login - имя участника)
- mockLocalDisplay - div-элемент, required for the local camera video (will not be displayed to the user in the caseтребуемый для отображения видео локальной камеры (в данном случае не будет виден пользователю)
- constraints - getConstraints() код (in this case is used to specify if the published stream will have audio code (чтобы указать, должна ли публикация производиться с аудио)
Code Block | ||||
---|---|---|---|---|
| ||||
publishStream = session.createStream({ name: streamName, display: mockLocalDisplay, receiveVideo: false, receiveAudio: false, constraints: getConstraints() }).on(STREAM_STATUS.PUBLISHING, function (publishStream) { ... }); publishStream.publish(); |
6. Receiving the event confirming successful streamingПолучение от сервера события, подтверждающего успешную публикацию потока
StreamStatusEvent PUBLISHING кодOn receiving the event, a stream for playing the participant's conference mixer is createdcode
При получении данного события создается видеопоток для воспроизведения микшера конференции для этого участника
Code Block | ||||
---|---|---|---|---|
| ||||
publishStream = session.createStream({ ... }).on(STREAM_STATUS.PUBLISHING, function (publishStream) { //play preview playStream(session); ... }); |
7. Воспроизведение потока конференццииконференции
session.createStream(), stream.play() кодWhen stream is created, the following parameters are passed code
При создании потока передаются следующие параметры
- streamName - имя микшера, кторый который будет воспроизводиться для участника (в данном случае roomName + "-" + login + roomName, где login - имя участника)
- remoteVideo - div-элемент, в котором будет отображаться видео
- constraints - getConstraints() код (in this case is used to specify if the played stream will have audio code (чтобы указать, должно ли воспроизводиться аудио)
Code Block | ||||
---|---|---|---|---|
| ||||
conferenceStream = session.createStream({ name: streamName, display: remoteVideo, constraints: getConstraints() ... }); conferenceStream.play(); |
8. Receiving the event confirming successful playbackПолучение от сервера события, подтверждающего воспроизведение потока
StreamStatusEvent PLAYING PLAYING code
Code Block | ||||
---|---|---|---|---|
| ||||
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. Остановка публикации и воспроизведения видеопотоков при отключении от конференции
stopStreamsstream.stop() код code
Code Block | ||||
---|---|---|---|---|
| ||||
function stopStreams() { if(conferenceStream) { conferenceStream.stop(); } if(publishStream) { publishStream.stop(); } } |
10. Receiving the event confirming successful streaming stopПолучение от сервера события, подтверждающего остановку публикации
StreamStatusEvent UNPUBLISHED код code
Code Block | ||||
---|---|---|---|---|
| ||||
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) { ... }); |
11. Receiving the event confirming playback stopПолучение от сервера события, подтверждающего остановку воспроизведения
StreamStatusEvent STOPPED код code
Code Block | ||||
---|---|---|---|---|
| ||||
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) { ... }); |