Page History

...

Демонстрация экрана доступна в браузерах Chrome (требует сборки и установки расширения из Chrome Store) и Firefox.и Firefox. Для демонстрации экрана в Chrome до версии 73 необходимо собрать и установить расширение, версии Chrome 73 и выше, а также Firefox в расширениях не нуждаются.

Image Added

Excerpt

Расширение для Google Chrome с публикацией в Chrome Store

Исходный код расширения для сборки доступен по ссылке ниже:

Chrome Screen Sharing Extension

Image Removed

Excerpt

Расширение для Google Chrome с публикацией в Chrome Store

Создайте аккаунт Google

1. Зайдите на

Создайте аккаунт Google

1. Зайдите на google.com и кликните кнопку ‘Sign in’

2. Кликните ссылку ‘Create account’ на странице ‘Sign in’

3. Будет открыта страница ‘Create your Google Account’
Заполните необходимые поля и кликните кнопку ‘Next step’, чтобы создать аккаунт.

Зарегистрируйтесь как разработчик Chrome Web Store

1. Войдите в Chrome Developer Dashboard, используя созданный аккаунт Google
2. Внесите единовременную плату в размере US$5, чтобы подтвердить аккаунт

Адаптируйте расширение к вашему домену

Выполните действия, описанные ниже, чтобы использовать расширения со своим доменом.
Отредактируйте файл манифеста manifest.json расширения для Chrome.

Измените:

имя (name)
автора (author)
описание (description)
адрес домашней страницы (homepage_url)
в "externally_connectable":"matches" замените flashphoner.com на свой домен

Добавьте свои иконки в директорию chrome-extension и отредактируйте имена файлов в "icons" и "web_accessible_resources". (Для дополнительной информации см. Manifest - Icons и Supplying Images.)

Опубликуйте расширение в Chrome Web Store

Упакуйте файлы из директории chrome-extension в zip-архив.

1. Войдите в Chrome Developer Dashboard
2. Кликните кнопку ‘Add new item’

3. Примите соглашение разработчика

4. Выберите файл chrome-extension.zip и кликните кнопку ‘Upload’ на странице ‘Upload’

5. После загрузки расширения будет открыта страница для редактирования опций
Выберите необходимые опции и кликните кнопку ‘Save draft and return to dashboard’ внизу страницы.

6. Расширение появится в панели разработчика
Для публикации расширения кликните ссылку ‘Publish’.

Опубликованное расширение будет иметь статус ‘Published’ как на изображении ниже.

Для дополнительной информации см. Chrome Web Store Publishing Tutorial.

Встроенная установка расширения

Встроенная установка позволяет инициировать установку расширения для демонстрации экрана кликом на ссылке на странице клиента.
Для работы встроенной установки расширение должно быть адаптировано, опубликовано и одобрено.

Выполните действия, описанные ниже, чтобы использовать клиент со своими расширениями.

1. При публикации выберите опцию ‘Inline Install’

2. Подтвердите и привяжите к расширению сайт со свойм доменом

- Кликните ‘Add a New Site’

- В новой вкладке браузера будет открыта страница Google Search Console
Введите URL со своим доменом.

- Будет открыта страница с инструкцией для подтверждения сайта
Выполните требуемые шаги и кликните кнопку ‘Verify’.

- Если проверка пройдена, будет открыта страницa с подтверждением успешной проверки

- Подтвержденый сайт появится в списке в опциях расширения; далее расширение может быть проассоциировано с этим сайтом

Настройка клиента

Отредактируйте Screen-sharing.html и Screen-sharing.js

В Screen-sharing.html chrome-webstore-item должен указывать на ваше расширение в интернет-магазине Chrome
В Screen-sharing.js замените значение переменной chromeScreenSharingExtensionId на ID вашего расширения

Чтобы узнать ID расширения, кликните ‘More info’ для этого расширения в Chrome Developer Dashboard.

Параметры источника медиа

Для конфигурации параметров источника медиа экрана могут быть использованы параметры объекта Configuration, передаваемые методу init() при инициализации экземпляра Flashphoner API.

Code Block

language	js
theme	RDark

var f = Flashphoner.getInstance();
var configuration = new Configuration();
....
configuration.screenSharingVideoWidth = 1920;
configuration.screenSharingVideoHeight = 1080;
configuration.screenSharingVideoFps = 10;
f.init(configuration);

Список параметров

Параметр	Описание
screenSharingVideoWidth	Ширина источника медиа экрана
screenSharingVideoHeight	Высота источника медиа экрана
screenSharingVideoFps	Частота кадров источника медиа экран

Данные параметры задают предельные значения разрешения и количество кадров в секунду (FPS). Например, screenSharingVideoWidth = 1080 означает, что ширина исходного видео не может быть более 1080 пикселей, но может быть меньше (напр., в случае передачи потока с изображением окна приложения с шириной 720 пикселей.)

Захват системного звука в браузере Chrome

В браузере Chrome существует возможность при захвате экрана транслировать аудиопоток из системного источника звука. Такая возможность полезна, например, при скринкастинге. Для захвата системного звука при выборе окна или вкладки в диалоговом окне расширения Chrome установите опцию "Share audio":

Код расширения code:

Code Block

language	js
theme	RDark

        callback({sourceId: sourceId, systemSoundAccess: opts.canRequestAudioTrack});

Управление источником захвата (экран или окно) в браузере Firefox

В браузере Firefox можно выбрать экран или окно программы в качестве источника видео при помощи параметра constraints.video.mediaSource

code:

Code Block

language	js
theme	RDark

    constraints.video.type = "screen";
    if (Browser.isFirefox()){
        constraints.video.mediaSource = $('#mediaSource').val();
    }
    session.createStream({
        name: streamName,
        display: localVideo,
        constraints: constraints
    })

Пример интерфейса для выбора источника

Захват окна программы

Захват экрана

Код примера

Пример использует расширение Flashphoner для работы с доменом *.flashphoner.com. Для того, чтобы пример работал с Вашим доменом, необходимо собрать и выложить Ваше расширение, как описано выше.

Как временное решение, вы можете прописать IP-адрес вашего WCS-сервера в файле C:\Windows\System32\drivers\etc\hosts (на Windows системе) как test.flashphoner.com. Таким образом, вы сможете тестировать ваш WCS-сервер с доменом test.flashphoner.com, пока не соберете расширение под Ваш собственный домен.

Пример работает в Chrome только через https://.

...

Демонстрация экрана в Chrome без использования расширения

Начиная с версии Chrome 73 и версии Flashphoner WebSDK 0.5.28.2753.86 возможна демонстрация экрана без использования расширения. Для этого необходимо при создании поток передать параметр constraints.video.withoutExtension

code

Code Block

language	js
theme	RDark

 if ($("#woChromeExtension").prop('checked')) {
     constraints.video.withoutExtension = true;
 }

Известные ограничения

1. Разрешение устанавливается не в соответствии с заданным в constraints при создании потока, а по размерам источника (экрана, окна или вкладки браузера)

2. Захват системного звука работает начиная с версии Chrome 74

Код примера

Пример использует расширение Flashphoner для работы с доменом *.flashphoner.com. Для того, чтобы пример работал с Вашим доменом, необходимо собрать и выложить Ваше расширение, как описано выше.

Как временное решение, вы можете прописать IP-адрес вашего WCS-сервера в файле C:\Windows\System32\drivers\etc\hosts (на Windows системе) как test.flashphoner.com. Таким образом, вы сможете тестировать ваш WCS-сервер с доменом test.flashphoner.com, пока не соберете расширение под Ваш собственный домен.

Пример работает в Chrome только через https://.

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

...

1. Инициализация API с указанием идентификатора расширения для Chrome браузера.

Flashphoner.init() код

Code Block

language	js
theme	RDark

Flashphoner.init({screenSharingExtensionId: extensionId});

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

Flashphoner.createSession() кодидентификатора расширения для Chrome браузера.

Flashphoner.init() code

Code Block

language	js
theme	RDark

Flashphoner.init({screenSharingExtensionId: extensionId});

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

Flashphoner.createSession() code

Code Block

language	js
theme	RDark

    Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
        //session connected, start streaming
        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 code

Code Block

language	js
theme	RDark

    Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
        //session connected, start streaming
        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 код4. Настройка параметров публикации

разрешение и fps code

Code Block

language	js
theme	RDark

theme	RDark

    var constraints = {
        Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session)video: {
        //session connected, start streaming    width: parseInt($('#width').val()),
        startStreaming(session);
     }height: parseInt($('#height').on(SESSION_STATUS.DISCONNECTED, function(){
val()),
          ...
  frameRate:  }{max: parseInt($('#fps').on(SESSION_STATUS.FAILED, function(){val())}
        ...}
    });

4. Публикация видеопотока

session.createStream(), publish() код

В параметрах видеопотока на публикацию указывается тип 'screen'.

использование микрофона code

Code Block

language	js
theme	RDark

    if ($("#useMic").prop('checked')) {
    var    constraints.audio = {
            videodeviceId: {
$('#audioInput').val()
        };
    }

тип источника видео и возможность публикации в Chrome без расширения code

Code Block

language	js
theme	RDark

    constraints.video.type = "screen";
     width:if parseInt($('#width'"#woChromeExtension").valprop('checked')), {
        constraints.video.withoutExtension = true;
    }

источник медиа в браузере Firefox code

Code Block

language	js
theme	RDark

     height:if parseInt($('#height').val(Browser.isFirefox()),{
        constraints.video.mediaSource    frameRate: parseInt(= $('#fps#mediaSource').val()),
            type: "screen"
        }val();
    };

5. Публикация видеопотока

session.createStream(), publish() code

Code Block

language	js
theme	RDark

    session.createStream({
        name: streamName,
        display: localVideo,
        constraints: constraints
        ...
    }).publish();

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

StreamStatusEvent PUBLISHING код code

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

Code Block

language	js
theme	RDark

    session.createStream({
        name: streamName,
        display: localVideo,
        constraints: constraints
    }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
        /*
         * User can stop sharing screen capture using Chrome "stop" button.
         * Catch onended video track event and stop publishing.
         */
        document.getElementById(publishStream.id()).srcObject.getVideoTracks()[0].onended = function (e) {
            publishStream.stop();
        };
        document.getElementById(publishStream.id()).addEventListener('resize', function(event){
            resizeVideo(event.target);
        });
        setStatus(STREAM_STATUS.PUBLISHING);
        //play preview
        session.createStream({
            name: streamName,
            display: remoteVideo
            ...
        }).play();
    }).on(STREAM_STATUS.UNPUBLISHED, function(){
        ...
    }).on(STREAM_STATUS.FAILED, function(){
        ...
    }).publish();

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

StreamStatusEvent PLAYING код code

Code Block

language	js
theme	RDark

        session.createStream({
            name: streamName,
            display: remoteVideo
        }).on(STREAM_STATUS.PLAYING, function(previewStream){
            document.getElementById(previewStream.id()).addEventListener('resize', function(event){
                resizeVideo(event.target);
            });
            //enable stop button
            onStarted(publishStream, previewStream);
        }).on(STREAM_STATUS.STOPPED, function(){
            ...
        }).on(STREAM_STATUS.FAILED, function(){
            ...
        }).play();

78. Остановка воспроизведения видеопотока.

stream.stop() код code

Code Block

language	js
theme	RDark

function onStarted(publishStream, previewStream) {
    $("#publishBtn").text("Stop").off('click').click(function(){
        $(this).prop('disabled', true);
        previewStream.stop();
    }).prop('disabled', false);
}

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

StreamStatusEvent STOPPED код code

При получении этого события останавливается публикация потока при помощи publishStream.stop()

Code Block

language	js
theme	RDark

        session.createStream({
            name: streamName,
            display: remoteVideo
        }).on(STREAM_STATUS.PLAYING, function(previewStream){
            ...
        }).on(STREAM_STATUS.STOPPED, function(){
            publishStream.stop();
        }).on(STREAM_STATUS.FAILED, function(){
            ...
        }).play();

910. Остановка публикации видеопотока по кнопке расширения Chrome

publishStream.stop(). код code

Code Block

language	js
theme	RDark

        document.getElementById(publishStream.id()).srcObject.getVideoTracks()[0].onended = function (e) {
            publishStream.stop();
        };

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

StreamStatusEvent UNPUBLISHED код code

Code Block

language	js
theme	RDark

    session.createStream({
        name: streamName,
        display: localVideo,
        constraints: constraints
    }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
        ...
    }).on(STREAM_STATUS.UNPUBLISHED, function(){
        setStatus(STREAM_STATUS.UNPUBLISHED);
        //enable start button
        onStopped();
    }).on(STREAM_STATUS.FAILED, function(){
        ...
    }).publish();

Space shortcuts

Page tree

Versions Compared

Old Version 15

New Version 16

Key

Расширение для Google Chrome с публикацией в Chrome Store

Расширение для Google Chrome с публикацией в Chrome Store

Создайте аккаунт Google

Создайте аккаунт Google

Зарегистрируйтесь как разработчик Chrome Web Store

Опубликуйте расширение в Chrome Web Store

Встроенная установка расширения

Настройка клиента

Параметры источника медиа

Список параметров

Захват системного звука в браузере Chrome

Управление источником захвата (экран или окно) в браузере Firefox

Код примера

Демонстрация экрана в Chrome без использования расширения

Известные ограничения

Код примера