Как разрешить демонстрацию экрана в браузере

Обновлено: 04.07.2024

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

Совместное использование экрана может быть опасно, в случае если вы делитесь окном браузера или всем экраном с недоверенными сайтами.

Firefox предупредит вас, что вам не следует предоставлять доступ к видному на вашем экране окну браузера, если только вы не доверяете этому веб-сайту. Причины следующие:

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

Веб-сайты и реклама всегда могут отображать содержимое с других сайтов, но веб-сайты, как правило, не умеют читать пиксели, которые содержатся на других веб-сайтах. Более подробную техническую информацию можно найти в статье Политика безопасности. Это важный механизм интернет-безопасности, который существует во всех браузерах.

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

Например: Пользователь, который не вышел из учётной записи сайта банка перед закрытием вкладки, и потом поделился экраном с вредоносным сайтом. Этот сайт теперь может отобразить и собрать личную информацию учётной записи немедленно или когда пользователь отвлёкся или отошёл от компьютера (основываясь на его бездействии или наблюдая за ним по веб-камере, если к ней предоставлен доступ).

Эти прекрасные люди помогли написать эту статью:

Станьте волонтёром

Растите и делитесь опытом с другими. Отвечайте на вопросы и улучшайте нашу базу знаний.

Чтобы сделать ваше пребывание в интернете безопасным и комфортным, браузер применяет к элементам сайтов различные правила обработки (блокирует всплывающие окна, предупреждает о запросе сайтом местоположения и т. д.). С помощью панели Protect или в настройках вы можете изменить поведение браузера для всех сайтов или для выбранного сайта. Например, вы можете запретить запускать на всех сайтах JavaScript или разрешить выбранному сайту доступ к видеокамере.

Какие правила обработки вы можете менять

Для текущего сайта . Из панели Protect можно изменить правила обработки основного списка элементов.

Для всех сайтов . В настройках можно изменить правила обработки расширенного списка элементов.

Элементы, которыми можно управлять на панели Protect

Примечание. Значки из таблицы отображаются в Умной строке справа и показывают правила обработки для текущего сайта. Чтобы изменить правило обработки, нажмите на значок.

Спрашивать — при попытке сайта определить местоположение браузер запросит у вас разрешение на передачу данных.

  Разрешить — позволить сайту (например, Яндекс.Картам) определять ваше местоположение, не спрашивая каждый раз разрешения.

  Блокировать — запретить сайту запрашивать ваше местоположение.

Спрашивать — если сайт (например, портал для видеоконференций) попытается получить доступ к камере, браузер предупредит вас об этом.

Спрашивать — если сайт (например, портал для видеоконференций) попытается получить доступ к микрофону, браузер предупредит вас об этом.

  Блокировать — запретить сайту доступ к микрофону.

  Разрешить — позволить сайту (например, Яндекс.Календарю) показывать уведомления.

Блокировать — запретить сайту показывать уведомления.

Разрешать — по умолчанию запускать JavaScript разрешено.

  Блокировать — запретить сайту запускать JavaScript. Некоторые скрипты JavaScript воруют пароли или заражают компьютер вирусами. Выбрав эту опцию, вы запретите запуск любых скриптов JavaScript на сайте, что повысит безопасность, но может привести к неправильной работе сайта.

  Блокировать — запретить сайту показывать картинки. Без картинок он будет загружаться быстрее.

Блокировать — по умолчанию всплывающие окна блокируются, так как загромождают экран и часто используются для баннерной рекламы. Если сайт пытается открыть всплывающие окна, в Умной строке появляется значок .

Разрешить — позволить сайту запускать всплывающие окна.

Разрешать — по умолчанию синхронизация устройств производится в фоновом режиме.

Блокировать — запретить фоновую синхронизацию браузера на всех устройствах.

Спрашивать — если сайт после загрузки первого файла попытается автоматически загрузить второй, браузер предупредит вас об этом.

  Разрешить — позволить сайту автоматически загружать несколько файлов, не спрашивая каждый раз разрешения.

  Блокировать — запретить сайту загружать файлы, за исключением тех, которые вы выбрали для загрузки сами.

Спрашивать — если сайт запросит доступ к электронным музыкальным инструментам, использующим интерфейс MIDI, браузер предупредит вас об этом.

  Разрешить — позволить сайту автоматически получать доступ к MIDI-устройствам.

  Блокировать — запретить сайту доступ к MIDI-устройствам.

Выключено — запретить строгую проверку сертификатов. Режим включается автоматически при открытии страниц оплаты на сайтах банков и платежных систем.

 Включено — разрешить строгую проверку сертификатов, отключить все расширения браузера.

Версии браузеров для ПК:

72+ (Windows 7+, macOS 10.12+, Linux) 19.3+ (Windows 7+, macOS 10.12+, Linux) 59+ (Windows 7+, macOS 10.12+, Linux) 66+ (Windows 7+, macOS 10.12+, Linux) 79+ (Windows 7+)

Версии браузеров для мобильных:

2 Проверка компьютера на совместимость

3 Доступ к камере и микрофону

3.1 В браузере Chrome

3.2 В браузере Firefox

При первом запросе разрешения доступа к камере и микрофону нужно ответить "Разрешить" ("Allow"). Чтобы не было повторных запросов, можно установить галочку "Запомнить решение" ("Remember this decision"). Если доступ был запрещен, необходимо перезагрузить страницу и дать разрешение снова.

4 Доступ к экрану

4.1 В браузере Chrome

Разрешить доступ к экрану на компьютере в браузере Chrome можно тремя способами:

В версии Chrome 72+ доступ к экрану запрашивается автоматически, никаких дополнительных действий не требуется;
В более старых версиях Chrome требуется установить расширение браузера Supervisor;
Вместо расширения можно разрешить доступ к экрану специальным флагом, который нужно указать как аргумент при запуске файла "chrome.exe": --enable-usermedia-screen-capturing

Нужно предоставить доступ ко всему экрану

и после этого доступ нельзя закрывать

4.2 В браузере Firefox

Разрешить доступ к экрану на компьютере в браузере Firefox можно двумя способами:

В версии Firefox 66+ доступ к экрану запрашивается автоматически, никаких дополнительных действий не требуется;
В более старых версиях Firefox требуется установить расширение браузера Supervisor;

Нужно предоставить доступ ко всему экрану. Для этого во всплывающем окне в поле выбора окна или экрана нужно выбрать "Весь экран" ("Entire screen"):

А затем нажать "Разрешить" ("Allow") не выбирая галку "Запомнить решение" ("Remember this decision"):

5 Проверка на совместимость с технологией WebRTC

Для корректной работы онлайн видеонаблюдения требуется, чтобы в сети пользователей были разрешены исходящие подключения на порты:

3478/tcp
3478/udp
49152-65535/udp

Выполнить проверку WebRTC можно на странице WebRTC Troubleshooter . Для запуска проверки нужно просто нажать кнопку "START". Если проблем не обнаружено, то все пункты должны быть зеленые или желтые.

6 Нет доступа к веб-камере или черный квадрат вместо видео

Если отображается картинка с перечеркнутой камерой, черный прямоугольник или индикатор загрузки, то это означает, что браузер не может получать доступ к камере или камера работает неправильно. Причиной могут быть проблемы с веб-камерой, драйвером камеры или доступом к камере из браузера, если в операционной системе камера используется другим приложением (например, в Skype или в другом браузере) или доступ к камере блокируется антивирусом (ESET - статическая картинка со значком перечеркнутом камеры, Kaspersky - черный экран). Нужно закрыть все приложения, которые могут работать с камерой, отключить антивирус (или защиту камеры в нем) и обновить текущую вкладку в браузере. Можно попробовать перезагрузить компьютер.
Пример блокировки антивирусом ESET:

В Яндекс.Браузере для корректной работы прокторинга нужно отключать режим "Турбо", иначе он блокирует видео с камеры:

Если ничего не помогло, можно попробовать сбросить настройки Chrome, открыв страницу "chrome://settings/resetProfileSettings" и подтвердив действие.

7 Нет доступа к экрану на macOS "Catalina"

Начиная с macOS "Catalina" 10.15 для доступа к экрану браузера нужно выдать дополнительное разрешение в настройках системы. Для этого перейдите в системные настройки меню "Системные настройки".

Затем выберите "Защита и безопасность" → "Конфиденциальность". В предложенном списке нужно отметить браузер, которому нужно разрешить доступ к записи экрана.

После этого потребуется перезапустить браузер.

8 Не открывается страница теста с прокторингом

9 Не запускается прокторинг на iOS Safari

Если разрешено прохождение тестов с прокторингом на мобильных устройствах, но в iOS 12+ Safari прокторинг не запускается (интеграция SDK), то нужно проверить настройки Safari. Для корректной работы прокторинга необходимо отключить опцию "Настройки" → "Safari" → "Конфиденциальность и безопасность" → "Без перекрестн. отслеж."

10 Появляется ошибка MediaRecorder на iOS Safari

Для корректной работы системы в iOS Safari должна быть включена опция MediaRecorder в разделе "Настройки" → "Safari" → "Дополнения" → "Experimental Features" → "MediaRecorder".

11 Не работает прокрутка (скролл) на iOS Safari

В iOS Safari может не работать скролл внутри элементов IFRAME, когда в Safari включена опция "Async Frame Scrolling". Необходимо отключить эту опцию "Настройки" → "Safari" → "Дополнения" → "Experimental Features" → "Async Frame Scrolling".

12 Отключить уведомления и звонки

Рекомендуется отключать уведомления и входящие звонки при прохождении прокторинга на мобильных устройствах или при подключении мобильной камеры. Для этого нужно выполнить описанные ниже шаги.

12.1 В iOS Safari

Зайти в "Настройки" → "Не беспокоить" → включить "не беспокоить" сверху, Тишина — всегда, Телефон — разрешить звонки от — ни от кого, Убрать флаг в "повторяющиеся звонки".

12.2 В Android Chrome

Зайти в "Настройки" → "Звук" → "Не беспокоить" → "Выключить сейчас".

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

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

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

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

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

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

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

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

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

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

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

name
author
description
homepage_url

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы включить инлайн инсталляцию, установите флаг 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

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

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

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

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

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

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

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

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

Читайте также: