Streaming with zooming

Описание

Данный пример может быть использован для тестирования возможности увеличения изображения на лету при захвате с камеры в браузере

Поток, опубликованный с увеличением

Параметры URL, указанного в поле ввода:

• test1.flashphoner.com:8443 - адрес и вебсокет порт WCS
• 2a12b361 - bvz jge,kbrjdfyyjuj gjnjrf

На этой странице играю два видео

• Local - видео с камеры
• Preview - видео для предварительного просмотра, как опубликовано на сервере

Код примера

Код данного примера находится на WCS-сервере по следующему пути:

/usr/local/FlashphonerWebCallServer/client/examples/demo/stream-zoom/stream-zoom.html

• stream-zoom.css - файл стилей
• stream-zoom.html - HTML страница примера
• stream-zoom.js - скрипт, обеспечивающий работу примера

Тестировать данный пример можно по следующему адресу:

https://host:8444/client/examples/demo/streaming/stream-zoom/stream-zoom.html

Здесь host - адрес WCS-сервера.

Работа с кодом примера

Для разбора кода возьмем версию файла stream-zoom.js с хешем 7626dbf, которая находится здесь и доступна для скачивания в соответствующей сборке 2.0.260.

1. Инициализация API

Flashphoner.init() code

const init_page = function() {
    //init api
    try {
        Flashphoner.init();
    } catch(e) {
        setText("notifyFlash", "Your browser doesn't support WebRTC technology needed for this example");
        return;
    }
    ...
}

2. CПодключение к серверу

Flashphoner.createSession() code

const start = function() {
    //check if we already have session
    if (currentSession) {
        startStreaming(currentSession);
    } else {
        //create session
        let url = getValue("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(){
            ...
        });
    }
}

3. Получение от сервера события, подтверждающего успешное соединение

SESSION_STATUS.ESTABLISHED code

const start = function() {
    //check if we already have session
    if (currentSession) {
        startStreaming(currentSession);
    } else {
        //create session
        let url = getValue("url");
        console.log("Create new session with url " + url);
        Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
            //session connected, start streaming
            currentSession = session;
            startStreaming(session);
        }).on(SESSION_STATUS.DISCONNECTED, function(){
            ...
        }).on(SESSION_STATUS.FAILED, function(){
            ...
        });
    }
}

4. Публикация видео с возможностью увеличения

Session.createStream(), Stream.publish() code

В метод createStream() передаются параметры:

• streamName - имя потока;
• localVideo - div элемент для отображения видео с камеры
• constraints.video.zoom: true - включает увеличение, если такая возможность поддерживается
• constraints.audio: true - включает захват аудио

const startStreaming = function(session) {
    let streamName = getValue("url").split('/')[3];
    disableItem("url");

    session.createStream({
        name: streamName,
        display: localVideo,
        constraints: {
            video: {
                zoom: true
            },
            audio: true
        }
    }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
        ...
    }).on(STREAM_STATUS.UNPUBLISHED, function(){
        ...
    }).on(STREAM_STATUS.FAILED, function(stream){
        ...
    }).publish();
}

5. Получение от сервера события, подтверждающего успешную публикацию

STREAM_STATUS.PUBLISHING code

При получении данного события, создается поток для отображения публикации при помощи метода Session.createStream(), и для этого потока вызывается метод Stream.play()

const startStreaming = function(session) {
    let streamName = getValue("url").split('/')[3];
    disableItem("url");

    session.createStream({
        name: streamName,
        display: localVideo,
        constraints: {
            video: {
                zoom: true
            },
            audio: true
        }
    }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
        setStatus(STREAM_STATUS.PUBLISHING);
        //play preview
        session.createStream({
            name: streamName,
            display: remoteVideo
        }).on(STREAM_STATUS.PLAYING, function(previewStream){
            //enable stop button
            onStarted(publishStream, previewStream);
        }).on(STREAM_STATUS.STOPPED, function(){
            publishStream.stop();
        }).on(STREAM_STATUS.FAILED, function(stream){
            //preview failed, stop publishStream
            if (publishStream.status() === STREAM_STATUS.PUBLISHING) {
                setStatus(STREAM_STATUS.FAILED, stream);
                publishStream.stop();
            }
        }).play();
    }).on(STREAM_STATUS.UNPUBLISHED, function(){
        ...
    }).on(STREAM_STATUS.FAILED, function(stream){
        ...
    }).publish();
}

6. Настройка слайдера для управления увеличением

Stream.getZoomCapabilities, Stream.setZoom code

const setUpZoom = function(publishStream) {
    // Check if zoom capabilities available
    if (publishStream) {
        let zoom = document.getElementById("zoom");
        let zoomCapabilities = publishStream.getZoomCapabilities();

        if (zoomCapabilities) {
            // Set up zoom control
            setText("info", "Zoom can be used with the camera");
            setAttribute("info", "class", "text-muted");
            zoom.min = zoomCapabilities.min;
            zoom.max = zoomCapabilities.max;
            zoom.step = zoomCapabilities.step;
            zoom.value = zoomCapabilities.value;
            zoom.oninput = async function(event) {
                await publishStream.setZoom(event.target.value);
                console.log("Zoom value: " + publishStream.getZoom());
            };
            enableItem("zoom");
        } else {
            setText("info", "Zoom can't be used with the camera");
            setAttribute("info", "class", "text-danger");
        }
    }
}