https://docs.openvidu.io/en/2.25.0/

위의 공식 문서를 보고 정리한 내용

간단 정리

Openvidu deployment - Docker

실시간 오디오 및 비디오 스트리밍에 필요한 모든 인프라 제공

Application server - Backend

세션 초기화

세션에 대한 커넥션(연결) 생성

브라우저에게 커넥션 토큰 전달

Openvidu browser - Frontend

오픈비두 개체 가져오고 setState로 세션 속성 초기화

서버에게 토큰 요청

오픈비두에게 세션 연결 요청하고 비디오 게시

세션 나가기

기본 동작

서버에서 세션 초기화

브라우저도 세션 초기화

서버는 커넥션도 만들어줌

브라우저가 세션 참여하려고 서버한테 토큰 달라고 요청

서버는 오픈비두한테 토큰 달라고 말하고 받아옴

서버가 브라우저한테 토큰 전달

브라우저는 오픈비두로 세션 참가

브라우저는 비디오 게시

브라우저는 세션을 나감

구조

• OpenVidu deployment : 내부 측면이 중요하지 않은 블랙박스. 가져다쓰세요~
• server application : Rest API endpoints 호출 가능
• client application : 웹 브라우저, 데스크톱 애플리케이션에서 실행. openvidu-browser.js SDK사용해서 OpenVidu deployment와 통신, 세션 연결, 미디어스트림 게시 및 구독, 클라이언트측에서 화상통화 관리 등

Workflow

1. 애플리케이션 서버에서 세션 초기화
2. 애플리케이션 서버에서 세션의 연결 생성. 참가자가 있을 만큼 연결 만들어야 함. 토큰은 세션에 대해 단일 접근
3. 세션에 연결할 수 있게 클라이언트에게 토큰 전달
4. 클라이언트는 토큰 사용하여 세션에 연결(openvidu-browser.js). 성공적으로 되면 참가자로 간주.
5. 세션에 연결되면, 참가자는 스트림 게시 가능(openvidu-browser.js). 모든 참가자들은 subscribe 기회 있음

용어 정리

• 온프레미스 : 기업이 자체 시설에서 보유하고 직접 유지 관리하는 프라이빗 데이터 센터
• endpoint : API는 두 어플리케이션이 상호작용 할 수 있게 하는 것이라면 Endpoint는 API가 서버에서 리소스에 접근할 수 있도록 가능하게 하는 URL
• Session(세션) : 참가자가 연결하여 오디오/비디오 스트림을 보내고 받을 수 있는 가상 공간. 동일한 세션 연결된 참가자만 서로 보고 들을 수 있음
• Connection(연결) : 각 세션의 참가자. 세션에 연결하여면 서버에서 초기화하고 해당 토큰을 클라이언트에 전달해야 함.
• Token(토큰) : 참가자에게 세션에 대한 액세스 권한. 서버에서 연결을 생성해야 클라이언트에게 토큰을 전달 가능
• Stream(스트림) : 세션으로 흐르는 미디어 스트림

Openvidu - Client

• Ready-to-use component
  • 어플리케이션에 바로 적용
  • 몇줄의 코드로 화상 회의
• Full control of the UI
  • 클라이언트 SDK 사용하여 데스크톱 애플리케이션에서 처음부터 사용
  • 원하는대로 UI 구축

Openvidu - Server

세션을 생성하고 연결하기 위해서는 클라이언트가 연결하기 전에 오픈비두배포와 연결을 주고받아야 한다.

자바와 Node SDK가 있음. 백엔드에서 REST API 사용해서도 가능함

서버에서 오픈비두배포에 도달하려면 오픈비두배포 URL OPENVIDU_URL과 오픈비두암호 OPENVIDU_SECRET가 필요함

1. 세션 초기화

세션 초기화. 동일 세션에 연결된 참가자는 스트림을 주고받을 수 있음

OpenVidu openvidu = new OpenVidu(OPENVIDU_URL, OPENVIDU_SECRET);
SessionProperties properties = new SessionProperties.Builder().build();
Session session = openVidu.createSession(properties);

2. 세션 생성

특정 세션에 대한 연결 생성. 각 참가자는 토큰 사용하여 하나의 연결 사용해서 연결됨

ConnectionProperties connectionProperties = new ConnectionProperties.Builder()
    .role(OpenViduRole.PUBLISHER)
    .data("Alice")
    .build();
Connection connection = session.createConnection(connectionProperties);
String token = connection.getToken(); // Send this string to the client side

자바 기본 코드

Java 11 / Maven

하지만! Gradle로 사용할 수 있다.

기본 제공 Rest endpoints

1. 세션 초기화

HTTP METHOD POST

2. 세션 생성

HTTP METHOD POST

사용자 인증

사용자 인증 이미 있으면 서버에서 사용자 자격 증명 확인하고 이를 사용하여 세션 및 연결 개체를 초기화 할 수 있는 사용자를 제어할 수 있다.

근데! 서버에서 사용자 인증 없으면 아래 6가지 사용 가능

1. 기본 인증
2. 쿠키 기반 인증
3. 토큰 기반 인증
4. OAuth 2.0
5. OpenID Connect
6. SAML

openvidu-browser.js

세션 초기화

Openvidu 개체를 가져오고 이를 사용하여 세션 개체를 초기화함

OV = new OpenVidu();
session = OV.initSession();
session.on("streamCreated", function (event) {
    session.subscribe(event.stream, "subscriber");
});

토큰 받기

세션에 참여할 준비가 됨. 접근하려면 토큰이 필요함. 서버에게 토큰 달라고 요청. 서버는 openvidu에게 토큰 달라고 요청. 서버가 토큰을 클라이언트에게 줌

var APPLICATION_SERVER_URL = "<http://localhost:5000/>";

function getToken(mySessionId) {
    return createSession(mySessionId).then(sessionId => createToken(sessionId));
}

function createSession(sessionId) {
    return new Promise((resolve, reject) => {
        $.ajax({
            type: "POST",
            url: APPLICATION_SERVER_URL + "api/sessions",
            data: JSON.stringify({ customSessionId: sessionId }),
            headers: { "Content-Type": "application/json" },
            success: response => resolve(response), // The sessionId
            error: (error) => reject(error)
        });
    });
}

function createToken(sessionId) {
    return new Promise((resolve, reject) => {
        $.ajax({
            type: 'POST',
            url: APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
            data: JSON.stringify({}),
            headers: { "Content-Type": "application/json" },
            success: (response) => resolve(response), // The token
            error: (error) => reject(error)
        });
    });
}

getToken(mySessionId)에서 createSession을 실행하고 거기서 얻어온 sessionId를 가지고 createToken(sessionId) 실행. 생성된 토큰을 받아온다

토큰 사용하여 세션에 연결

getToken(mySessionId).then(token => {

    session.connect(token)
        .then(() => {
            document.getElementById("session-header").innerText = mySessionId;
            document.getElementById("join").style.display = "none";
            document.getElementById("session").style.display = "block";

            var publisher = OV.initPublisher("publisher");
            session.publish(publisher);
        })
        .catch(error => {
            console.log("There was an error connecting to the session:", error.code, error.message);
        });
});

session.connect : 오픈비두 서버에서 최근 받은 토큰을 넘겨주면 됨

연결이 성공되면 view를 활성 비디오 세션으로 설정. 그리고 웹캠 볼 수 있게 함.

publisher로 만든다. 초기화는 .initPublisher. 비디오란은 보이게 설정

session.publish(publisher)로 게시

세션 나가기

function leaveSession() {
    session.disconnect();
    document.getElementById("join").style.display = "block";
    document.getElementById("session").style.display = "none";
}

window.onbeforeunload = function () {
    if (session) session.disconnect();
};

사용자가 세션을 나가길 원할때 session.disconnect 사용하게 함. 나가면 join 버튼 활성화

window.onbeforeunload : event를 사용하여 페이지가 언로드되기 전에 메서드가 호출되는지 확인

React의 경우

openvidu-react - OpenVidu Docs