이 문서는 SkyWay Advent Calendar 2018 16 일째입니다.

소개

기세로 이 어드벤트 캘린더에 등록했으므로, 당황해서 계정을 만들어, 어드벤트 캘린더 8일째의 「【폭속! 】 5분 만에 영상 채팅 구축 」를 한가지 시험해 보았습니다.
진짜로 폭속으로 화상 채팅을 구현할 수 있네요, 이것.

그런데 화상 채팅을 할 때, 자실의 모습이 배경으로서 비추는 것이 신경이 쓰이지 않습니까?
조금만 궁금합니다.
그래서 영상 채팅에서도 크로마키 합성 을 할 수 없는지 도전해 보았습니다.

복잡한 크로마 키 합성

보통의 크로마키 합성은, 녹색이나 파랑의 시트를 사용해, 그 시트의 부분만 다른 영상과 바꿉니다만, 당연히 집에 그 녹색이나 파랑의 시트가 집에 있는 것은 아니기 때문에, 조금만 노력해 봐.

처리는 대략 다음과 같습니다.

사람이 비치지 않는 배경만을 우선 준비
비디오 태그에서 사람이 비치지 않는 순간을 선택하여 배경 이미지 용 캔버스로 프레임을 전송합니다.

교체하고 싶은 배경 이미지도 준비
같은 서버에 배치해, Image 오브젝트로 읽어들인다면, 교체 화상용 canvas 에 전송 해 둡니다.

SkyWay 의 room 객체에, 전달용 canvas 의 captureStream 로 취득한 stream 를 설정해 둡니다.

video 태그에서 취할 수 있는 프레임과 1. 의 canvas 와 픽셀 단위로 비교해, 비슷하면 그 부분을 2. 의 canvas 픽셀로 바꿔, 3. 의 전달용 canvas 에 묘화 합니다.
이것은, requestAnimationFrame 로 순차 처리를 돌립니다.
픽셀이 비슷한가 어떤가의 판정은, RGB 의 색 공간에서 벡터의 내적을 사용하고 있습니다.

테스트용이므로, canvas 를 충분히 사용하고 있습니다.

결과

결과가 여기입니다.
위가 크로마키 합성해 SkyWay 경유로 표시한 영상, 아래가 Web 카메라로 취득한 오리지날 영상입니다.

보고 있는 페이지는
htps : // 기주 b. 코 m / 스키 와 y / 스키 와 y - js - sdk / t ree / ms r / e mp ぇ s / 푹신 sh ゔ ぃ



염원의 백악관 앞에서 영상 채팅에 참가할 수 있었습니다!
# 분수는 움직이지 않지만.

결론

천장과 벽의 경계가 둥글게 보이고, 카메라의 노출이 상시 변화하므로, 보시다시피, 엄청 소음이 탄다.
덧붙여서, 가장 반영이 좋은 화상으로 이것이므로, 더 진지하게 처리하지 않으면 안 되네요. . .