11 июля 2020 года Spotify открыл сервис для России, Украины и Беларуси. В марте 2022 года Spotify закрыла свой российский офис, как и все нормальные компании, из-за российского вторжения в Украину. Не знаю, как долго будет продолжаться стриминг для российских пользователей, но вряд ли слишком долго — заплатить за сервис Spotify невозможно. Спасибо за рыбу и все такое.

Во время карантина 2020–2021 годов я создал приложение для потоковой передачи мультимедиа Avacia, включив такие веб-сайты, как Netflix и Spotify, в приложение для macOS. Получившееся приложение меня удивило. Он может поместиться на дискете, на 1,44 МБ.

Скачать страницу для нетерпеливых

Мои причины создать приложение

  1. Я хочу иметь фреймворк, который поддерживает запуск простых приложений Electron на macOS, и приложение может быть MVP для этого фреймворка;
  2. Приложение с нативной платформой WebView должно использовать меньше ресурсов, таких как память, дисковое пространство, не переключать графический адаптер, пока он не понадобится;
  3. Добавление нового кода, зависящего от платформы, должно быть относительно простым;
  4. Бросьте себе вызов.

Современная кроссплатформенная разработка GUI немного хаотична. «Классические» (читай «старые») способы сделать это до сих пор работают. Вы можете запускать проекты Java, QT5/QML и даже C++ и быть счастливым, если владеете этими технологиями. Практически невозможно поддерживать такие приложения без большой команды или огромного сообщества, поэтому второго KiCAD или Gimp не существует. Новые Flutter или React Native выглядят почти так же, как и старые, но дают разработчику совершенно другой опыт благодаря обновлениям приложений в реальном времени.

У большинства энтузиастов совершенно другой подход — начать быстро, легко и не заботиться о технологиях. Электрон и Python для микроконтроллеров могут заставить волосы встать дыбом у профессиональных разработчиков, но это нормально, если вы хотите выпустить приложение через неделю или месяц. Спросите у профессионального разработчика, сколько будет стоить разработка кроссплатформенного приложения с захватом видео, потоковой передачей, воспроизведением, анимацией. И взгляните на API браузеров, которые позволяют сделать «то самое» приложение за неделю.

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

Вместо использования Electron, что является несколько очевидным выбором, я использовал электрино-проект и эмулировал некоторые API-интерфейсы Electron с помощью JavaScriptCore и WKWebView. Некоторые вещи вряд ли возможны в оригинальном проекте электрино, в том числе загрузка модулей с помощью require, Promises, обработка ошибок, поэтому мне нужно проявить немного творчества. На данный момент я могу добавить свою структуру в новую папку с html, ccs и js, и она будет работать.

Иногда Electron может неожиданно переключать графику на моем Mac и разряжать батарею как вампир, чего нельзя сказать о Safari/WKWebView. Я даже могу приказать своему приложению отображать пользовательский интерфейс с помощью встроенного графического процессора, когда подключен eGPU (я знаю, что eGPU уже мертвы).

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

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

Использование памяти также отличается, Chromium использует больше памяти в основном приложении, примерно вдвое в рендерере по сравнению с Safari 13. В Safari 15 потребление памяти примерно такое же.

Готов скачать и попробовать?

Эй, я так долго читал, чтобы узнать, как загрузить ваше программное обеспечение? И нет ни моей любимой *Тюбика, ни *Музыки?

Вы можете сделать это сами! Время взломать программное обеспечение.

Глубоко внутри Avacia.app вы можете найти папку Resources/app. Эта папка содержит javascript-часть приложения. Вы можете просматривать и изменять все, что хотите. Если приложение перестанет работать, просто загрузите его снова или замените файлы borken из репозитория GitHub.

configured-sites.js содержит конфигурацию для настроенных сайтов. Вы должны указать URL-адрес сайта и перетаскиваемые области. Без этого вы даже не сможете переместить окно, когда ваш сайт будет загружаться. Для определения перетаскиваемых областей требуется немного знаний CSS. Используя инспектор в предпочитаемом вами браузере, найдите уникальный селектор css для шапки сайта.

Клонируйте конфигурацию Netflix или SoundCloud и добавьте правило css для этого заголовка в функцию getInjectCss:

.site-header * {-webkit-user-drag: none; -webkit-app-region: drag;}

Есть ссылка на другие ключи конфигурации:

siteMediaType: выберите видео или аудио;

isVideoOnTop: показывать окно поверх других окон при воспроизведении видео. YouTube, Netflix, Vimeo — да, Coub weelky — нет;

getInjectCss: дополнительный css для адаптации сайта к приложению;

checkOnMediaPage: важный параметр для служб потокового видео. Проверяет, посещал ли пользователь страницу с видео. Должно возвращать false, если страница содержит превью.

getMediaInfo: некоторые сайты не используют API mediaSession, поэтому требуется настройка для анализа информации о странице и установки названия песни и имени исполнителя.

"Наслаждаться!"