← Cloudflare Realtime / realtime / realtimekit / recording-guide

Создание пользовательского приложения для записи с использованием Recording SDK

Когда вы присоединяетесь ко встрече RealtimeKit, макет автоматически формируется так, чтобы обеспечить наилучшее взаимодействие: акцент делается на общем контенте, а активные спикеры выделяются, при этом остальные участники отображаются в виде небольших миниатюр. Когда вы начинаете запись встречи, она записывается с тем же макетом с помощью стандартного компонента UI Kit под названием RtkGrid ↗.

Если вы хотите настроить макет для своего приложения записи, собственные SDK записи RealtimeKit дают возможность гибко настраивать внешний вид записей по своему усмотрению. Доступны, например, следующие варианты:

• Показывать только активного спикера
• Демонстрация экрана с галереей миниатюр
• Демонстрация экрана с крупной миниатюрой активного спикера
• Демонстрация экрана без активного спикера и галереи
• Пользовательский фон для записи
• Портретная раскладка и так далее

Когда вы вызываете Начать запись, RealtimeKit запускает контейнер Cloudflare, открывает в нём браузер Chrome и загружает URL-адрес приложения записи. Если вы не укажете собственный URL-адрес в url параметр, используется встроенное приложение записи RealtimeKit.

Перед загрузкой вашего собственного приложения записи в браузере Chrome RealtimeKit добавляет authToken и config параметры запроса к URL. Например, если вы укажете этот URL в Начать запись API:

https://example.com/my-custom-recorder

RealtimeKit загружает приложение со следующими параметрами:

https://example.com/my-custom-recorder?authToken=AUTH_TOKEN_CREATED_BY_REALTIMEKIT&config=CONFIG_CREATED_BY_REALTIMEKIT

Значения-заполнители представляют параметры, предоставляемые RealtimeKit. Не добавляйте authToken или config самостоятельно к URL, переданному в Start Recording API. Ваше приложение должно считывать оба параметра из URL.

RealtimeKit создаёт authToken автоматически для встречи, запись которой вы запускаете. Этот токен создаётся с помощью recorder_preset_v2 preset. Если вы не создали recorder_preset_v2 preset, RealtimeKit использует глобальный preset с таким же именем, который управляется RealtimeKit и не отображается в вашем аккаунте.

Ваше собственное приложение для записи обязательно принять это authToken и использовать его для инициализации SDK RealtimeKit, чтобы получить meeting объект.

Любая конфигурация, которую вы указываете в Start Recording API, например настройки водяного знака, передаётся в приложение записи через config параметр запроса. Приложение записи по умолчанию автоматически считывает и применяет эту конфигурацию.

Если вы используете собственное приложение для записи, вы несёте ответственность за считывание и применение config. Все, что ваше приложение выводит в браузере, записывается как есть. RealtimeKit не применяет к выводу пользовательского приложения записи никакой дополнительной компоновки, водяных знаков или другой обработки.

hidden_participant флаг управляет только видимостью рекордера. Если он включён, рекордер скрывается от остальных участников встречи.

is_recorder флаг обозначает участника как рекордер и обеспечивает корректную работу записи. Если вы создаёте собственный recorder_preset_v2 preset для настройки цветов или внешнего вида записи, необходимо сохранить is_recorder включено. Удаление is_recorder может привести к сбою записи. Удаление hidden_participant может привести к тому, что индикатор записи станет виден другим участникам.

Локальное тестирование позволяет просматривать интерфейс приложения записи. Если открыть URL-адрес приложения записи напрямую на локальной машине, запись не начнётся.

Только для локального тестирования создайте любой пресет с hidden_participant: true, затем передайте токен авторизации, созданный с этим пресетом, в authToken параметр запроса при открытии URL локального приложения записи. Это позволяет увидеть внешний вид интерфейса рекордера. Не указывайте локальный тестовый токен в качестве authToken в URL, отправляемом в Start Recording API. При реальной записи RealtimeKit автоматически создаёт и передаёт токен записи.

Чтобы ускорить разработку, используйте Cloudflare Tunnel чтобы открыть доступ к вашему локальному приложению записи. Например, если ваше приложение работает на порте 1111, запустите Quick Tunnel с:

cloudflared tunnel --url http://localhost:1111

Замените 1111 с портом, используемым вашим локальным приложением. cloudflared выводит публичный trycloudflare.com URL-адрес. Вы можете указать этот URL в качестве адреса собственного приложения для записи при запуске записи, чтобы контейнер Cloudflare мог загрузить ваше локальное приложение.

При локальном тестировании вы можете увидеть ошибку WebSocket в консоли браузера, потому что ваш браузер не может подключиться к localhost:8080. Во время локального тестирования эту ошибку можно игнорировать. Рекордер использует этот порт внутри хостингового контейнера Cloudflare, и именно через соединение WebSocket приложение записи сообщает контейнеру, что нужно записать отрисованную веб-страницу.

См. примеры приложений на SDK записи ↗ примеры реализации, включая пример записи с водяным знаком ↗.

Пользовательские SDK записи используются поверх UI Kit или Core SDK. @cloudflare/realtimekit-recording-sdk пакет ↗ предоставляет RealtimeKitRecording класс для управления функциональностью записи.

constructor(options)

Создает экземпляр RealtimeKitRecording в качестве класса.

options (object): Объект options. Все параметры конструктора необязательны. Если вы не укажете какой-либо параметр, RealtimeKit использует значение по умолчанию.

init(client: RealtimeKitClient)

Инициализирует SDK, предоставляя RealtimeKitClient объект. Вызовите это после создания объекта встречи и до вызова meeting.joinRoom().

startRecording();

В большинстве случаев оставьте autoStart имеет значение true (значение по умолчанию), чтобы запись начиналась автоматически. Чтобы запускать запись вручную, установите autoStart к false в параметрах конструктора перед вызовом этого метода.

stopRecording();

Обычно вам не нужно вызывать этот метод, потому что autoStop по умолчанию равно true. Чтобы остановить запись вручную, задайте autoStop к false в параметрах конструктора перед вызовом этого метода.

cleanup();

Выполняет задачи по очистке после выхода из встречи, например удаляет добавленные обработчики событий и закрывает WebSocket-соединения.

Чтобы создать приложение для записи ваших встреч RealtimeKit, выполните следующие шаги.

npm i @cloudflare/realtimekit-recording-sdk

import { RealtimeKitRecording } from "@cloudflare/realtimekit-recording-sdk";

const recordingSdk = new RealtimeKitRecording(options);

Вызовите init после создания объекта meeting и перед joinRoom вызывается.

// Call this after you have initialized the RealtimeKit SDK and have the meeting object
await recordingSdk.init(meeting);

Чтобы запустить запись вручную, задайте autoStart к false в RealtimeKitRecording опции конструктора. Затем вызовите startRecording() после того как вы загрузили содержимое интерфейса и готовы начать запись.

await recordingSdk.startRecording();

Чтобы остановить запись вручную, задайте autoStop к false в RealtimeKitRecording опции конструктора. Затем вызовите stopRecording() когда будете готовы остановить запись.

await recordingSdk.stopRecording();

Как только stopRecording вызывается, рекордер в вашем приложении для записи завершает работу через несколько секунд. После этого выполнить какие-либо дальнейшие действия в приложении для записи уже не получится.

После создания приложения разверните его с помощью такой платформы, как Cloudflare Workers ↗. Обязательно запишите URL-адрес развернутого приложения: его нужно будет указать в API записи RealtimeKit.

В Начало записи встречи API укажите собственный URL (полученный на предыдущем шаге), чтобы указать расположение вашего развёрнутого приложения. Не добавляйте authToken к этому URL. RealtimeKit добавляет сгенерированный authToken и config параметры при загрузке приложения.