Table of Contents |
---|
Пример вебфона для видеозвонков
Код примера
Код данного примера находится на WCS-сервере по следующему пути:
...
Здесь host - адрес WCS-сервера.
Работа с кодом примера
Для разбора кода возьмем версию файла phone-video.js с хешем e0b7205 ecbadc3, которая находится здесь и доступна для скачивания в соответствующей сборке 2.0.5.28.2753.136212.
1. Инициализация API.
Flashphoner.init() code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf', mediaProvidersReadyCallback: function(mediaProviders) { //hide remote video if current media provider is Flash if (mediaProviders[0] == "Flash") { $("#remoteVideoWrapper").hide(); $("#localVideoWrapper").attr('class', 'fp-remoteVideo'); } }, screenSharingExtensionId: extensionId }); |
2. Подключение к серверу.
Flashphoner.createSession() code
Методу createSession() передается объект с параметрами для подключения
...
ConnectionStatusEvent ESTABLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session){ setStatus("#regStatus", SESSION_STATUS.ESTABLISHED); onConnected(session); if (!registerRequired) { disableOutgoing(false); } }).on(SESSION_STATUS.REGISTERED, function(session){ ... }).on(SESSION_STATUS.DISCONNECTED, function(){ ... }).on(SESSION_STATUS.FAILED, function(){ ... }).on(SESSION_STATUS.INCOMING_CALL, function(call){ ... }); |
...
ConnectionStatusEvent REGISTERED code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session){ ... }).on(SESSION_STATUS.REGISTERED, function(session){ setStatus("#regStatus", SESSION_STATUS.REGISTERED); onConnected(session); if (registerRequired) { disableOutgoing(false); } }).on(SESSION_STATUS.DISCONNECTED, function(){ ... }).on(SESSION_STATUS.FAILED, function(){ ... }).on(SESSION_STATUS.INCOMING_CALL, function(call){ ... }); |
...
ConnectionStatusEvent INCOMING_CALL code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session){ ... }).on(SESSION_STATUS.REGISTERED, function(session){ ... }).on(SESSION_STATUS.DISCONNECTED, function(){ ... }).on(SESSION_STATUS.FAILED, function(){ ... }).on(SESSION_STATUS.INCOMING_CALL, function(call){ call.on(CALL_STATUS.RING, function(){ ... }); onIncomingCall(call); }); |
...
session.createCall(), call.call() code
При создании звонка в метод передаются следующие параметры:
...
Code Block | ||||
---|---|---|---|---|
| ||||
var outCall = session.createCall({ callee: $("#callee").val(), visibleName: $("#sipLogin").val(), localVideoDisplay: localVideo, remoteVideoDisplay: remoteVideo, localVideoDisplay: localVideo, constraints: constraints, sdpHook: rewriteSdp, stripCodecs: "SILK" ... }); outCall.call(); |
7. Ответ на входящий звонок.
call.answer() code
Методу передается объект с опциями для ответа
...
Code Block | ||||
---|---|---|---|---|
| ||||
$("#answerBtn").off('click').click(function(){ $(this).prop('disabled', true); inCall.answer({ localVideoDisplay: localVideo, localVideoDisplay remoteVideoDisplay: localVideoremoteVideo, constraints: constraints, remoteVideoDisplaysdpHook: remoteVideo rewriteSdp, stripCodecs: "SILK" }); showAnswered(); }).prop('disabled', false); |
8. Завершение исходящего звонка.
call.hangup() code
Code Block | ||||
---|---|---|---|---|
| ||||
$("#callBtn").text("Hangup").off('click').click(function(){ $(this).prop('disabled', true); outCall.hangup(); }).prop('disabled', false); |
9. Завершение входящего звонка.
call.hangup() code
Code Block | ||||
---|---|---|---|---|
| ||||
$("#hangupBtn").off('click').click(function(){ $(this).prop('disabled', true); $("#answerBtn").prop('disabled', true); inCall.hangup(); }).prop('disabled', false); |
10. Завершение текущего звонка при закрытии соединения
call.hangup() code
Code Block | ||||
---|---|---|---|---|
| ||||
function onConnected(session) { $("#connectBtn").text("Disconnect").off('click').click(function(){ $(this).prop('disabled', true); if (currentCall) { showOutgoing(); disableOutgoing(true); setStatus("#callStatus", ""); currentCall.hangup(); } session.disconnect(); }).prop('disabled', false); } |
...
currentCall.muteAudio(), currentCall.muteAudio(), currentCall.muteVideo(), currentCall.unmuteVideo() code
Code Block | ||||
---|---|---|---|---|
| ||||
// Mute audio in the call
function mute() {
if (currentCall) {
currentCall.muteAudio();
}
}
// Unmute audio in the call
function unmute() {
if (currentCall) {
currentCall.unmuteAudio();
}
}
// Mute video in the call
function muteVideo() {
if (currentCall) {
currentCall.muteVideo();
}
}
// Unmute video in the call
function unmuteVideo() {
if (currentCall) {
currentCall.unmuteVideo();
}
} |
12. Сбор WebRTC статистики во время звонка
call.getStats() code
Code Block | ||||
---|---|---|---|---|
| ||||
function loadStats() { if (currentCall) { // Stats shoukld be collected for active calls only #WCS-3260 let status = currentCall.status(); if (status != CALL_STATUS.ESTABLISHED && status != CALL_STATUS.HOLD) { return; } currentCall.getStats(function (stats) { if (stats && stats.outboundStream) { if (stats.outboundStream.video) { $('#videoStatBytesSent').text(stats.outboundStream.video.bytesSent); $('#videoStatPacketsSent').text(stats.outboundStream.video.packetsSent); } else { $('#videoStatBytesSent').text(0); $('#videoStatPacketsSent').text(0); } if (stats.outboundStream.audio) { $('#audioStatBytesSent').text(stats.outboundStream.audio.bytesSent); $('#audioStatPacketsSent').text(stats.outboundStream.audio.packetsSent); } else { $('#audioStatBytesSent').text(0); $('#audioStatPacketsSent').text(0); } } }); } } |