[TDA Web Service using mediapipe]

socketio를 사용하기 위해 web server를 nodejs express로 고치고,
mediapipe를 수행하는 server를 따로 둘 예정이다.
추후에 mediapipe가 multi user(client)에 대해서도 모션인식을 처리해주기 위해 room을 나누었다.

Contents

Peerjs

Peer js ( https://peerjs.com/ )
: WebRTC를 활용하여 쉽게 P2P data나 media stream connection하는 Library
Support browser
: Chrome, Safari, Firefox

1. peer-login : peer 생성시 호출되는 이벤트
2. 서버에서 peer-login 수신시 ‘peer-connected’ 소켓 이벤트를 broadcast한다.
3. ‘peer-connected’를 수신 받은 peer는 새로 접속한 peer의 uid를 인자로 받으며, 
자신의 stream 영상정보를 담아 call한다. (myPeer.call(uid, stream))
4. 새로 접속한 peer는 call을 수신받으며, myPeer.on(‘call’, call) 형식
5. 이 call 수신 단계에서, 송신자의 stream 정보를 송출하는 video를 생성한다.
6. 이후 answer로 stream 정보를 수신받았음을 송신자에게 알린다.
call.answer(stream){여기서 stream에 새로 들어온 peer의 stream 정보를 담는다.}
7. stream 이벤트를 수신 받은 peer는 이벤트 파라미터에 담긴, 새로 접속한 peer의 stream 정보를 영상에 띄운다.

WorkFlow

File structure, dependencies

추후에 mediapipe server를 추가할 것이다.

Code
server.js

client.js

server와 client만 중심적으로 보고, frontend 단인 room.ejs or css 등등은 code를 따로 리뷰하진 않겠다.

결과적으로 이제 웹으로 접속하면,
룸이 나뉘어지고 같은 room에 있는 user에게만 서로 영상이 공유된다.
(현재 yeongjin, yeongjin2는 같은 room, ab는 다른 room에 접속 중) - room은 url이라고 보면 된다.
또한 같은 room에 접속한 사용자 중 웹을 끌 경우
room에서 나가서 영상을 더이상 보내지 않도록 하였다. 

이전 TDA Web Service에는 모션인식이 있다. 하지만 여기서 영상 출력을 위한 data가
이전에 짠 python -> javascript로 변동됨에 따라 format이 바뀌었다.
따라서 영상변환후 return하는 과정에서 format을 맞추어 python에서 js로 전송하고,
js에서 받아서 영상변환(mediapipe 모션인식)을 출력할 것이다.
client단에서 이를 처리하기 때문에 이전에 문제점이 해결될 것이다.