В течение 12 лет я занимался созданием продуктов и платформ на основе WebRTC в глобальном масштабе. Имея в общей сложности более 20 лет в ИТ-индустрии, я в настоящее время являюсь старшим директором по видеотехнике в RingCentral. В моей нынешней роли здесь, в RingCentral, я отвечаю за обеспечение следующего поколения видео-взаимодействия в реальном времени во всех наших продуктах, которые являются частью собственной платформы для видеоконференций RingCentral. За эти годы я создал пять различных продуктов на основе технологии WebRTC.

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

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

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

Что, если вы хотите использовать эту веб-технологию и сделать так, чтобы ваш мобильный продукт работал на настольном компьютере? Есть два варианта: PWA (прогрессивные веб-приложения) и Electron. PWA — это быстрый и простой способ распространить существующее веб-приложение, доступное в мобильных магазинах, на ПК или Mac. Однако Electron предлагает многим пользователям более удобный и эффективный подход. Основные компании и приложения, использующие Electron сегодня, включают Slack, Microsoft Teams, Facebook Messenger, WhatsApp, Twitch, Skype и, конечно же, RingCentral. С этими ведущими компаниями, использующими эту технологическую структуру, вы можете быть уверены, что она заслуживает доверия и ценна.

Так что же такое Электрон?

Согласно его веб-сайту, Электрон — это: фреймворк для создания нативных приложений с такими веб-технологиями, как JavaScript, HTML и CSS. Это также самый простой способ создания настольного браузерного приложения для Windows, Mac и Linux. Electron сочетает в себе Chromium (который поставляется со стеком WebRTC) и Node.js. Таким образом, ваше общее приложение является функцией самого Electron (контейнера веб-браузера), вашего веб-приложения и любых модулей Electron или собственных модулей, которые вы добавляете к нему.

Что может пойти не так?

Поскольку вы используете Electron для оформления своего веб-приложения, это означает, что ваше приложение должно поддерживать этот дополнительный «браузер». Он запускает различные интерфейсы Javascript, которые определяет разработчик, например, как он может реализовывать пользовательские возможности совместного использования экрана. Собственные модули узлов предоставляют один API для вашего веб-приложения, но имеют разные реализации для Windows или Mac. Поэтому они, скорее всего, также имеют свои собственные аппаратные особенности для подключения, например, к графическим процессорам (GPU). Эти собственные модули также обычно работают только с одной основной версией Electron.

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

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

Еще одна болевая точка — управление зависимостями. Когда что-то пойдет не так, дерево зависимостей может оказаться непростой задачей. Возможно, вам придется поговорить с различными сообществами с открытым исходным кодом о таких инструментах, как GitHub, Slack и Discord, просто чтобы выяснить, где находятся проблемы. Имейте в виду, что в любой момент времени поддерживается только три версии Electron, поэтому обязательно проверяйте уровень версии, который у вас есть, и следите за последними поддерживаемыми версиями. После первоначальной проверки вы можете проверить свои версии Chromium и WebRTC. Chromium поддерживает только те же самые три версии Electron, но у него есть много собственных версий и подвыпусков, которые могут по-разному взаимодействовать с Electron, поэтому обязательно загляните и в эти уголки. При отладке проблем с WebRTC вы обнаружите, что это может оказаться одним из наиболее сложных для отладки областей, поскольку это зависит от правильной работы двух других уровней.

Понимание цикла выпуска

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

Chromium недавно перешел на цикл выпуска каждые 4 недели, поэтому Electron изменил частоту цикла выпуска с 12 до 8 недель, по сути, выбирая каждый четный выпуск Chromium. Преимущество более частых выпусков заключается в том, что они будут меньше по объему, и вы потенциально быстрее получите доступ к их исправлениям ошибок или добавленным функциям. Недостатком является то, что цель (цели) движется быстрее, и поэтому ваш код может устареть быстрее.

Например, Electron 19 был выпущен 24 мая и поставляется с Chromium 102. Сейчас поддерживаются версии с 17 по 19, и эти поддерживаемые версии быстро меняются, поэтому убедитесь, что ваши проекты также обновляются, чтобы использовать последние функции и иметь надлежащие уровни поддержки.

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

Среди прочего, эта проблема заключалась в том, что мы не могли использовать H264 для совместного использования экрана. Теперь, как определить выпуск исправления в WebRTC, затем в Chromium и Electron? Во-первых, вам нужно найти отправку патча. Получите хэш коммита из отправки патча или в системе отслеживания проблем, если они были связаны вместе, вы найдете комментарий от bugdroid. Введите хэш коммита в cdash и вуаля. Иногда в текущей стабильной версии есть бэкпорт, как в этом примере. Простое повторение тех же шагов даст вам второстепенный релиз в cdash.

Итак, где этот коммит попал в Electron? Беглый взгляд на основные примечания к выпуску подскажет, на какую версию обратить внимание. В текущем примере E11. Затем вы можете найти примечания к выпуску всех второстепенных выпусков E11. В этом случае Electron 11.0.0 уже содержал исправление, которое мы ищем. Иногда Electron также выбирает некоторые патчи Chromium, в основном связанные с безопасностью.

Лучшие практики

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

Тестируйте, тестируйте, тестируйте!

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

Обновить

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

Настройка

Используйте собственную стратегию Electron, ТОЛЬКО если у вас есть ресурсы, среда разработки и возможность проводить тестирование обеспечения качества.

Внесите свой вклад!

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

Сообщить об ошибках

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

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

Присоединяйтесь к бета-программам

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

Один пример из RingCentral: RED, RFC IETF, в котором описывается механизм дублирования аудиопакетов для борьбы с потерей пакетов. Jitsi поддержал вклад Филиппа Хенке, и мы провели обширное лабораторное тестирование, а затем поделились отзывами наших внутренних пользователей. "Глянь сюда." RED теперь GA в Chrome 96.

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

Альтернативные пути

Конечно, как и в жизни, есть много подходов к достижению одной и той же цели. Все эти функции на основе ИИ, упомянутые выше, имеют очень высокую цену на ЦП, ГП и объем памяти, поэтому вы можете рассмотреть аналогичное решение, недавно анонсированное Microsoft Teams. Это решение позволяет разработчику смешивать нативный код с кодом JavaScript, используя новую функцию из Windows 10. Она называется WebView 2. Под капотом WebView 2 — это экземпляр Microsoft Edge, который поставляется с ОС, основанной на Chromium, с точно такой же частотой выпуска. Вы можете выбрать вечнозеленый дистрибутив, а можете закрепить конкретную версию Chromium.

Этот новый подход интересен, если ваше приложение, как и наше, представляет собой сочетание функций связи в реальном времени и асинхронной связи. Контейнер больше не Electron, это родное приложение, имеющее доступ ко всем фреймворкам и API, которые может предложить операционная система. Обратите внимание, что вам придется использовать собственный libWebRTC, который не включает захват или рендеринг, это то, что вам нужно будет реализовать самостоятельно. У вас может быть альтернатива, которая позволит вам иметь лучшее для каждого из этих миров. В настоящее время это доступно только в Windows, но MacOS находится в Дорожной карте WebView2 Microsoft. А пока вы можете использовать WKWebView для MacOS, если ваше веб-приложение поддерживает Safari.

Дорога впереди

Чтобы узнать больше о том, что такое WebRTC, вы можете посетить этот веб-сайт учебного курса WebRTC: https://webrtccourse.com.

Кроме того, вот список дополнительных ресурсов, которые могут помочь вам в вашем путешествии по WebRTC.

Веб-ресурсы:

Ресурсы конференции:

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

Хотите быть в курсе новых API и функций? Присоединяйтесь к нашей Программе, которая изменит правила игры и получайте отличные награды за развитие своих навыков и получение дополнительной информации о RingCentral.