Dmitriytishanskiy.ru

Онлайн уроки
10 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Онлайн трансляция экрана компьютера

С экрана компьютера (screen sharing) в браузере по WebRTC

Описание

Поддерживаемые платформы и браузеры

Chrome

Firefox

Схема работы

  1. Браузер соединяется с сервером по протоколу Websocket и отправляет команду publish.
  2. Браузер захватывает экран и отправляет WebRTC поток на сервер.
  3. Второй браузер устанавливает соединение также по Websocket и отправляет команду play.
  4. Второй браузер получает WebRTC поток и воспроизводит этот поток на странице.

Краткое руководство по тестированию

Захват видеопотока с экрана компьютера и подготовка к его трансляции

1. Для теста используем демо-сервер demo.flashphoner.com и веб-приложение Screen Sharing в браузере Chrome

2. Нажмите кнопку «Start». Браузер запросит доступ к экрану, и начнется захват экрана и трансляция видеопотока:

3. Убедитесь, что поток отправляется на сервер и система работает нормально, откройте chrome://webrtc-internals

4. Откройте Two Way Streaming в отдельном окне, нажмите Connect и укажите идентификатор потока, затем нажмите Play.

Последовательность выполнения операций (Call Flow)

Ниже описана последовательность вызовов при использовании примера Screen Sharing

1. Проверка необходимости установки расширения

2. Установка соединения с сервером.

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

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

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

StreamStatusEvent, статус PUBLISHING code

6. Отправка аудио-видео потока по WebRTC

7. Остановка публикации потока.

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

StreamStatusEvent, статус UNPUBLISHED code

Разработчику

Функция демонстрации экрана может быть использована для публикации видеопотока, демонстрирующего рабочий стол или окно приложения.
Для демонстрации экрана WCS API использует расширение для браузера Chrome. Браузер Firefox, начиная с версии 52, не нуждается в расширении.

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

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

Создайте аккаунт 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’ как на изображении ниже.

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

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

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

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.

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

Ширина источника медиа экрана

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

Частота кадров источника медиа экран

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

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

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

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

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

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

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

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

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

Читать еще:  Онлайн продажи это

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

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

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

Известные проблемы

1) Если веб-приложение расположено внутри iframe элемента, публикация видеопотока может не пройти.

Симптомы: ошибки IceServer error в консоли браузера.
Решение: вынести приложение из iframe на отдельную страницу.

2) Если публикация потока идет с Windows 10 или Windows 8 и в браузере Google Chrome включено аппаратное ускорение, могут быть проблемы с битрейтом.

Симптомы: качество видео плохое, мутное, битрейт в chrome://webrtc-internals показывает меньше 100 kbps.
Решение: отключите аппаратное ускорение в браузере, переключите браузер или сервер на использование кодека VP8.

3) Остановка всех потоков, захваченных с экрана, при остановке одного из них

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

ТОП-10 Лучших сервисов для демонстрации экрана: обзор приложений, инструкция как сделать трансляцию

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

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

И часто, столкнувшись с подобным, человек не находит нужных ему, удобных и выгодных программ и сервисов, поэтому предлагаю рассмотреть топ-10 сервисов как сделать демонстрацию экрана.

Содержание этой статьи:

Сравнительная таблица

Skype

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

Благодаря простому функционалу и популярности Skype есть практически у каждого, а демонстрация экрана в нём является невероятно удобной.

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

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

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

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

Главным достоинством работы в данной программе является простота демонстрации экрана и лёгкость в использовании программы, минусы же могут возникнуть при низкой скорости интернета и при работе самого Skype, в котором время от времени портится качество связи.

Так, для этого требуется:

  • В списке контактов выбрать человека, которому вы хотите показать рабочий стол.
  • Щёлкнуть на его имени правой кнопкой мыши и в открывшемся меню выбрать функцию «Демонстрация экрана» (или «Показать экран»).
  • После щелчка появится дополнительное меню, в котором нужно выбрать часто единственную функцию «Показать весь экран».

В открывшемся меню выбираем функцию «Демонстрация экрана» (или «Показать экран»).

Так, программа Skype заслуженно занимает первое место в нашем списке Топ-10 среди сервисов, которые имеют функцию демонстрации экрана вашего ПК.

Viber

Читайте также: Что такое Viber (Вайбер)? Полный разбор мессенджера: как скачать и пользоваться абсолютно бесплатно + секретные функции

Если же по каким-либо причинам Skype у вас отсутствует или вам неудобно им пользоваться, вы всегда можете выбрать не менее популярную программу под названием Viber, которая доступна как для персонального компьютера, так и для телефона/планшета, которым вы пользуетесь.

Данная программа известна не только бесплатными звонками и сообщениями, но также и тем, что с её помощью очень легко сделать демонстрацию экрана.

Действия не сложнее, чем в предыдущем сервисе:

  • Во время разговора в Viber, в правом нижнем углу, нужно нажать «Screen Capture», или же «Демонстрация экрана».
  • Затем следует выбрать область демонстрации и нажать кнопку «Начать». Трансляция экрана начнётся автоматически.

Демонстрация экрана в вайбере

Достоинства и недостатки являются такими же, как и предыдущем сервисе, однако же, здесь сделать демонстрацию экрана немногим проще.

К тому же, плюсом является и неограниченность демонстрации во времени, качество её зависит лишь от скорости вашего интернета.

Mikogo

В предыдущих сервисах трансляцию экрана можно было проводить только с одним человеком, Mikogo же позволяет сделать демонстрацию экрана одновременно для нескольких участников.

Основным преимуществом программы является то, что она совершенно бесплатна и легка в использовании, а также позволяет создавать видеоконференции с большим количеством участников.

Чтобы начать демонстрацию экрана, необходимо:

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

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

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

Демонстрация экрана в Mikogo

TrueConf

Ещё одним сервисом является TrueConf версии 3.2, в котором впервые в существовании данного продукта появляется возможность демонстрации экрана, весьма популярная в последнее время.

Читать еще:  Создание презентаций онлайн на русском бесплатно

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

Так, общение в режиме видеосвязи доступно даже в HD качестве. Использовать TrueConf достаточно просто:

  • После начала конференции в окне появится иконка в виде монитора – «Показ рабочего стола».
  • Следует нажать на эту иконку. После нажатия программа выдаст диалоговое окно с подтверждением трансляции рабочего стола.
  • После нажатия на кнопку «Да» в диалоговом окне демонстрация экрана начнётся автоматически.

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

Используем TrueConf для демонстрации экрана

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

Brosix

Если же предыдущие сервисы по каким-либо причинам вам не подходят, существует ещё один, такой же простой в использовании, сервис – Brosix.

Чтобы запустить показ экрана с помощью этой программы, необходимо выполнить лишь несколько простых шагов:

  • В списке контактов выбрать человека, которому вы хотели бы продемонстрировать свой экран.
  • Щёлкнуть значок «Демонстрация рабочего стола», который находится с правой стороны.
  • Остаётся только выбрать тип сеанса: демонстрировать свой экран или же просмотреть экран выбранного человека.

Демонстрация экрана в Brosix

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

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

Из недостатков следует отметить цену программы и ограниченность пользования только двумя собеседниками.

Join.me

Если же скачивать программу для вас проблемно, или вы не располагаете временем для установки и настроек продукта, сделать демонстрацию экрана вам поможет онлайн-сервис под названием Join.me.

Сервис бесплатный, впрочем, только до определённого ограничения, после которого данный сайт требует покупку услуг.

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

Чтобы начать трансляцию на этом сайте, необходимо:

  • Зайти на сайт join.me.
  • Нажать на кнопку с надписью «share» и сохранить утилиту.
  • Запустить сохранённую утилиту с места/папки, в которой вы её сохранили, после чего трансляция трансляция вашего экрана начнётся автоматически.

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

Демонстрация экрана

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

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

Краткое описание возможностей

  • выбор приложения для демонстрации;
  • выбор качества вещания: авто (качество подстраивается под скорость и качество соединения), низкое, среднее и высокое;
  • чат при показе экрана: вы не пропустите сообщения участников, даже если будете работать в другом приложении.

Как скачать плагин для демонстрации экрана

Платформа предложит скачать специальный плагин при первом запуске демонстрации экрана. Однако мы рекомендуем сделать это заранее — во время Теста системы для ведущего.

Плагин подходит для операционных систем Windows (версия 7 и выше) и macOS (версия 10.9 и выше).

Как установить плагин для демонстрации экрана на Windows

Шаг 1. Скачайте и запустите установочный файл.

Шаг 2. В открывшемся окне пройдите все этапы установки, оставив путь, указанный по умолчанию.

Как установить плагин для демонстрации экрана на macOS

Скачайте и перенесите программу в папку Applications.

Обратите внимание! Если у вас не получилось установить плагин для демонстрации экрана, проверьте список распространенных проблем здесь.

Как установить плагин для демонстрации экрана на macOS Catalina

  • Нажмите на значок “Установить плагин”:

  • Перейдите в папку «Загрузки», в которой расположен файл, и откройте его:

  • В появившемся предупреждающем окне нажмите «Открыть» (Open):

  • Перенесите приложение в папку «Applications»:

  • Откройте папку «Applications» и снова откройте приложение WebinarScreenSharing.
  • В предупреждающем окне нажмите «Открыть» (Open):

  • Вернитесь к окну вебинара и нажмите «Попробуйте ещё раз». Появится системное сообщение, с предложением открыть приложение. Нажмите «Открыть WebinarScreenSharing»:

  • После этого откроется окно настроек «Защита и безопасность» (Security&Privacy), раздел «Конфиденциальность» (Privacy), вкладка «Запись изображения экрана» (Screen Recording):

  • Поставьте галочку рядом с приложением WebinarScreenSharing:

  • Вернитесь к окну вебинара и нажмите «Попробуйте ещё раз». Появится системное сообщение, с предложением открыть приложение. Нажмите «Открыть WebinarScreenSharing»:

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

Шаг 1. Нажмите на значок экрана в левом нижнем углу.
Шаг 2. Разрешите запуск плагина.
Шаг 3. Настройте демонстрацию экрана.
Шаг 4. Нажмите на кнопку «Запустить».

Как настроить демонстрацию экрана

Шаг 1. Выберите качество демонстрации

Выберите требуемое разрешение — высокое, среднее или низкое — или оставьте опцию «Авто», чтобы платформа автоматически подстроила разрешение под скорость и качество соединения.

От выбранного разрешения будет зависеть нагрузка на интернет-канал участников: чем выше разрешение, тем более качественным должно быть интернет-соединение.

Шаг 2. Настройте оповещения о сообщениях чата

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

Всплывающие уведомления появляются только при свернутом окне браузера.

Шаг 3. Выберите область демонстрации

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

Читать еще:  Бизнес тренер онлайн

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

Чтобы завершить демонстрацию экрана, нажмите на кнопку «Остановить».

Также демонстрация будет автоматически завершена при постановке вебинара на паузу.

Прямые трансляции с компьютера

Прошлой осенью мы официально запустили закрытое тестирование прямых трансляций на аудиторию популярных игровых стримеров России и СНГ. Затем вышло приложение VK Live для создания мобильных трансляций с устройств на базе iOS и Android. Мы рады объявить, что теперь все пользователи и сообщества могут проводить прямые трансляции ВКонтакте при помощи компьютеров, ноутбуков и специального оборудования.

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

Как это работает

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

В развёрнутом виде на сайте справа от плеера доступен чат, в котором зрители могут общаться друг с другом во время просмотра.

Спустя несколько секунд после завершения трансляции можно посмотреть её повтор в том же окне плеера.

Как создать трансляцию

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

Рекомендуем ознакомиться с нашей пошаговой инструкцией по созданию прямых трансляций с компьютера при помощи специального ПО.

Откуда узнают подписчики

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

Как зарабатывать

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

Подробнее про подключение пожертвований можно прочитать здесь.

Кроме того, авторы трансляций, преодолевшие отметку в 250 тысяч подписчиков, могут участвовать в программе дистрибуции видеоконтента и зарабатывать на показах рекламы перед своими видео: для участия нужно отправить запрос в Поддержку.

В будущем мы планируем запустить и другие способы монетизации трансляций, о которых обязательно расскажем. Следите за новостями!

Сервисы и программы для прямых трансляций. Как запустить прямую трансляцию

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

1) Проведение прямых трансляций внутри одной социальной сети по отдельности через мобильный телефон

2) Запуск прямых трансляций на множество площадок одновременно самостоятельно

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

3) Проведение прямого эфира сразу во множество социальных сетей для новичков автоматизированно

4) Прямой эфир на множество площадок одновременно самостоятельно с графикой и нескольких камер

Заказать прямую трансляцию

5) Прямые трансляции с удаленным режиссером монтажа

Как подключить внешнюю камеру, например зеркальный фотоаппарат

Почему прямые трансляции нужно использовать для бизнеса

Почему люди вообще смотрят прямые трансляции?

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

Например, в Genius Marketing хотел записаться на курсы. Спросил, будут ли это прямые трансляции или записи. Сказали — записи. Меня это напрягло. Но прошло два месяца, и они запустили курс с онлайн-сессиями в прямом эфире. Значит на это есть спрос.

В чем преимущества прямых трансляций:

  • открываемость прямых трансляций на 15-20% выше, чем уже записанных видео
  • больше доверия к спикеру, так как прямой эфир вести тяжелее (не получится перезаписать)
  • больше охват (за время трансляции к Вам может подключиться большое число зрителей, одновременно смотрят, например, 100, а всего увидят около 1000)
  • социальные сети заинтересованы в том, чтобы прямые трансляции смотрели (это дополнительная возможность показывать рекламу), для этого они:
  • поднимают прямой эфир в ТОП по основным ключевикам
  • начинают активно предлагать пользователям присоединится к прямому эфиру
  • допоказывают запись прямого эфира для Ваших подписчиков (до 30% от всех показов)

Выводы

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

P.S. Новые технологии развиваются. Российский производитель сделал видео карту для прямых трансляций с удобным облачным сервисом и своим ПО, а также безопасностью передачи сигнала по интернету. В карте можно разместить несколько сим.карт разных телефонных операторов, чьи сигналы будут объединятся и подстраховывать друг друга. Подробнее: https://facecast.net/static/pdf/evacoder.pdf

Заказать прямую трансляцию

Подписаться на бесплатный мини-курс по видеомаркетингу => ЖМИТЕ

Подписывайтесь на полезные статьи по видеомаркетингу в:
Telegram
Instagram

Михаил Салаев
видеомаркетолог NAVIDUU

Ссылка на основную публикацию
Adblock
detector