Хакатон SberCloud
для разработчиков
До конца регистрации:
04
:
11
:
51
:
18
Подробнее
Трибуна
Aleksey Zakharov
246

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 }
Объявление на vc.ru Отключить рекламу
Маркетинг
Как мы продали обувь ручной работы на 12 млн рублей за четыре месяца: кейс Biker Boots Russia
Как разработать стратегию продвижения, правильно выстроить рекламную воронку и установить рекорд по объему продаж…
0
Комментариев нет Накачай стартап
Популярные
По порядку

Комментарии

null