OpenVidu API 구성 살펴보기 - 클래스

OpenVidu API를 살펴보며 유용한 클래스들을 알아봅니다.

 

https://docs.openvidu.io/en/stable/tutorials/openvidu-insecure-react/

openvidu-insecure-react - OpenVidu Docs

실행 방법은 위 링크의 설명 대로 도커에서 서버를 돌리고 리액트 앱을 실행시켜서 로컬호스트 3000으로 접속한다.

 

이렇게 실행시켜놓고 코드와 문서를 살펴본다.

이 튜토리얼은 클라이언트 사이드부분만 다루고 있으므로 openvidu - browser 의 내용만을 다룬다.

OpenVidu Class

Session을 생성하기 위해 사용하는 OpenVidu 클래스 문서

 this.OV = new OpenVidu();

생성자로 인스턴스를 만들어 사용한다.

initSession

새로운 세션을 만들어서 리턴한다.

{session: this.OV.initSession()}

getDevices

시스템에서 사용 가능한 디바이스 기기들을 가져오는 메소드.
사용할 비디오 정보를 이 메소드를 통해 불러온다.

var devices = await this.OV.getDevices();
var videoDevices = devices.filter(device => device.kind === 'videoinput');

initPublisher

새로운 Publisher를 리턴한다.
세션에 참여할 사람의 비디오, 오디오 설정 정보들을 이용해 참여자를 생성한다.

 let publisher = this.OV.initPublisher(undefined, {
 audioSource: undefined, // The source of audio. If undefined default microphone
 videoSource: videoDevices[0].deviceId, // The source of video. If undefined default webcam
 publishAudio: true, // Whether you want to start publishing with your audio unmuted or not
 publishVideo: true, // Whether you want to start publishing with your video enabled or not
 resolution: '640x480', // The resolution of your video
 frameRate: 30, // The frame rate of your video
 insertMode: 'APPEND', // How the video is inserted in the target element 'video-container'
 mirror: false, // Whether to mirror your local video or not
 });

생성된 publisher를 Session에 등록한다.

 mySession.publish(publisher);

파라미터

• targetElement : HTML DOM 요소 - 비디오가 보여질 곳. null이거나 undefined이면 비디오가 안만들어짐.
• properties : PublisherProperties
• completionHandler : 에러 핸들러

Publisher class

local media stream을 구성하는 역할. 문서
내가 브라우저를 열어 openvidu session 에 참여할 때, 내가 Publisher를 만든다. 이 Publisher를 session 에 등록한다.
OpenVidu.initPublisher로 초기화 한다.

Session

OpenVidu 비디오 채팅을 각각 Session이라고 한다. 다중 유저가 참여 가능한 비디오 컨버퍼런스 room에서도 Session을 사용한다. 문서
Session에 본인의 비디오를 publish한 참여자들은 해당 세션에 연결된 다른 참여자들의 비디오를 볼 수 있다.
OpenVidu.initSession으로 초기화 한다.

connect

• connect(token:string) : Promise
• connect (token:string,metadata:any) Promise

토큰을 사용하여 세션에 연결한다. 스트림이 연결되었을 떄 다른 유저들에게 파라미터의 메타데이터를 전달 가능하다.
메타데이터의 구조는 자유롭게 지정할 수 있다. JSON이나 XML형식을 사용하는 것이 좋은 방법.
프로미스를 리턴한다.

mySession
.connect( token,{ clientData: this.state.myUserName })
...

메타데터는 보안처리 되지 않는다. secure data를 전달하고자 하면 토큰에 넣어서 서버에서 처리.

리턴 받은 프로미스 객체가 성공적으로 resolv 되어야 Session.connection객체를 이용가능하다.

로컬 참여자의 Session객체는 초기에 한번 그리고 그 다음 여러번 connectionCreate이벤트를 발생시킨다.

• 처음 한번은 Session.connection속성을 가져오기위한 로컬 커넥션을 위해서
• 그 다음번들은 이미 세션에 연결된 Connection을 위해서. 내가 세션에 성공적으로 연결하고 connectionCreated이벤트를 발생 시키면 세션에 연결된 다른 사용자들도 이 이벤트를 발생시킨다.

세션에 연결되고 모든 connectionCreated를 받으면 로컬 참여자(나)는 streamCreated이벤트를 해당 세션의 기존 참여자들에게 발생시킨다.

세션에 연결된 모든 참여자들의 Session 오브젝트들은 connectionCreated이벤트를 통해 전달된다.

subscribe

Subscriber객체를 리턴하는 메소드
새로운 HTML비디오 요소를 추가한다.
Subscriber객체는 원격 스트림이 재생되면 이벤트를 전달한다.

 

Subscriber

• id : string
  • Publisher/Subscriber의 스트림을 표시하는 DOM 요소의 id 어트리뷰트.
  • 다음 두가지 경우 일때만 정의된다.
    • Publisher가 유효한 타켓 엘리먼트 파라미터를 통해 Openvidu.initPublisher를 호출 했을 떄.
    • Subscriber가 Session.subscribe 할 때.
  • remote : boolean
    • DOM에 표현시된 스트림이 로컬 혹은 리모트인지
    • false for Publisher
    • true for Subsriber
  • stream : Stream
    • 퍼블리셔나 서브스크라이버해 의해 돔에 나타나는 스트림
  • targetElement: HTEML Element
    • 타겟 엘리먼트에 할당된 DOM HTML 엘리먼트.
    • 퍼블리셔나 서브스크라이버가 비디오를 생성할 때 할당 됨.
  • videos : StreamManagerVideo []
    • 퍼블리셔와 서브스크라이버의 모든 Stream이 되는 비디오

streamManagers

세션의 Publisher 나 Subscriber들의 컬렉션

StreamManager 클래스

미디어 스트림을 표시하는 클래스. Publisher, Subscriber를 감싸는 래퍼. Publisher, Subscriber를 구분할 필요 없는 상황에서 유용.문서

Connection 클래스

세션에 연결된 한 유저의 연결 정보를 나타냄. 각 세션이나 스트림은 Connecton객체를 가짐 문서
connectionId,creationTime,data,record,role을 확인 가능.

• activeAt : number
  • 유저에 의해서 status가 pending에서 active로 변경된 타임스탬프 UTC milliseconds (ms since Jan 1, 1970, 00:00:00 UTC)
• clientData :string
  • 클라이언트 사이드에서 할당된 데이터. Session.connect 할 때 두번째 인자로 주어진 값이 셋팅된다.
• connectionId : string
  • Connection의 구분자. Session.forceDisconnect 혹은 Session.updateConnection 을 사용할 때 파라미터로 전달함.
• connectionProperties : ConnectionProperties
  • 커넥션에 할당된 ConnectionProperties
• createdAt : number
  • 커넥션이 생성된 타임스탬프 UTC milliseconds (ms since Jan 1, 1970, 00:00:00 UTC)
• ip : string
  • 커넥션에 연결된 아이피 ( 오픈비두 서버에 등록된)
• location : string (PRO기능)
• platform : string
  • 세션에 연결된 참가자가 사용한 플랫폼에 대한 설명
• publishers : Publisher[] = []
  • 커넥션에 연결된 특정 Publisher들의 배열은 세션을 퍼블리싱한다. ( 각각의 퍼블리셔 객체는 각자의 Stream을 가지고 유니크한 streamId를 가짐)
  • Session.forceUnpublish 할 때 인자로 넘겨줌.
• status : string
  • 커넥션의 상태를 리턴
  • 가능한 상태
    • pending : Session.connect을 부르는것을 기다리는 상태 ( 내부 토큰을 사용해서 세션에 커넥트 하는것을 기다림)
    • active: 커넥션의 내부 토큰이 어떤 유저를 통해 사용되어져서 세션이 연결되면 그 토큰은 다시 사용할 수 없음.
• subscribers : string[]
  • 커넥션을 구독하고있는 스트림 배열
  • 배열의 각각의 string은 퍼블리셔의 streamId와 일치함.
• token
  • 커넥션에 할당된 토큰
  • Session.connect를 하기 위해 client-side에서 꼭 보내져야 함

Connections : Connection [] = []

• 이 세션의 커넥션들의 배열.
• 항상 빈 배열로 초기화 되고 Session.fetch나 OpenVidu.fetch가 불려진 이후로 변하지 않음.
  • Session.createConnection 호출 : 자동적으로 로컬 컬렉션에 새로운 커넥션 객체를 추가한다.
  • Session.forceUnpublish 호출 : 자동으로 local Connection 오브젝트를 업데이트함.
  • Session.forceDisconnect 호출 : 자동으로 local Connection을 업데이트 함.
  • Session.updateConnection 호출 : 자동으로 로컬 커넥션의 속성들을 업데이트 함.
• Connections의 배열을 얻기 위해서는 Session.fetch나 Openvidu.fetch를 호출해야 함.

 

Event

• cancleable
  • Event.preventDeafult 로 막아지는 기본 동작인지 아닌지
• data:string (optional)
  • signal의 메세지
• from : Connection (optional)
  • signal을 보낸 클라이언트.
  • 사용자가 아닌 서버에서 만든 signal이면 undefined로 되어있음.
• target : Session | StreamManager | Filter
  • 이벤트를 디스패치할 객체
• type : string
  • signal의 타입
  • Session.on(’signal’) 모든 시그널을 수신한다.
  • Session.on(’signal:type’)으로 이벤트를 구독 할 수 있음.
  •  

• data : string
  • 시그널의 내용 메세지
• to : Connection[] (optional)
  • 누구에게 시그널을 보낼지 정하기
  • Session.on(’signal’)을 구독하고 있어야 수신 가능.
  • 빈 배열이거나 undefined라면 signal은 모든 참가자에게 전송
• type : string (optional)