개요

요전날 참가했던 WebRTC 해커슨 에서 Live2D를 사용한 아바타 화상 채팅을 작성했습니다


firebase에서 배포하고 있으므로 꼭 시도해보세요!
유루~무

목차

사용 기술

구성

내용

사용 기술

WebRTC

live2D

clmtrackr.js (추적 라이브러리)

구성

화상 채팅 자체는 평소와 마찬가지로 skyway를 통해 WebRTC 통신을 가능하게 합니다.
그것에 의해 음성이나 영상의 송수신을 하고 있습니다

내용

아바타의 움직임

아바타에는 live2D
또한 js 라이브러리 인 clmtrackr.js을 사용하여 전송 된 이미지에서 얼굴 추적을하고 있습니다.

절차로서는
1. (자신의 경우는 자신의 영상을, 상대는 보내져 온 영상을 바탕으로) 영상으로부터 clmtrackr를 이용해 트래킹을 실시한다
2. 추적 결과가 배열로 얻어집니다.
3. live2D의 각 파라미터에 앞서 얻은 배열의 대응하는 값을 대입한다

이러한 절차로 아바타의 움직임을 실현
↓의 GIF는 왼쪽이 원래의 영상, 중간이 clmtrackr에 의한 결과, 오른쪽이 값을 반영한 live2D의 아바타입니다

아바타 변경

이번에는 복수의 아바타를 준비했기 때문에 사용자가 임의로 변경할 수 있어 그것이 수신측에서도 변경되도록 했습니다
이 기능을 실현하기 위해 WebRTC의 채팅 기능을 사용했습니다.

사용자가 사용하는 아바타 변경

선택한 아바타의 ID가 webRTC를 통해 상대방에게 전송됩니다 (텍스트 채팅과 동일한 기능)

수신자는 수신 된 아바타의 ID를 기반으로 live2D 모델을 재생성하고 다시 그립니다.

이 절차를 사용하여 호스트 측 게스트 측에서 사용하는 모델을 동기화합니다.

감상

해커슨의 결과는 최우수상 + NTT 커뮤니케이션즈상의 W 수상이었습니다! (기쁘다!!)

Skyway 덕분에 정말 쉽게 WebRTC의 기능을 구현할 수 있기 때문에 꼭 사용해보십시오!