Эта статья также доступна здесь. (Японский)
https://cloud.flect.co.jp/entry/2020/06/01/115652
(НОВАЯ СТАТЬЯ 20 октября 2020 г.):
Замена лица и виртуальный фон в вашем браузере
В прошлой статье я объяснил, как создать виртуальный фон для Amazon Chime SDK.
В этом посте я хотел бы продолжить разговор об Amazon Chime SDK.
Знаете ли вы, что на днях Amazon анонсировала новую функцию, добавленную к своему SDK Amazon Chime?
Эта функция позволяет участникам конференции обмениваться сообщениями с данными, используя канал передачи данных, используемый Amazon Chime. Как упоминалось в объявлении, это позволяет нам легко размещать доски и смайлики среди участников в конференц-зале. И его также можно использовать для управления состоянием конференц-зала, например, для принуждения участников к отключению звука.
Итак, я хотел бы показать вам, как сделать доску с помощью этой функции.
Это поведение доски, которую я сделал на этот раз.
Amazon Chime и сигнализация
Эти дополнительные функции Amazon Chime SDK используют сигнальную связь, уже существующую в Amazon Chime. Видеоконференцсвязь Amazon Chime осуществляется с помощью технологии WebRTC, а в WebRTC для управления сеансом используется сигнальная связь.
В частности, WebRTC используется для P2P-связи между браузерами, а сигнальная связь используется для идентификации пункта назначения другой стороны или для обмена ключами для криптографической связи, чтобы начать эту связь.
И хотя это называется P2P-коммуникацией, при обмене данными через брандмауэр необходимо пройти через сервер ретрансляции под названием TURN. Обмен информацией об этих маршрутах также осуществляется посредством сигнальной связи.
Если вы хотите узнать больше о WebRTC и его связи с сигнализацией, перейдите на эту страницу.
Amazon Chime предоставляет управляемые серверы ретрансляции и каналы сигнализации, чтобы упростить запуск видеоконференцсвязи в различных сетевых средах. Новая функция использует управляемый канал связи для этой сигнализации, позволяя обмениваться произвольными сообщениями данных. Таким образом, разработчики могут легко добавлять такие вещи, как общие доски в свои системы видеоконференцсвязи, без необходимости предоставления сервера для обмена сообщениями.
Обзор нового API
Предлагаются три новых метода:
Эта функция отправляет сообщения с данными с «Тема».
Прежде всего, каждый клиент регистрирует функцию обратного вызова, которая определяет процесс для каждой темы. Затем, когда отправитель отправляет сообщение с данными с помощью Topic, клиент получает сообщение с данными и вызывает функцию обратного вызова, соответствующую Topic. Мы не знаем деталей внутренней обработки, особенно потока данных, но, вероятно, она работает по общей модели публикации / подписки.
После использования на этот раз я обнаружил, что это очень простая в использовании функция.
Обратите внимание, что эта функция может быть не в состоянии получить сообщение с данными, даже если издатель сообщения с данными подписался на тему сообщения с данными, поэтому вам может потребоваться соблюдать осторожность. Я думаю, что преимущество модели публикации / подписки заключается в том, что она позволяет издателям и подписчикам полностью игнорировать отношения друг друга, поэтому тот факт, что издатели не могут получать данные, когда они находятся в одном программном обеспечении (сеансе), был просто немного неуместным. .
- SendDataMessage
https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html#realtimesenddatamessage - Подпишитесь
https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html#realtimesubscribetoreceivedatamessage - Отказаться от подписки
https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html#realtimeunsubscribefromreceivedatamessage
Общая доска
Вот общий алгоритм работы с общей доской, которую мы создали.
- Обнаруживает события мыши / касания на холсте браузера издателя (HTMLCanvasEelemnt) и определяет координаты.
- Рисование на холсте издателя
- Отправка координат брокеру (Chime) в виде сообщения с данными (real-timeSendDataMessage)
- Отправка координат от Брокера каждому подписчику
- Рисование на холсте каждого подписчика
Как упоминалось ранее, Publisher не может получать отправляемые им сообщения с данными, поэтому он должен рисовать на собственном холсте перед отправкой сообщений с данными. При создании приложения, которое хочет отражать операции пользователя в пользовательском интерфейсе без задержки, такого как доска, лучше, чтобы пользовательский интерфейс отражал их в пользовательском интерфейсе перед отправкой сообщений с данными, поэтому я думаю, что это будет похоже независимо от того, будет ли Publisher может получать сообщения с данными или нет.
Кроме того, поскольку Publisher не может получать отправляемые им сообщения с данными, это может быть проще реализовать, поскольку Publisher не должен отбрасывать полученные данные.
Реализовать
Подписаться
Вот пример функции-оболочки, которая регистрирует тему и соответствующую функцию обратного вызова для подписки с помощью realtimeSubscribeToReceiveDataMessage. Здесь мы определяем функцию обратного вызова, которая вызывает app.app.receivedDataMessage, когда мы получаем сообщение с данными, и используем его в качестве аргумента. Обратите внимание, что само app.app.receivedDataMessage может быть определено в другом месте для произвольной обработки.
export const setRealtimeSubscribeToReceiveDataMessage = (app:App, audioVideo:AudioVideoFacade, topic:string) =>{
const receiveDataMessageHandler = (dataMessage: DataMessage): void => {
app.receivedDataMessage(dataMessage)
}
audioVideo.realtimeSubscribeToReceiveDataMessage(topic, receiveDataMessageHandler)
}
Отправить DataMessage
Это пример отправки сообщения с данными с помощью realtimeSendDataMessage.
Чтобы рисовать на доске, координаты начальной и конечной точек, информация о штрихе, толщине линии и т. Д. Масштабируются и отправляются.
sendDrawsingBySignal = (targetId: string, mode:string, startXR:number, startYR:number, endXR:number, endYR:number, stroke:string, lineWidth:number)=>{
const gs = this.props as GlobalState
const message={
action: 'sendmessage',
data: JSON.stringify({
cmd : MessageType.Drawing,
targetId : targetId,
startTime : Date.now(),
mode : mode,
startXR : startXR,
startYR : startYR,
endXR : endXR,
endYR : endYR,
stroke : stroke,
lineWidth : lineWidth
})
}
gs.meetingSession?.audioVideo.realtimeSendDataMessage(MessageType.Drawing.toString(), JSON.stringify(message))
}
Демо
Белая доска
Так работает созданная вами функция доски. Эта демонстрация будет имитацией классной доски. Вы можете видеть, что то, что вы рисуете справа, отражается в левой части экрана.
Белая доска с общим дисплеем
Вы также можете создать эту доску в качестве наложения, чтобы использовать ее с функцией демонстрации экрана Amazon Chime SDK для проведения презентации.
Код
Функции, описанные в этой статье, встроены в испытательный стенд для новых функций с помощью видеоконференцсвязи.
Если вам это интересно, посетите следующий репозиторий.
Ну наконец то
На этот раз я попытался создать доску, используя новейшие функции Amazon Chime SDK.
В Японии недавно объявили об отмене чрезвычайного положения. Тем не менее, все еще кажется трудным собрать много людей в классе для проведения урока. Кроме того, личное обслуживание клиентов может быть рискованным и сложным. Я думаю, что видеоконференции и общие доски могут быть вариантом решения этих проблем.
