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

Фаза открытия

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

Hangouts? Не оптимизирован для демонстрации экрана. Текст расплывчатый и содержит артефакты, качество которых невозможно изменить.

Слабость? Совместное использование экрана - это премиальная функция на сервере Slack по цене 7 долларов за пользователя.

Skype? Ха ...

В конце концов я обнаружил, что в Discord есть функция совместного использования экрана. Попробовав его, мы обнаружили, что качество было недостаточно хорошим, чтобы делиться подробным текстом. Тем не менее, премиум-сервис Discord Nitro (теперь Nitro classic) стоил 5 долларов в месяц для одного человека, чтобы получить возможность транслировать высококачественное видео любому количеству людей. Мы решили попробовать, и… это сработало очень хорошо! Иногда качество ухудшалось в зависимости от качества процессора / сети, но по большей части он довольно легко обрабатывал потоковое видео 1080p с разборчивым текстом.

Фаза депрессии

Вскоре после охоты я купил Macbook. Предстоящие приложения для iOS, которые я буду разрабатывать, и херня Docker для Windows, с которой я столкнулся (рассказ в другой раз), сделали его легким, если не самым важным выбором. Как ни удивительно, до этого момента я прожил всю жизнь, не имея устройства Apple или даже ноутбука.

Почти сразу я обнаружил, что возможности совместного использования экрана в Discord рухнули на моем новом блестящем Mac. Мой процессор Core i5 3-го поколения на моем настольном компьютере отлично справлялся с потоковой передачей 1080p, но та же попытка на моем 6-ядерном Mac Core i7 (с дискретным графическим процессором) поставила его на колени.

Я не преувеличиваю. Запуск камеры или сеанс демонстрации экрана 720p / 1080p сделали MacOS непригодной для использования. Каждая анимация была нервной, набор текста сопровождался огромной задержкой ввода, и это было просто демонстрация моего экрана и редактирование текстового документа. Взгляд на монитор активности показал, что Discord загружает процессор на 100–300%. Йикерс…

Фаза расследования

Ясно, что здесь что-то не так. В видеокодере Discord есть ошибка, из-за которой MacOS падает.

Я начал с поиска Google. Мне не потребовалось много времени, чтобы найти многообещающего лидера: YouTube. Google стоит за форматом сжатия видео, известным как VP8 и его преемником VP9. YouTube начал кодировать все свои видео и обслуживать их, используя VP8 для разрешений 1080p и ниже и VP9 для разрешений 2k и выше. Альтернативы h264 для 1080p и h265 / HEVC для 2k + были по большей части оставлены гигантским видео.

Вступите в этап слева: Apple полностью отказывается от поддержки кодирования VP8 и VP9. Вы можете увидеть, к чему все идет ... Это было проблемой, когда Safari не мог правильно декодировать видео YouTube в течение многих лет. Когда вы просматриваете YouTube в Safari, вам не будет предоставлена ​​возможность просмотра видео в формате 4k, и вы будете вынуждены использовать 1080p, поскольку это единственное разрешение, в котором YouTube будет кодировать видео с использованием h264. Однако если вы работаете на Mac и используете Chrome, вы можете просматривать видео в формате 4K, а контент будет отображаться с использованием VP8 / VP9. Это фантастика, по крайней мере, мы все еще можем смотреть 4K-видео на YouTube, используя Chrome вместо Safari! Ну, держись, Джимми! Конечно, это будет не так просто.

Вы знаете, как люди не любят использовать Chrome на ноутбуках, потому что он потребляет много ресурсов и убивает вашу батарею? По одной из причин: когда вы просматриваете видео YouTube через Chrome на Macbook, вы собираетесь использовать для этого невероятно неэффективный программный декодер. Процессоры Intel Core серии 8-го поколения имеют аппаратное ускорение, которое должно упростить вам этот процесс, но Apple блокирует это на уровне ОС. Итак, когда вы смотрите видео на YouTube, ваш компьютер не знает, что у него есть возможность сделать это намного эффективнее, потому что Apple решила, что им не нравятся форматы кодирования Google. Есть даже расширение Chrome, которое обманывает YouTube, говоря, что ваш браузер не поддерживает VP8 / 9, чтобы заставить его предоставлять вам контент в формате h264, конечно, только с разрешением 1080p.

При чем здесь Discord?

Этап отчетности

Вы, наверное, догадались, какой видеокодер использует Discord для обмена видео… VP8! Это можно подтвердить, просмотрев статистику отладки вызовов во время видеозвонка Discord.

Вуаля! Я ввел свои выводы в отчет об ошибке на Discord. Discord использует группу добровольцев по поиску ошибок на базе сообщества, чтобы сообщать, воспроизводить и одобрять ошибки, о которых сообщают их пользователи. Я присоединился к серверу, сообщил об ошибке и объяснил сообществу, что нашел. В отчете было несколько человек, которые воспроизвели его на своих Mac, а также пара, заявившая, что они не могут воспроизвести его. Сбитый с толку, я объяснил даже более подробно, как Mac не может эффективно кодировать VP8 и как они должны проверять, есть ли у пользователей Mac на любой стороне вызова, чтобы переключиться на кодирование h264.

Наконец, ошибка была одобрена и появилась на их доске Trello. Меня пригласили в программу поиска ошибок Discord в качестве охотника за ошибками, и я остался немного доволен собой. Но подождите, у меня все еще нет возможности поделиться экраном с друзьями. Черт побери…

"К черту, мы сделаем это вживую!" Фаза

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

Конечный результат - согласие. Приложение для реагирования с зависимостями от node.js, express.js, response-router и peer.js. При загрузке Concord вы получаете доступную для копирования ссылку, которой вы можете поделиться с другими. Когда пользователь нажимает на вашу ссылку, они соглашаются и немедленно связываются с вами в одноранговом вызове. Во время этого звонка у вас есть возможность разговаривать, делиться экраном и видео с помощью камеры. И все это без загрузки приложения или плагина, регистрации учетной записи или максимальной загрузки процессора.

Начать аудиовызов очень просто:

//caller
await navigator.mediaDevices.getUserMedia({audio: true})
  .then(mediaStream => {
    let call = peer.call(id, mediaStream);
    call.on("stream", (stream) => {
      let audio = document.getElementById("speaker");
      audio.srcObject = stream;
      audio.load();
    });
});
//receiver
peer.on("call", (call) => {
  navigator.mediaDevices.getUserMedia({audio: true})
    .then((mediaStream) => {
      call.answer(mediaStream);
  });
  call.on("stream", (stream) => {
    let audio = document.getElementById("speaker");
    audio.srcObject = stream;
    audio.load();
  });
});

Добавить видео по-прежнему просто:

await navigator.getDisplayMedia({video: true})
  .then(mediaStream => {
    //attach the stream to a video element similar to audio
});

А контролировать качество видео можно с помощью подсказок по содержанию:

mediaStream.getVideoTracks().forEach((track) => {
  if ("contentHint" in track) {
    track.contentHint = 'text';
  }
});

Я подумал, что это прекрасно, что Консорциум World Wide Web включил подсказку по содержанию, которую я был особенно заинтересован в использовании, всего за несколько месяцев до запуска этого проекта. И результат был очень многообещающим!

Это согласованная потоковая передача с разрешением более 1080p с битрейтом, оптимизированным для просмотра текста, при этом потребляя 36% ресурсов ЦП. Вот как это выглядит на другом конце провода:

Конечно, на скриншоте сложно передать качество видеосеанса. Так что, если вы хотите попробовать сами, вперед! Https://concordapp.co должен быть активен до тех пор, пока его не забивают интернет-сети.

Нет базы данных, которая отслеживает пользователей, и мой сервер используется только для обслуживания JavaScript, HTML и обеспечения безопасного соединения с другим человеком. Бывают случаи, когда при определенных конфигурациях маршрутизатора / брандмауэра вы не можете напрямую связаться с другим человеком, и в этом случае ваши данные будут маршрутизироваться через мой сервер и немедленно ретранслироваться на другой конец (Информация о сервере TURN). Эта функция минимально протестирована, потому что у меня закончились люди, конфигурация сети которых конфликтует с одноранговым соединением.

К сожалению, на данный момент вам необходимо включить экспериментальные функции веб-платформы Chrome, чтобы иметь возможность делиться экраном (chrome: // flags / # enable-experimental-web-platform-features). Это всего лишь небольшой проект, чтобы увидеть, что я могу делать с WebRTC и React, а также попытаться создать что-то, что я могу реально использовать со своими друзьями. Я думаю, что это неплохо, если я потратил на это 2 недели в свободное время (и имейте в виду, Smash Bros Ultimate вышел на прошлой неделе…).

Если у вас есть предложения или проблемы с согласованием, дайте мне знать!

[email protected]

О, и результат того оригинального отчета об ошибке в Discord? "Не могу воспроизвести…"

🤔

ОБНОВЛЕНИЕ 18 декабря 2018 г .:

Сегодня в середине дня мне сообщили, что Concord не работает. Обновление Chrome 71, выпущенное вчера, нарушило мою реализацию функции совместного использования экрана. Я полностью виноват, я почему-то не подумал протестировать на Chrome Canary перед выпуском.

Concord был обновлен для обеспечения совместимости с последними версиями Chrome (стабильная 71 и нестабильная 73), поэтому для тех из вас, кто не мог попробовать его вчера, у вас должна быть возможность сделать это сейчас.

Приносим извинения за неудобства, народ!

Эта история публикуется в Noteworthy, куда ежедневно приходят более 10 000 читателей, чтобы узнать о людях и идеях, формирующих наши любимые продукты.

Подпишитесь на нашу публикацию, чтобы увидеть больше историй о продуктах и ​​дизайне, представленных командой Journal.