[webRTC] 카카오엔터프라이즈 서비스를 이용한 영상통화 비디오챗팅

 

webRTC를 이용한 화상채팅을 구현하려고 생각해보다가 ICESERVER에 대해서 많은 생각을 하게 되다가....

그러면 영상통화나 비디오채팅을 하면서 영상녹화는? 이런저런 기능들은???

이라는게 생각이 들었다. 그래서 찾아보니 카카오엔터프라이즈에서 서비스를 하려고 준비중에 있는듯하다.

https://connectlive.kakaoi.ai/

 

회원가입하고 들어가서 보면 시크릿키랑 발급받을 수 있는데,

https://sample.remotemonster.com/

 

 

사용하는 예제는 여기서 확인해서 할 수 있다.

 

<div>
<video id="remoteVideo" autoplay controls playsinline
style="z-index:1;background: rgba(0, 0, 0, 0.5); width: 100%;"></video>
<video id="localVideo"
style="z-index:2;position:absolute; bottom: 70px;right:40px;width:30%;border-radius: 50px;transform: rotateY(180deg);"
autoplay muted></video>
</div>
<a id="channelBtn" href="#" class="btn btn-primary btn-user btn-block text-center">
CONNECT
</a>

            <!-- /.container-fluid -->

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
            <!-- The webrtc adapter is required for browser compatibility -->
            <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk"></script>

            <script>
                const channelBtnEl = document.querySelector('#channelBtn');
                let isConnected = false;
                let remon;
                // please register your own service key from remotemonster site.
                const config = {
                    credential: {
                        key: '1234567890',
                        serviceId: 'SERVICEID1'
                    },
                    view: {
                        remote: '#remoteVideo',
                        local: '#localVideo'
                    }
                };

                const listener = {
                    onConnect(chid) {
                        console.log(`EVENT FIRED: onConnect: ${chid}`);
                    },
                    onComplete() {
                        console.log('EVENT FIRED: onComplete');
                        channelBtnEl.innerHTML = 'CLOSE';
                    },
                    onDisconnectChannel() {
                        // is called when other peer hang up.
                        remon.close();
                        isConnected = false;
                        channelBtnEl.innerHTML = 'CONNECT';
                    },
                    onClose() {
                        // is called when remon.close() method is called.
                        console.log('EVENT FIRED: onClose');
                        remon.close();
                        isConnected = false;
                        channelBtnEl.innerHTML = 'CONNECT';
                    },
                    onError(error) {
                        console.log(`EVENT FIRED: onError: ${error}`);
                    },
                    onStat(result) {
                        console.log(`EVENT FIRED: onStat: ${result}`);
                    }
                };

                function start() {
                    if (isConnected) {
                        isConnected = false;
                        channelBtnEl.innerHTML = 'CONNECT';
                        remon.close();
                    } else {
                        isConnected = true;
                        channelBtnEl.innerHTML = 'WAIT';
                        remon = new Remon({config, listener});
                        remon.connectCall('simpleRemon');
                    }
                }

                channelBtnEl.addEventListener('click', (evt) => {
                    start();
                    evt.preventDefault();
                }, false);
            </script>

 

간단하게 사용하는 방법을 긁어왔음...

가입하고 코드를 받으면

credential: {
  key: '시크릿키',
  serviceId: '서비스아이디'
}

를 입력하면 되고,

각각의 방을 생성하려면

remon.connectCall('방이름');

을 사용하면 된다.

영상녹화나, 채팅, 컨퍼런스콜, 방송과 같은 그 외 기능들에 대한것들은 차근차근 알아보면 될 듯 하다.

예제파일이나 도큐먼트가 잘되어 있는듯

차근차근 파봐야겠다.