Чтобы все это красиво смотрелось как на телефоне, так и на рабочем столе, следует написать простой стиль. css:
Наконец, main.js, который выполняет всю работу интерфейса:
Здесь нам нужно объяснить, что такое аутентификация. Конечно, вы можете обойтись и без него, но тогда нет гарантии, что злоумышленник не воспользуется API вашего сервера (подробнее об этом чуть позже) и не накинет на него что-нибудь плохое. Поэтому, конечно, серверная сторона должна аутентифицировать клиента.
Связываться ли с WebRTC
Это можно сделать разными способами (например, классическое получение токена с сервера в ответ на отправленный пароль или анализ отпечатка пальца клиента). Однако я решил не заморачиваться с этим и сильно упростил ситуацию: пароль просто отправляется на сервер в заголовке запроса выборки X-PWD; он не вводится пользователем (в глухом переулке он, вероятно, не успеет ввести свой пароль), он просто содержится в строке запроса. Итак, чтобы получить доступ к письменной службе, URL-адрес вида
где abcde — пароль. На стороне сервера пароль просто записывается в коде: опять же, мы пишем все для себя, так что, на мой взгляд, мы можем справиться с таким примитивным способом аутентификации. Параноики, конечно, могут написать что-нибудь более сложное.
Проблема кроссбраузерности
Начнем с проблемы хостинга и https. На самом деле, к сожалению, вы не можете получить доступ к видеопотоку камеры, если доступ к html-странице осуществляется через http. Наверное, это правда. Как обычно, есть два выхода из этой ситуации: либо использовать самозаверяющий сертификат (вы единственный, вы можете просто принять этот сертификат один раз и больше не беспокоиться), либо найти хостинг с поддержкой https.
Бесплатные услуги хостинга, в том числе с поддержкой https, сейчас доступны в изобилии. Оптимальный вариант, конечно, разместить проект только дома или на работе, не все хотят этим заморачиваться, поэтому я написал бэкэнд на php, сервис которого на бесплатном хостинге повсеместен. Вы будете смеяться, но файл api.php состоит всего из 6 строк:
Итак, приступим… Фронтенд
Сервер просто берет видео, которое поставляется с запросом на загрузку, и помещает его в папку с видео с именем, например, 200613-190123.webm (где 6/13/20 — это дата, а 19:01:23 — время). Это сделает папку с видео доступной для всех (что удобно, поскольку вы можете загрузить записанное видео через браузер); Если вы этого не хотите, вы можете закрыть эту папку с помощью .htaccess или каким-либо другим способом и загрузить записанное видео по ftp.
Здесь следует сделать важный момент. Если ваша неприятная встреча в уединенном переулке длилась, например, 5 минут, то на сервер будет отправлено 6 видеофайлов (пять минут и шестой с оставленным «хвостом»). В этом случае правильно будет воспроизводиться только первый файл; остальные (это особенность реализации MediaRecorder) будут рассматриваться как продолжение предыдущих и не будут воспроизводиться сами по себе.
Однако это не недостаток, а, скорее, преимущество: для получения плавного видео не нужно открывать видеоредактор и склеивать все вместе (что само по себе нехорошо, так как любой судебно-медицинский эксперт найдет следы сборки ). Достаточно объединить все файлы в один и готовый фильм готов (вариант для unix систем ниже):
Как упоминалось выше, попытки протестировать все, что написано в разных браузерах Android, увенчались успехом только для Chrome (возможно, вам повезет больше). Конечно, я мог бы адаптировать код внешнего интерфейса и разрешения камеры к любому другому браузеру, но Chrome мне подошел, поэтому я сосредоточился на другой проблеме.
Понятно, что в экстренной ситуации вы долго не будете открывать браузер, не говоря уже о том, чтобы ввести какой-нибудь URL, не говоря уже о пароле в строке запроса. Более того, в Chrome для Android нет возможности установить стартовую страницу (не путать с домашней страницей!). Но открытие браузера и нажатие на значок домашней страницы (если вы установили его в качестве домашней страницы) занимает довольно много времени.
Решение очень простое, вам нужно создать простой файл alarm.html в файловой системе телефона:
Создаем ярлык к этому файлу на рабочем столе телефона (рядом с главным экраном).Теперь, в экстренной ситуации, вам нужно сделать всего три вещи.
… а теперь бэкенд
включите мобильный интернет (если он не включен постоянно);
щелкните ярлык alarm.html;
нажмите кнопку «Записать» на открывшейся странице.
Последнее действие можно пропустить, если нам удастся немного изменить код внешнего интерфейса, чтобы запись активировалась сразу после загрузки страницы.
Вот и все: простое решение, с которым может справиться каждый.Я искренне желаю, чтобы вы никогда не использовали его.
