Трибуна
Aleksey Zakharov
181

Aperture - Simple Screen Recorder: браузерное расширение для захвата видео с экрана

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

В закладки

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

Идея

Aperture - это простое расширение которое позволяет записывать видео с экрана компьютера и редактировать его. Идея создания такого функционала вылилась из моего образования инженера-радиоэлектронщика. В университете у моих “коллег” по направлению преподавали “обработку видео сигналов“ - математическое представление различных фильтров (ч/б, сепия, блюр и т. п.) и применение их к изображениям. Я заинтересовался этим и начал изучать как подобное можно применить в вебе.

Если не вдаваться особо в технологические подробности фронтенд-разработки, то можно взять объект Canvas и обрабатывать каждый пиксель картинки с помощью алгоритма вышеописанных фильтров. Дальше я познакомился с технологией WebRTC и возможностями браузерных расширений записывать видео с экрана и вебкамеры. Так появился MVP моего расширения. Оно записывало видео с экрана и сохраняло его на компьютер пользователя.

Дальше - больше. Я решил изучить уже имеющиеся приложениями на “рынке”, их возможности, достоинства и недостатки. Самое популярное расширение подобного рода сейчас это Screencastify. Из крутых фишек - запись видео с экрана вместе с вебкой (картинка в картинке), редактирование: кроп и обрезка видео, возможность заливать видео в Google Drive и в YouTube. Из минусов - ограничение по длительности записи видео, ватермарки и отсутствие редактора в бесплатной версии. Также люди жаловались, что в случае если записываешь видео большой длительности и потом обрабатываешь в редакторе, то рендерится оно очень долго.

Функционал приложения

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

Немного о том как это работает. Для записи видео в файл существует класс MediaRecorder, он может записывает видео кусками (chunks) которые представляют из себя Blob-файлы с медиа-данными, таким образом я записываю массив из чанков по 1 секунде, а когда пользователь хочет обрезать видео просто удаляю ненужные! Таким образом никакой рендеринг не требуется и редактирование работает налету.

​Редактор в Aperture

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

Галерея в Aperture​

Бесплатная раскрутка и монетизация

Когда MVP достиг адекватного вида, я залил его в WebStore и начал искать пути раскрутки. Если для мобильных приложений существует множество площадок, где можно о нем “рассказать”, то с расширениями все сложнее. Я задействовал ProductHunt и не ошибся. За первый день я набрал 90 “лайков”, оно попало в тренды и судя по всему понравилось пользователям. Мне как разработчику было очень приятно! Если в первые дни установки расширения были около 20-30, то после PH они выросли до 100. А потом “счетчик” сошел с ума и за пару-тройку дней расширение набрало около 3 тыс. пользователей. Как оказалось какой-то добрый японец написал обзор на мое расширение на сайте Gigazine. Это достаточно известный новостной сайт в Японии, но я само собой услышал про него впервые.

Кстати касательно названия приложения и цветовой схемы. Мне очень нравится игра Portal. Поэтому название вышло из Aperture Laboratories, а основные цвета - голубой и желтый - это цвета порталов Portal Gun’а.

После того как количество пользователей перевалило за 5 тыс. друзьями мне начали говорить про монетизацию. В WebStore есть несколько вариантов платного распространения расширений: разовая покупка, платежи в приложении и подписка на месяц или год.

Для начала я посмотрел какими инструментами пользуются местные “гиганты” - в основном это были in-app payments. Я думаю это привлекательно для пользователя, потому что он может познакомиться с приложением и в случае если ему нужен дополнительный функционал - приобрести его. Но это относительно затратно с точки зрения внедрения в приложение да и многие разработчики уж слишком режут функционал, чтобы выбить эти самые покупки.

Разовые платежи я не стал рассматривать потому что планировал развивать приложение, да и в будущем нужно будет платить за облако каждый месяц. Я решил что маленькому приложению - маленькая подписка. Никто не будет покупать годовую подписку на расширение, если это не какой-то уже супер известный мастодонт рынка. Я выбрал месячную подписку - ценник минимальный (около $0.99), примерно в сумме в 2-3 раза меньше чем у приложений с аналогичным функционалом. Я думал что включение монетизации полностью отпугнет пользователей, но нет, установки упали раз в 10-20, но народ скачивает приложение. Сейчас в день выходит от 1 до 5.

​Распределение пользователей - на первом месте Япония (7000), затем США (500) и Португалия (200)
Установки за последнюю неделю​

Дальше - больше

Какие выводы я сделал из этой истории:

  • Нужно определиться с направлением, которое будет вам интересно, чтобы не сгореть на полпути и не забить на разработку
  • Изучите существующие решения и реализуйте в своем приложении все что вам понравилось как пользователю
  • Создайте MVP и получите фидбек от пользователей - это позволит вам гибко “доработать” свое приложение
  • Начните с бесплатных площадок для раскрутки
  • Дизайн и UX важная часть вашего приложения, разработчики часто про это забывают :)
  • Развивайте приложение, добавляйте новый функционал

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

Также сейчас я занимаюсь новым приложением, по сути это такой скрапер данных с соцсетей. Вы можете сохранять изображения и видео из Instagram и TikTok (да-да хайп) в приложение и скачивать их себе.

Спасибо за внимание к моей статье! Если вам интересна разработка расширений - обращайтесь, любая идея реализуема! :)

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Aleksey Zakharov", "author_type": "self", "tags": [], "comments": 0, "likes": 2, "favorites": 8, "is_advertisement": false, "subsite_label": "tribuna", "id": 86940, "is_wide": false, "is_ugc": true, "date": "Mon, 04 Nov 2019 17:35:19 +0300", "is_special": false }
0
{ "id": 86940, "author_id": 261167, "diff_limit": 1000, "urls": {"diff":"\/comments\/86940\/get","add":"\/comments\/86940\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/86940"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199116, "last_count_and_date": null }
Комментариев нет
Популярные
По порядку
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }