...
Пример демонстрирует сценарий презентации: публикация потока потоков с веб-камеры и с экрана на одной странице с возможностью микширования этих двух потоков на сервере.
Параметры публикации экрана:
...
- Websocket URL WCS сервера
Код примера
Код данного примера находится на WCS-сервере по следующему пути:
...
Для разбора кода возьмем версию файла screen-camera-mixer.js с хешем 32144d942b55d1, которая находится здесь и доступна для скачивания в соответствующей сборке 2.0.243247.
1. Инициализация API.
Flashphoner.init() code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.init(); |
...
Flashphoner.createSession() code
Code Block | ||||
---|---|---|---|---|
| ||||
const connect = function() { ... let url = field("url"); ... console.log("Create new session with url " + url); Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){ ... }).on(SESSION_STATUS.DISCONNECTED, function(){ ... }).on(SESSION_STATUS.FAILED, function(){ ... }); } |
...
STREAM_STATUS.ESTABLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
const connect = function() { ... let url = field("url"); ... console.log("Create new session with url " + url); Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){ //session connected, start streaming setStatus("screen", SESSION_STATUS.ESTABLISHED); setStatus("camera", SESSION_STATUS.ESTABLISHED); onConnected(session); }).on(SESSION_STATUS.DISCONNECTED, function(){ ... }).on(SESSION_STATUS.FAILED, function(){ ... }); } |
...
Session.createStream(), Stream.publish() code
Методу createStream() передаются следующие параметры:
...
5. Получение от сервера события, подтверждающего успешную публикацию экрана
STREAM_STATUS.PUBLISHING code
По этому событию начинается начинаются сбор статистики WebRTC для публикации экрана и публикация потока с камеры
Code Block | ||||
---|---|---|---|---|
| ||||
const startStreamingScreen = function(session) { ... session.createStream(options).on(STREAM_STATUS.PUBLISHING, function(screenStream) { /* * User can stop sharing screen capture using Chrome "stop" button. * Catch onended video track event and stop publishing. */ document.getElementById(screenStream.id()).srcObject.getVideoTracks()[0].onended = function (e) { screenStream.stop(); }; document.getElementById(screenStream.id()).addEventListener('resize', function(event){ resizeVideo(event.target); }); setStatus("screen", STREAM_STATUS.PUBLISHING, screenStream); screenStats = StreamStats("screen", screenStream, STAT_INTERVAL); startStreamingCamera(session, screenStream); }).on(STREAM_STATUS.UNPUBLISHED, function() { ... }).on(STREAM_STATUS.FAILED, function(stream) { ... }).publish(); } |
...
Session.createStream(), Stream.publish() code
Методу createStream() передаются следующие параметры:
...
7. Получение от сервера события, подтверждающего успешную публикацию камеры
STREAM_STATUS.PUBLISHING code
...
По этому событию начинаются сбор статистики WebRTC для публикации камеры
Code Block | ||||
---|---|---|---|---|
| ||||
const startStreamingCamera = function(session, screenStream) { ... session.createStream(options).on(STREAM_STATUS.PUBLISHING, function(cameraStream) { document.getElementById(cameraStream.id()).addEventListener('resize', function(event){ resizeVideo(event.target); }); setStatus("camera", STREAM_STATUS.PUBLISHING, cameraStream); cameraStats = StreamStats("camera", cameraStream, STAT_INTERVAL); onStarted(cameraStream); }).on(STREAM_STATUS.UNPUBLISHED, function() { ... }).on(STREAM_STATUS.FAILED, function(stream) { ... }).publish(); } |
8. Остановка публикации камерыСбор и отображение WebRTC статистики
Stream.stop() code
...
getStats(), stats.outboundStream.video.bytesSent, stats.otherStats.availableOutgoingBitrate code
Отображаются следующие параметры:
- текущий битрейт публикации
- максимально возможный битрейт публикации для потока с заданными параметрами, по оценке браузера
Code Block | ||||
---|---|---|---|---|
| ||||
const setPublishButtonStreamStats = function(actiontype, sessionstream, cameraStreaminterval) { const $("#publishBtn").text(action).off('click').click(function(){streamStats = { if (action == "Start") { type: type, timer: null, ... stream: stream, } else if (action === "Stop") {bytesSent: 0, $(this).prop('disabled', true); start: function(interval) { if cameraStream.stop(); (!streamStats.timer) { } }).prop('disabled', false); } |
9. Остановка публикации экрана
Stream.stop() code
Code Block | ||||
---|---|---|---|---|
| ||||
const startStreamingCamera = function(session, screenStream) { ... session.createStream(optionsstreamStats.timer = setInterval(streamStats.displayStats, interval); } }, stop: function() { if (streamStats.timer) { clearInterval(streamStats.timer); streamStats.timer = null; } setBitrate(streamStats.type, ""); setAvailableBitrate(streamStats.type, ""); }, displayStats: function() { if (streamStats.stream) { streamStats.stream.getStats((stats) => { if (stats) { if (stats.outboundStream && stats.outboundStream.video) { let vBitrate = (stats.outboundStream.video.bytesSent - streamStats.bytesSent) * 8; setBitrate(streamStats.type, vBitrate); streamStats.bytesSent = stats.outboundStream.video.bytesSent; } if (stats.otherStats && stats.otherStats.availableOutgoingBitrate !== undefined) { setAvailableBitrate(streamStats.type, stats.otherStats.availableOutgoingBitrate); } } }); } } }; streamStats.start(interval); return streamStats; } |
9. Остановка публикации камеры
Stream.stop() code
Code Block | ||||
---|---|---|---|---|
| ||||
const setPublishButton = function(action, session, cameraStream) {
$("#publishBtn").text(action).off('click').click(function(){
if (action == "Start") {
...
} else if (action === "Stop") {
$(this).prop('disabled', true);
cameraStream.stop();
}
}).prop('disabled', false);
} |
10. Остановка публикации экрана
Stream.stop() code
Code Block | ||||
---|---|---|---|---|
| ||||
const startStreamingCamera = function(session, screenStream) { ... session.createStream(options).on(STREAM_STATUS.PUBLISHING, function(cameraStream) { ... }).on(STREAM_STATUS.UNPUBLISHED, function() { setStatus("camera", STREAM_STATUS.UNPUBLISHED); screenStream.stop(); }).on(STREAM_STATUS.PUBLISHINGFAILED, function(cameraStreamstream) { ... }).on(STREAM_STATUS.UNPUBLISHED,publish(); } |
11. Остановка сбора статистики WebRTC
Code Block | ||||
---|---|---|---|---|
| ||||
const onStopped = function(session) { if setStatus("camera", STREAM_STATUS.UNPUBLISHED);(cameraStats) { screenStreamcameraStats.stop(); }).on(STREAM_STATUS.FAILED, function(stream if (screenStats) { ...screenStats.stop(); }).publish(); ... } |