Я разрабатываю веб-приложение для мобильных браузеров, которое обрабатывает видеопоток с задней камеры в режиме реального времени. На основании некоторой вычисленной функции мы можем сохранить текущий кадр для последующих операций.
Подробный рабочий процесс следующий:
Входной видеопоток в браузере имеет разрешение 4K. Мы используем 3 полотна: два полотна имеют разрешение 4K, а последнее имеет значительно меньшее разрешение (примерно 400x600). Мы получаем кадр из видеопотока и рисуем его на холсте 4K. Затем мы рисуем этот 4K холст на самый маленький. Затем мы получаем представление массива изображения с этого небольшого холста и выполняем с ним некоторые вычисления. Основываясь на этом расчете, мы решаем, должен ли этот кадр храниться или нет (мы говорим, что нашли «Лучший кадр»). Этот лучший кадр мы сохраняем в исходном разрешении 4K на втором 4K-холсте для окончательной обработки и продолжаем обрабатывать следующие кадры в надежде улучшить немного.
В моей работе я столкнулся с проблемой, которую показывает Google Chrome меньшая производительность, чем FireFox на том же устройстве, и значительно худшая производительность, чем у Safari на устройствах того же класса. Для демонстрации проблемы я создал тестовый html пример. В нем я использую все операции, которые считаю критическими. Есть: отрисовка кадра из видеопотока на первый холст 4K, масштабирование этого холста и его отрисовка на наименьшем холсте, получение буфера массива из наименьшего холста для расчета. Эти три операции вызываются для каждого кадра, поэтому их производительность для меня наиболее важна.
Репозиторий с примером
Развернутый пример
Измеренные таймеры:
Время выполнения originalCanvas.drawFrame, мс - рисование видеокадра на холсте 4K
Время выполнения scaledCanvas.drawFrame, мс - рисование холста 4K на небольшом холсте
Время выполнения scaledCanvas.getBmpData, мс - получение байтового массива из небольшого холста
Все тестируемые большие холсты имеют разрешение 3840x2160, все маленькие - 711x400.
Теперь перейдем к самому важному. .. Почему у нас такое большое неравенство в производительности в разных браузерах и на разных устройствах одного класса? К сожалению, я не могу протестировать пример в Chrome и FireFox на iPhone из-за запрета доступа к камере. Я считаю, что манипуляции с холстами - это простая операция, которая не должна быть такой длинной. И почему Safari обладает невероятной производительностью по сравнению с Chrome или даже FireFox?
Надеюсь, мои топи c были не очень скучными. Я был бы рад услышать все о моем рабочем процессе в приложении или о моих выводах. Большое спасибо!