Chrome демонстрация экрана не работает

Как включить демонстрацию экрана в Google Meet

Очень часто пользователям приходится работать с большим объемом дополнительных материалов. Поэтому у Google Meet есть функция демонстрации экрана другим участникам конференции. Такую функцию можно использовать, например, для демонстрации презентации или иных медиафайлов, служащих для наглядности.

Разберем по шагам, как подключить демонстрацию экрана в Google Meet.

Шаг 1. Подключение

Для начала, очевидно, нужно присоединиться к видео-встрече. Поскольку сервис специализируется на корпоративной работе, войти в конференцию можно только с аккаунта Google Workspace, принадлежащего соответствующей организации, либо по пригласительной ссылке от любого из участников. Однако, если пользователя сервис интересует в личных целях, в конференцию можно войти и с личного аккаунта – тогда пользователю доступны функции и запуска видео-встречи, и подключения к любой из них при наличии приглашения от организатора.

Шаг 2. Включение демонстрации экрана

В правом нижнем углу окна находится кнопка «Показать на главном экране». После нажатия на нее необходимо выбрать способ демонстрации: окно конкретной программы, весь экран или вкладка браузера. Нажатие на соответствующий вариант и запустит трансляцию.

Шаг 3. Настройка

Далее необходимо убедиться в корректности настроек. При трансляции из вкладки в Chrome по умолчанию передается и звук. Однако пользователь всегда может самостоятельно определить, какие параметры должны проецироваться.

• Аспекты работы с трансляцией вкладки в Chrome. Для перехода на другую вкладку следует выбрать ее и нажать «Поделиться текущей вкладкой». При этом пользователи смогут видеть ее вне зависимости от того, включена ли камера транслятора, и проецируется ли что-то еще.
• Алгоритм остановки показа экрана. Для того чтобы приостановить трансляцию, достаточно нажать «Закрыть доступ», либо во вкладке окна браузера выбрать пункт «Остановить показ».
• Демонстрация экрана, если кто-то уже его демонстрирует. Чтобы запустить показ экрана, если другой пользователь уже делает это, необходимо повторить стандартную процедуру запуска трансляции, подтвердив в конце переключение на другой показ.

Стоит заметить, что несколько пользователей не могут транслировать экран одновременно, и, перезапуская показ экрана, пользователь автоматически приостанавливает предшествующую трансляцию.

• Подключение к встрече для показа экрана. Если пользователю необходимо присоединиться к видео-встрече специально для показа экрана, необходимо на главной странице сервиса нажать «Присоединиться к встрече или создать свою», ввести код конференции, а затем выбрать «Показать на главном экране», указав необходимый источник трансляции.

В Google Meet также существует функция, позволяющая ограничить доступ к возможности демонстрировать свой экран участникам конференции, не являющимися организаторами. Для этого нужно зайти в раздел внизу окна встречи «Элементы управления встречей» и отключить параметр «Демонстрация экрана»

Итак, Google Meet – перспективная и функциональная платформа. Эта статья подробно описала алгоритм подключения трансляции на основной экран и всевозможные действия с этим инструментом.

Источник

Cкринкастинг на сайте по WebRTC из браузера Chrome

Cкринкастинг в Chrome

Cкринкастинг (демонстрация экрана, скриншаринг) уже работает в браузере Google Chrome и позволяет захватывать как окно самого браузера, так и окно любого другого приложения. Например можно захватить Firefox, запущенный в соседнем окне.

Все бы замечательно, но есть проблема с безопасностью. В браузере Chrome скринкастинг выключен.

Для его включения необходимо воспользоваться Chrome Desktop Capture API и мы покажем в этой статье как это сделать.

Расширение для скринкастинга

Чтобы скринкастинг заработал, юзер должен установить ваше расширение (Chrome Extension), которое создано специально для вашего сайта (домена).

Самый первый запуск скринкастинга потребует от пользователя нескольких действий:

Юзер заходит на сайт и нажимает кнопку Начать демонстрацию экрана.

Юзеру предлагается добавить расширение для этого действия.

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

Собственное расширение

Следующим шагом будет создание расширения для своего домена. Например ваш тестовый домен — mysupercat.com. В этом случае, при создании расширения, вам нужно будет прописать ваш домен в коде расширения.

Кроме этого, ваш домен (сайт на этом домене) обязательно должен работать по HTTPS. Соответственно ваша страница скринкастинга должна открываться как-то так: mysupercat.com/screen-sharing.php

Домен и HTTPS — это пожалуй все, что потребуется для создания собственного расширения для скринкастинга. При этом покупать SSL-сертификаты не обязательно. Self-signed сертификаты также подойдут. Главное чтобы ваша страница открывалась по HTTPS, пусть даже с красной строчкой:

Хотя, потребуется еще кое-что — пять американских долларов. Ровно столько придется заплатить за членство в клубе разработчиков под Chrome.

Подведем итоги. Чтобы приступить к созданию и тестированию собственного расширения, нам потребуется:

• доменное имя
• хостинг с HTTPS
• 5 долларов на карте

Публикация расширения

Переходим в Chrome Developer Dashboard и оплачиваем заготовленные 5 баксов.

Готовим ZIP-архив с файлами расширения.

Для этого скачиваем 2 файла здесь.
Меняем файл manifest.json и проставляем свои:

Кроме этого меняем иконки и подставляем свой домен в коде externally_connectable

В итоге получается такой manifest.json:

Упаковываем эти файлы в ZIP-архив со всеми иконками и другими картинками. Про иконки можно прочесть здесь. А про дополнительные картинки здесь.

Далее жмем Add new item.

Далее, после ознакомления с соглашением, заливаем наш ZIP-архив

После загрузки архива, нужно еще раз все внимательно проверить и сохранить

Осталось опубликовать расширение из Dashboard, нажав кнопку Publish.

Опубликованное расширение в Dashboard выглядит так:

Готово. Расширение упаковано, опубликовано и доступно для установки в браузер.

Инлайн инсталляция

Без инлайн инсталляции вашим пользователям пришлось бы переходить на сайт Chrome Store и устанавливать расширения там. Это конечно не смертельно, но:

• Для пользователя это не очень удобно.
• Пользователь может запутаться на странице установки расширения и не вернуться.

Инлайн инсталляцией расширения называется как раз вот это аккуратное окошко, которое не заставляет пользователя переходить на Chrome Store:

Чтобы настроить инлайн инсталляцию, вам нужно иметь контроль над доменом и хостингом, который вы описали в манифесте (файл manifest.json).

Например, если ваш домен mysupercat.com, то нужно будет пройти стандартную процедуру верификации и подтвердить владение этим доменом.

Чтобы включить инлайн инсталляцию, установите флаг This item uses inline install на странице редактирования расширения.

Далее добавляете свой веб-сайт.

В новом окне открывается Search Console, где можно пройти процедуру верификации.

Следующим шагом нужно залить файл-идентификатор на ваш хостинг чтобы подтвердить владение доменом / сайтом

Процедура верификации пройдена успешно.

Верифицированный сайт становится доступен в списке для данного расширения и на нем теперь можно использовать инлайн инсталляцию

Интеграция скринкастинга в веб-страницу

Расширение готово и настроено для инлайн инсталляции. Остается внедрить код вызова расширения в HTML-страницу и протестировать.

Cкринкастинг в браузере Google Chrome использует WebRTC API. Поэтому чтобы завершить этот тест, нам потребуется WebRTC — платформа.

В качестве серверной WebRTC — платформы мы будем использовать Web Call Server и Web SDK — набор скриптов API для этого сервера.

1. Создаем HTML-страницу для скринкастинга screen-sharing.html

Страница состоит из 20 строк кода и выглядит так:

Давайте ее разберем.

1) Подгружаем файл API flashphoner.js

2) Подгружаем скрипт screen-sharing.js — его мы разберем немного позже.

3) Указываем где искать расширение для скринкастинга.

4) Добавляем кнопку, по нажатию на которую будет происходить установка расширения.

5) Добавляем div — элемент localVideo, в котором будет отображаться захваченный экран локально

6) Добавляем div — элемент remoteVideo, который будет плеером, отображающим то, что пришло с сервера, т.е. будет воспроизводить видеопоток, который был захвачен в localVideo и отправлен на сервер.

7) Кнопка, по которой будем начинать скринкастинг и отображение статуса потока

В «дизайне» наша страница выглядит так.

2. Создаем JavaScript код для скринкастинга screen-sharing.js
Весь код доступен для скачивания здесь. Код занимает пару страниц и содержит 5 основных функций.

Разберем этот код детально.

1) В начале объявляется несколько переменных: статусы, элементы localVideo и remoteVideo, и extensionId, содержащий уникальный идентификатор расширения для скринкастинга.

2) Далее в Flashphoner API передается extensionId и в результате API знает какое расширение будет использовано для скринкастинга.

3) Периодически обращаемся к Chrome и проверяем, установлено ли расширение. Если расширение установлено, нам больше не требуется кнопка Install extension и ее можно скрыть.

4) Функция connectAndShareScreen устанавливает соединение с сервером и как только соединение установлено (ESTABLISHED), начинает захват и отправку видеопотока, передавая управление функции startStreaming.

5) Перед началом скринкастинга устанавливаются такие параметры потока, как разрешение видео и FPS.

6) Далее создается сам поток и вызывается метод publish(). Обратите внимание, что потоку задается имя test123

7) После успешной отправки потока test123 на сервер, код попадает в обработчик события PUBLISHING.

8) Осталось только проиграть поток в соседнем div-блоке remoteVideo. Для этого вызываем функцию play().

Страница и скрипт готовы и можно начинать тестирование.

Подготовка к тестированию

В результате у нас есть следующие файлы:

• screen-sharing.html
• screen-sharing.js
• flashphoner.js

flashphoner.js находится в составе сборки Web SDK. Последнюю сборку можно скачать с этой страницы.

Кроме html и js-файлов, потребуется сервер-ретранслятор, который будет принимать видеопоток и ретранслировать его другим (в данном случае обратно на эту же страницу).

Мы используем для тестирования Web Call Server 5. Поэтому есть несколько вариантов:

С таким же успехом можно раздать скринкастинг-поток на множество подключившихся пользователей

Тестируем скринкастинг в Chrome

Открываем страницу screen-sharing.html по HTTPS в браузере Google Chrome

Нажимаем кнопку Install Now чтобы добавить расширение методом инлайн инсталляции

Нажимаем Add extension и можно сразу стартовать скринкастинг по кнопке Connect and share screen. Chrome попросит выбрать что именно мы будем захватывать. Это может быть вкладка либо окно Chrome или другое приложение.

Нажимаем кнопку Share и приходим к окончательному результату. Экран захватывается, отправляется на сервер по WebRTC и проходит обратно, отображаясь в блоке Preview.

Подведем итоги

Таким образом мы успешно протестировали скринкастинг с простой тестовой страницей screen-sharing.html в браузере Google Chrome. Тестовая страница содержит расширение для скринкастинга, которое мы опубликовали в Chrome Store и которое устанавливается в один клик без перехода на Store.

При тестировании страница работала по HTTPS и отправляла / получала видео через Web Call Server — WebRTC медиасервер для трансляций потокового видео.

Источник