본 문서는 openvidu-insecure-react 2.22.0 을 토대로 작성되었습니다.
-
openvidu-browser : npm package 형태로, 클라이언트의 비디오 제어를 담당한다.
-
openvidu-server : Kurento Media Server를 담당하는 Java app
-
Kurento Media Server : 낮은 레벨의 미디어 플로우 담당 (signalling)
react tutorial git을 클론하면, 여러가지 configuration 파일이 함께 많이 들어있다. 우리가 집중해서 봐야할 부분은 다음과 같다.
App.js : 앱의 메인 컴포넌트로, 비디오 콜에 대한 직접적인 제어 기능을 가지고 있다. (비디오 콜 참여 etc)
UserVideoComponent.js : 비디오 미디어를 스트리밍을 담당하는OpenViduComponent 객체를 정의하는 곳이다.
openvidu-browser를 import 해서 준비를 한다.
Openvidu 객체는 session(방으로 생각하면 편함)에 대해 접속하는 객체입니다.
publisher : 웹캠 스트리머
subscriber : 시청자(다른 user의 video-call의 active stream을 받음)
mySessionid : session 구분 용 간단한 id
myUserName : session 참여자로서 보여지는 이름
streamCreated : 매번 session 객체 내에서, 새로운 stream을 받을 때 마다, stream을 subscribe하고, 반환되는 값인 Subscriber 객체를 subscribers 배열에 저장합니다. 메서드 session.subscribe는 두 번째 매개 변수로 undefined를 가지므로 OpenVidu는 자체적으로 DOM에 HTML 비디오 요소를 삽입하지 않습니다(자녀 구성 요소 중 하나에 포함된 비디오 요소를 사용합니다. 또한 실제로 Subscriber 객체가 아니라 부모 클래스 StreamManager로 이들을 공급합니다. 이렇게 하UserVideoComponent를 재사용하여 StreamManager 클래스의 Publisher 개체도 표시할 수 있습니다.
streamDestroyed : user가 video-call을 나갔을 때, 즉 session의 stream이 해제되었을 때 연관되어있었던 Subscriber 객체를 subscribers 배열에서 제거합니다.
(중요!) 백엔드로부터 유효한 사용자의 토큰 값을 받으면, 세션에 유저를 연결시킬 수 있다.
이 때, 사용되는 파라미터는 각각 token과, clientData 이다. clientData는 streamCreated 이벤트에서 닉네임으로 사용되어 다른 유저에게 보여지는 값이다.(UserVideoComponenet에서 비디오에 뜨는 이름으로 적용된다.)
mySession.connect에 성공하면 이제 웹캠을 실제로 켜기 위한 publisher 객체를 생성하고 해당 객체를 통해, mySession.publish() 메소드를 실행시켜 웹캠을 송출한다. 웹캠이 송출되면 session의 나머지 유저들에게는 streamCreated 이벤트가 실행되고, stream 객체를 받게된다.
mainStreamManager는 크게 표시되는 웹캠 화면을 의미한다.
this.state.publisher에 publisher를 저장합니다. StreamManager는 publisher, subscriber의 부모 클래스인 것 같다.
이렇게 하면 웹캠이 모든 subscriber에게 표시되는 방식과 동일한 방식으로 추가됩니다(모든 웹캠은 UserVideoComponent에서 표시됨).
마지막으로 고려해야 할 사항은 UserVideoComponent 및 OpenVideoComponent의 구현입니다.
각 UserVideoComponent는 하위 구성 요소인 OpenViduVideoComponent에 존재하는 하나의 StreamManager 개체(Subscriber 또는 Publisher)를 관리합니다.
주요 업무는 최종 비디오 플레이어(OpenVideoComponent 책임)를 관리하는 것이 아니라 각 플레이어에 대한 사용자 지정 정보(사용자 닉네임)를 표시하고 클릭 이벤트를 처리하여 상위 AppComponent의 mainStreamManager 속성을 업데이트하는 것입니다.
