Пример видеочата с отображением экрана
Данный пример может использоваться для видеочата между двумя участниками на Web Call Server с отображением экрана одного из участников.
Участник видеочата может публиковать следующие типы потоков
...
WebRTC поток с веб-камеры и одновременно с этим WebRTC поток с экрана или из окна приложения
Пример окна клиента, публикующего свой экран в браузере Chrome:
...
Пример окна клиента, получающего поток с экрана в браузере Chrome
Настройка расширения для публикации экрана браузера Chrome описана в примере Screen Sharing.
Код примера
Код данного примера находится на WCS-сервере по следующему пути:
...
Здесь host - адрес WCS-сервера.
Работа с кодом примера
Для разбора кода возьмем версию файла video-chat-and-screen-sharing.js с хешем 66cc39335a4234, которая находится здесь и доступна для скачивания в соответствующей сборке 2.0.5.28.2753.133177.
1. Инициализация API.
Flashphoner.init() code
Code Block | ||||
---|---|---|---|---|
| ||||
try { Flashphoner.init({); } catch(e) { flashMediaProviderSwfLocation: '../../../../media-provider.swf', screenSharingExtensionId: extensionId $("#notifyFlash").text("Your browser doesn't support WebRTC technology needed for this example"); return; }); |
2. Подключение к серверу.
Flashphoner.roomApi.connect() code
Code Block | ||||
---|---|---|---|---|
| ||||
connection = Flashphoner.roomApi.connect({urlServer: url, username: username}).on(SESSION_STATUS.FAILED, function(session){ setStatus('#status', session.status()); onLeft(); }).on(SESSION_STATUS.DISCONNECTED, function(session) { setStatus('#status', session.status()); onLeft(); }).on(SESSION_STATUS.ESTABLISHED, function(session) { setStatus('#status', session.status()); joinRoom(); }); |
...
ConnectionStatusEvent ESTABLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
connection = Flashphoner.roomApi.connect({urlServer: url, username: username}).on(SESSION_STATUS.FAILED, function(session){ ... }).on(SESSION_STATUS.DISCONNECTED, function(session) { ... }).on(SESSION_STATUS.ESTABLISHED, function(session) { setStatus('#status', session.status()); joinRoom(); }); |
4. Присоединение к комнате.
connection.join() code
При присоединении передается имя "комнаты" конференции (берется из параметра в URL страницы клиента, или генерируется случайное имя).
...
5. Получение от сервера события, описывающего статус комнаты
RoomStatusEvent STATE code
При получении данного события:
...
6. Публикация видеопотока с экрана.
room.publish() code
При публикации передаются параметры:
...
Code Block | ||||
---|---|---|---|---|
| ||||
var constraints = { video: { width: parseInt($('#width').val()), height: parseInt($('#height').val()), frameRate: parseInt($('#fps').val()), } withoutExtension: true }, audio: $("#useMic").prop('checked') }; constraints.video.type = "screen"; if (Browser.isFirefox()){ constraints.video.mediaSource = "screen"; } room.publish({ display: document.getElementById("preview"), constraints: constraints, name: "screenShare", cacheLocalResources: false ... }); |
7. Получение от сервера события, сигнализирующего о присоединении пользователя к чат-комнате
RoomStatusEvent JOINED code
Code Block | ||||
---|---|---|---|---|
| ||||
connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){ ... }).on(ROOM_EVENT.JOINED, function(participant){ installParticipant(participant); addMessage(participant.name(), "joined"); }).on(ROOM_EVENT.LEFT, function(participant){ ... }).on(ROOM_EVENT.PUBLISHED, function(participant){ ... }).on(ROOM_EVENT.FAILED, function(room, info){ ... }).on(ROOM_EVENT.MESSAGE, function(message){ ... }); |
...
RoomStatusEvent PUBLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){ ... }).on(ROOM_EVENT.JOINED, function(participant){ ... }).on(ROOM_EVENT.LEFT, function(participant){ ... }).on(ROOM_EVENT.PUBLISHED, function(participant){ playParticipantsStream(participant); }).on(ROOM_EVENT.FAILED, function(room, info){ ... }).on(ROOM_EVENT.MESSAGE, function(message){ ... }); |
9. Воспроизведение видеопотока от другого участника
participant.play() code
Параметром передается div-элемент, в котором будет отображаться видео, в зависимости от источника - веб-камера или экран
...
10. Остановка публикации видеопотока.
stream.stop() code
Code Block | ||||
---|---|---|---|---|
| ||||
function onMediaPublished(stream) { $("#localStopBtn").text("Stop").off('click').click(function()room.publish(options).on(STREAM_STATUS.FAILED, function (stream) { $(this).prop('disabled', true);... }).on(STREAM_STATUS.PUBLISHING, function (stream) { stream.stop();/* }).prop('disabled', false); ... } |
11. Получение от сервера события, подтверждающего остановку публикации.
StreamStatusEvent UNPUBLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
room.publish({ * User can stop sharing screen capture using Chrome "stop" button. display: document.getElementById("preview"), constraints: constraints, * Catch onended video track event and stop publishing. name: "screenShare", */ document.getElementById(stream.id()).srcObject.getVideoTracks()[0].onended = function (e) { cacheLocalResources: false stream.stop(); }; ... }).on(STREAM_STATUS.UNPUBLISHED, function(stream) { ... }); |
11. Получение от сервера события, подтверждающего остановку публикации.
StreamStatusEvent UNPUBLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
room.publish(options).on(STREAM_STATUS.FAILED, function (stream) {
...
}).on(STREAM_STATUS.PUBLISHING, function (stream) {
...
}).on(STREAM_STATUS.UNPUBLISHED, function(stream) {
onStopSharing();
}); |
12. Выход из комнаты чата.
room.leave() code
Code Block | ||||
---|---|---|---|---|
| ||||
function onJoined(room) { $("#joinBtn").text("Leave").off('click').click(function(){ $(this).prop('disabled', true); room.leave().then(onLeft, onLeft); }).prop('disabled', false); ... } |