Сложный проект для программиста – это шанс вырасти⁠⁠

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

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

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

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

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

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

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

Затем естественно вышел на провайдеров, которые предоставляют в готовом виде решения с проработанными SDK под разные языки программирования. На российском рынке ничего вменяемого не нашел, есть некоторые с конскими ценами, отсутствующей документацией, вероятно заточенные под гос.сектор для распила бюджетов. На западе этого добра навалом, среди них самые крупные это Twilio, Agora, возможно есть еще, но мне хватило того, что я нашел отличнейшую документацию по Agora, богатый набор SDK практически под все популярные платформы, а на codecanyon – практически каждый второй проект с видеоконференциями запилен на Agora, это для меня четкий сигнал – решение рабочее. Тем более, что в бесплатном тарифе можно оставаться довольно долго, пока твой сервис не получит должной популярности.

Готовые проекты видеочатов на codecanyon

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

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

Первая серьезная преграда

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

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

Созваниваюсь с клиентом, объясняю. Клиент понимает и говорит, что надо пробовать искать пути решения. Я пускаюсь в изучение.

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

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

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

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

Но клиент со свойственным ему оптимизмом сказал, что надо придумать решение.

Раз на стороне сервера запись еще совершенно сырая фича, то я понял, надо выполнять запись в самом android-приложении, а затем отправлять с телефона готовый нормальный MP4-файл прямо в облако.

Индус спаситель

Быстренько нашел интересный проект FlipCam замечательного индуса, очень ему благодарен. Только потом я узнал, что в Android есть готовый CameraX.

Из FlipCam я взял активити и библиотеки для работы с камерой и записью видео. Там был хороший открытый метод drawFrame – в котором велась практически прямая работа с OpenGL.

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

Официальная документация по отправке своего видео-потока в agora.io

Разработчики agora вы серьезно ставите в документации такие указания? На поиски хоть чего-то, что может пролить свет я потратил две недели. Даже в отчаянии написал индусу из FlipCam, чтобы он мне помог раскрыть секрет рендеринга. Обратился к знакомому Java-кодеру. Он полез в ChatGPT и выдавал мне самые очевидные ответы из документации.

Все упиралось в мое жесткое непонимание и незнание тонкостей OpenGL и всех этих нюансов при работе с Surface, TextureView.

Сначала я смог после изучения тонны китайского кода (похоже, что agora.io писали китайцы), найти как можно получить результирующий буфер после обработки swapBuffer. Нашел код, как из этого buffer сделать BMP, затем трансформацию BMP в YUV и уже из этого YUV сформировать VideoFrame. Только после такой пирамиды клиент на выходе видел слайд-шоу, которое ничего кроме уныния не вызывало. Жуткие тормоза, а иногда приложение просто вылетало и закрывалось.

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

Упорство, однако вывело меня на чудесную старую версию документации Agora, там я нашел код, который на низком уровне реализовывал конвертацию ByteBuffer из OpenGL в VideoFrame.

Старая версия, спасибо, что ты есть!

Вот спрашивается, почему вы убрали упоминание про этот код из версии 4.x? Почему оно есть в 3.x?

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

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

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

Вывод

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