Записываем экран и звук через расширение в браузере и сохраняем в NextCloud

Здравствуйте дорогие читатели.

В статье делюсь опытом создания расширения для Chromium и Google Chrome браузера.

Раньше я пользовался «условно бесплатными расширениями и программами для записи скринкастов», но в какой-то момент некоторые из них стали платными, и их удобства сошли на “нет”. А в некоторых оставались вопросы к безопасности данных и сложности с оплатой. К тому же, я не нашёл программ или расширений с функциями сохранения в своём облаке или сервере.

Возможно вы скажите — зачем мне расширение для браузера?! Ведь я могу взять ffmpeg с x11grab, приправить всё это bash-скриптом с использованием curl, и отправлять результаты в облако одной лишь командой в терминале! И возможно быстренько «перенесу» это решение под все операционные системы! И вы будете правы, но решение получится сложным. А если у нас есть под рукой браузер, то воспользуемся его возможностями (да, это странно — браузер для просмотра HTML-страничек, который записывает ваш экран).

Ссылка на готовое решение под катом.

Статья разделена на 2 части: первая часть относится к extensions API и MediaStream API, вторая к интеграции в Nextcloud.

В статье есть отсылки к исходному коду, поэтому предлагаю во время чтения подсматривать в исходный код.

Часть первая

Первое с чего я начал: оценка возможности создания такого расширения и возможность собрать минимально-рабочую версию. Логично было сразу зайти в документацию по extensions API для Chrome и проверить есть ли что-то про «desktop capture» — и такое там есть.

Далее нужно было изучить desktopCapture API и проверить как это работает. Там же был найден пример кода и расширения для записи содержимого вкладки, с замечанием на то, что код можно адаптировать для записи экрана.

Было требование, чтобы основной “код записи видеопотока” выполнялся в «background», но работа с offscreen api имеет ограничения. Например, в момент начала записи нужно запросить разрешение на экран и на микрофон (если это запись экрана со звуком) . Через offscreen api не получилось сделать, поэтому использовался другой подход: перед записью экрана будет открываться вкладка, в которой будут запрашиваться разрешения. И эта вкладка будет открыта во время записи, но на ней не будет фокусировки. (возможно следовало оставить фокусировку на этой вкладке, чтобы предоставить более детальную информацию о процессе записи).

И это сработало. В момент начала записи происходит открытие вкладки и фокусировка на «вкладку расширения», а затем происходит возврат на исходную вкладку.

Файл manifest.json

{   "name": "__MSG_extName__",   "description": "__MSG_extDesc__",   "version": "1.0",   "manifest_version": 3,   "default_locale": "ru",   "icons": {     "16": "images/icon-16.png",     "32": "images/icon-32.png",     "48": "images/icon-48.png",     "128": "images/icon-128.png"   },   "action":{     "16": "images/icon-16.png",     "32": "images/icon-32.png",     "default_popup":"popup.html"   },   "background": {     "service_worker": "background.js"   },   "permissions": [     "tabs",     "activeTab",     "desktopCapture",     "storage",     "unlimitedStorage"   ],   "host_permissions": [     "*://*/*"   ] }

Здесь service_worker служит для перенаправления сообщений во вкладку записи. Можно сказать что background.js это «маршрутизатор сообщений». Он инициирует запуск вкладки recorder.html через сообщение chrome.tabs.sendMessage(tabId) .

Внутри recorder.html (через recorder.js) мы запрашиваем разрешение на микрофон (если это запись со звуком) и выбираем экран для записи (если у вас подключено несколько экранов) и там же подписываемся на входящие сообщения от background.js и выполняем в нём основной код.

Теперь при закрытии popup.html запись будет продолжаться, а для индикации состояния записи, используем подсветку и вывод текста методами.

chrome.action.setBadgeText({text:  chrome.i18n.getMessage('rec')}); chrome.action.setBadgeBackgroundColor({color: '#eb1e3e'}); chrome.action.setTitle({title: chrome.i18n.getMessage('recording')});

После просмотра видеофайла, оказалось что его нельзя «проматывать». Файл не проматывался, не показывал длительность и невозможно было выполнить перемотку. После поиска в интернете, удалось найти задачу в ней обозначается то, что MediaRecorder не поддерживает и не собирается поддерживать мета информацию → https://github.com/w3c/mediacapture-record/issues/119 что привело к комментарию-решению использовать ts-ebml библиотеку.

Что такое ts-ebml? Это форк библиотеки, которая позволяет работать с медиа-контейнерами webm или mkv. Записывать и читать метаданные.

Далее я начал экспериментировать с этой библиотекой. Клонировал её и собрал в файл EBML.js , чтобы встроить в расширение и получить «проматываемый видеофайл» (seekable video). Для этого проанализировал код примера и применил внутри расширения ( без модификации примера)… И ничего не сработало.

Файл не проматывался. Пришлось изучать исходные коды библиотеки, а также искать ошибки в примере или в «данных» для примера (например слишком короткий тестовый видеофайл примера мог быть неподходящим). В итоге сработал ручной сбор длительности через API EMBL.Reader:

mediaRecorder.onstop = async function(e) {     mediaStream.getTracks().forEach(track => track.stop());     const blobFileSource = new Blob(chunks, {type: nextCloud.getVideoMime()});     const webMBuf = await fetch(URL.createObjectURL(blobFileSource)).then(res=> res.arrayBuffer());     const decoder = new EBML.Decoder();     const reader = new EBML.Reader();     reader.drop_default_duration = false;     var last_duration = 0;     // Этот важный код отсутсвует в оригинальном примере     reader.addListener("duration", ({timecodeScale, duration})=>{         last_duration += duration;     });      const elms = decoder.decode(webMBuf);     elms.forEach((elm)=>{ reader.read(elm); });     reader.stop();      const refinedMetadataBuf = EBML.tools.makeMetadataSeekable(reader.metadatas, last_duration, reader.cues);     const body = webMBuf.slice(reader.metadataSize);      const blobFile = new Blob([refinedMetadataBuf, body], {type: nextCloud.getVideoMime()});     const url = URL.createObjectURL(blobFile);             //... }

Теперь файл проматывается и можно увидеть его длительность в плеере. На этом этапе оценка возможности выполнена. Стало понятно — это работает, а значит теперь результаты можно загружать в «облако» (под облаком подразумевается Nextcloud).

Часть вторая

Для облака использую Nextcloud, поэтому первым делом проанализировал возможности для интеграции, и первым доступным способом стал «протокол WebDAV». У Nextcloud есть документация по работе с WebDAV. В этой документации есть примеры работы для Javascript.

Далее нужно было разобраться с загрузкой файла. Документация требует путь до папки для загружаемого файла. Поэтому в расширении был добавлен раздел «Настройки» , в котором можно настроить доступы к Nextcloud и путь для папки «загружаемых файлов».

Пользователю потребуется ввести «Адрес сервера» Nextcloud без «trailing slash» ( например https://example.ru ), а в поле «Директория» нужно ввести путь до папки куда будут сохраняться видеофайлы (например «/screencasts». или «/». ). Далее логин и пароль приложения, который создаётся в разделе «Безопасность». Этот логин и пароль, будет передаваться в заголовке запроса Authorization: Basic base64encode() .

Если вам понадобится сделать форк нашего расширения и привязать свой сервис и свои настройки, то рекомендуем использовать раздел «Настроек». Код который отвечает за эту форму находится в функции «_bindSettingsForm» в файле popup.js

Настройки сохраняются через chrome.storage.sync , поэтому они могут автоматически переносится на другие устройства.

Если настройки заполнены, то расширение будет отправлять запросы через «fetch api» к указанному в настройках серверу, и видеофайл будет автоматически загружаться в Nextcloud, а затем выдавать ссылку на видеоплеер (просмотр файла).

Если во время загрузки возникает ошибка, то расширение предложит сохранить файл локально.

Загрузка файла разделена на 2 этапа: первый этап выполнение PUT запроса к webdav адресу будущего файла (смотрите метод uploadFile в recorder.js).

uploadFile: async function (blob, fileName) {       let url = this.upload_path(fileName);        const totalBytes = blob.size;       let bytesUploaded = 0;        // Этот код нужен для отслеживания прогресса загрузки данных       const progressTrackingStream = new TransformStream({           transform(chunk, controller) {               controller.enqueue(chunk);               bytesUploaded += chunk.byteLength;               chrome.runtime.sendMessage({ name: 'nextCloudUploadProgress', data: bytesUploaded / totalBytes });           },           flush(controller) {               console.log("completed stream");           },       });       return await fetch(url, {           method: "PUT",           headers: {               "Content-Type": "application/octet-stream",               "Authorization": this.createAuthHeaderValue()           },           body: blob.stream().pipeThrough(progressTrackingStream),           duplex: "half",       }); }

Данной код, позволяет в процессе загрузки файла, выводить индикатор прогресса.

Второй этап — получение информации о загруженных файлах (смотрите метод fetchVideoPlayerLink в recorder.js).

fetchVideoPlayerLink: async function (fileName) {         const propertyRequestBody = `<?xml version="1.0"?> <d:propfind  xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns" xmlns:nc="http://nextcloud.org/ns">   <d:prop>         <oc:fileid />         <d:getlastmodified />   </d:prop> </d:propfind>`;          return new Promise((resolve, reject) => {             fetch(this.base_uri(), {                 method: 'PROPFIND',                 headers: {                     "Accept": "text/plain",                     "Depth": 1,                     "Content-Type": "application/xml",                     "Authorization": this.createAuthHeaderValue()                 },                 body: propertyRequestBody             }).then((response) => {                 response.text().then(text => {                     if (response.status < 400) {                         const nodes = this.parseWebDavFileListXML(text, nextCloud.base_uri(fileName));                         let lastNode = nodes.pop();                         if(lastNode && lastNode.hasOwnProperty('fileid'))                         {                             let playerLink = nextCloud.createPlayerLink(lastNode.fileid);                             resolve(playerLink);                         }                         else                         {                             resolve(null);                         }                     } else {                         reject(new Error({ response }), text)                     }                 });             }, (reason => {                 chrome.runtime.sendMessage({ name: 'nextCloudUploadFileError', data: 'fetch_link_error' });                 console.error('fetch_link_error');             }));         });  }

В этом коде есть недостаток: каждая загрузка файла вытягивает список ранее загруженных. К сожалению, я не разобрался (или не нашёл) способа получения только 1 актуального файла. Если кто-то сталкивался с такой задачей (ограничение кол-ва файлов и сортировка по дате модификации файла в Nextcloud) буду признателен за совет.

Выводы

Если у вас современный Chrome или Chromium (например 119 версии), то с его помощью можно записывать видео с экрана и отправлять его на ваш «собственный» сервер.

Благодарю за внимание и хорошего Вам настроения!