단순 시청 앱 만들기(Web)

준비사항

Service Id
https 지원 웹 서버 또는 웹 호스팅

HTML 템플릿 받아서 풀어놓기

단순 시청 앱 HTML 템플릿을 다운로드하여 풀어 놓습니다. simplewatch.html, complete.html, simplelivestreaming.html 3개의 파일을 확인하십시오. 내용이 비어있는 simplewatch.html 을 수정하며 단순 시청 앱을 만들어봅니다. 수정 완료된 내용은 complete.html 파일에서 확인할 수 있습니다. simplewatch.html 파일의 내용은 아래와 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>리모트몬스터 단순 시청 앱</title>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>

</body>
</html>

RemoteMonster JavaScript 라이브러리 파일 추가, Config 만들기

리모트몬스터 라이브러리 remon.js 파일을 추가합니다. 웹 브라우저 호환성을 위해 adapter.js 파일도 추가합니다. config를 만듭니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>리모트몬스터 단순 시청 앱</title>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>

  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk/remon.min.js"></script>
  <script>
  let remon;
  const config = {
    credential: {
      serviceId: '발급 받은 Service Id를 입력',
      key: '발급 받은 Secret Key를 입력'
    },
    view: {
      remote: '#remoteVideo'
    }
  };
  </script>
</body>
</html>

동영상이 표시될 엘리먼트(video tag) 추가, 레이아웃에 맞추기

video 요소 1개를 추가합니다. 방송의 영상을 표시하기 위해서입니다. remote video 요소에 autoplay 속성이 있으면 방송채널에 들어갔을 때 동영상이 바로 표시됩니다. config에 remote 항목으로 이 video 요소의 ID를 입력합니다. button 요소 2개를 추가합니다. "시작" 버튼은 방송채널에 들어가고, "종료" 버튼은 방송채널에서 나가는 데 씁니다. 방송채널의 ID를 표시할 영역을 추가합니다. 시작 버튼을 눌렀을 때 영상이 보이지 않으면 video 요소의 autoplay 속성을 확인하십시오.

아래와 같은 모습을 만들겁니다. 안 예쁘다고요? 문서 뒷부분에서 예쁘게 해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>리모트몬스터 단순 시청 앱</title>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>
  <div id="wingleft"></div>
  <div id="mymain">
    <h2>시청</h2>
    <video id="remoteVideo" autoplay muted></video>
    <br>
    <button id="mystart" class="btn btn-main">Start</button>
    <button id="mystop" class="btn btn-main" disabled>Stop</button>
  </div>
  <div id="wingright"></div>

  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk/remon.min.js"></script>
  <script>
  let remon;
  const config = {
    credential: {
      serviceId: '발급 받은 Service Id를 입력',
      key: '발급 받은 Secret Key를 입력'
    },
    view: {
      remote: '#remoteVideo'
    }
  };
  </script>
</body>
</html>

채널에 들어가기

방송을 테스트할 때 사용할 채널ID를 미리 정합니다. 튜토리얼은 채널ID를 "my-first-livestreaming"으로 합니다.

출시를 위한 앱을 만들 때에는 고유하고 추측하기 어려운 채널ID를 써야합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>리모트몬스터 단순 시청 앱</title>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>
  <div id="wingleft"></div>
  <div id="mymain">
    <h2>시청</h2>
    <video id="remoteVideo" autoplay muted></video>
    <br>
    <button id="mystart" class="btn btn-main">Start</button>
    <button id="mystop" class="btn btn-main" disabled>Stop</button>
  </div>
  <div id="wingright"></div>

  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk/remon.min.js"></script>
  <script>
  let remon;
  const config = {
    credential: {
      serviceId: '발급 받은 Service Id를 입력',
      key: '발급 받은 Secret Key를 입력'
    },
    view: {
      remote: '#remoteVideo'
    }
  };
  const listener = {
    onCreate(chid) { console.log(`EVENT FIRED: onCreate: ${chid}`); },
    onJoin(chid) { console.log(`EVENT FIRED: onJoin: ${chid}`); $('#mystart').prop( "disabled", true ); $('#mystop').prop( "disabled", false ); },
    onClose() { console.log('EVENT FIRED: onClose'); $('#mystart').prop( "disabled", false ); $('#mystop').prop( "disabled", true ); },
    onError(error) { console.log(`EVENT FIRED: onError: ${error}`); },
    onStat(result) { console.log(`EVENT FIRED: onStat: ${result}`); }
  };
  $('#mystop').click(function(){
    remon.close();
  });
  $('#mystart').click(function(){
    remon.joinCast("my-first-livestreaming");
  });
  </script>
</body>
</html>

채널 생성하기

simplelivestreaming.html 파일을 열어 Service ID와 Secret Key를 수정합니다.

  $('#mystart').click(function(){
    // createCast의 인자는 방송채널의 ID입니다. 실제 서비스에서는 동일한 방송채널의 ID가 아닌, 고유하고 예측이 어려운 ID를 사용해야합니다.
    remon.createCast("my-first-livestreaming");
  });

테스트 하기

simplewatch.html, simplelivestreaming.html 파일을 웹에 게시합니다. 로컬에서 테스트 할 경우 http와 https 모두 가능합니다. 로컬이 아닐 경우 반드시 https 환경에서 테스트해야합니다.

웹 브라우저 창을 2개 엽니다. 두 창에서 각각 simplewatch.html, simplelivestreaming.html 파일의 주소를 엽니다. simplelivestreaming.html 창에서 "시작" 버튼을 클릭합니다. 다음 simplewatch.html 창에서 "시작" 버튼을 누릅니다. 동영상이 표시됩니다.

정상적으로 동영상이 표시되지 않는다면, 웹 브라우저의 JavaScript 콘솔 창을 열어 오류 메시지를 확인합니다.

아주 조금 예쁘게 하기

video 요소의 크기를 조절하고 배치를 바꾸어 보기 좋게 합니다. head 요소 안에 style 을 추가 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>RemoteMonster - Simple Example</title>

  <!-- 아주 조금 예쁘게 하기 -->   
  <style>
    #mymain { 
      margin-left: auto; margin-right: auto; width: 320px; 
    }
    #wingleft { 
    }
    #wingright { 
    }
    #remoteVideo { 
      width: 320px; height: 240px; background-color: black; 
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>
  <div id="wingleft"></div>
  <div id="mymain">
    <h2>시청</h2>
    <video id="remoteVideo" autoplay muted></video>
    <br>
    <button id="mystart" class="btn btn-main">Start</button>
    <button id="mystop" class="btn btn-main" disabled>Stop</button>
  </div>
  <div id="wingright"></div>

  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@remotemonster/sdk/remon.min.js"></script>
  <script>
  let isConnected = false;
  let remon;
  const config = {
    credential: {
      serviceId: '발급 받은 Service Id를 입력',
      key: '발급 받은 Secret Key를 입력'
    },
    view: {
      remote: '#remoteVideo'
    }
  };
  const listener = {
    onCreate(chid) { console.log(`EVENT FIRED: onCreate: ${chid}`); },
    onJoin(chid) { console.log(`EVENT FIRED: onJoin: ${chid}`); $('#mystart').prop( "disabled", true ); $('#mystop').prop( "disabled", false ); },
    onClose() { console.log('EVENT FIRED: onClose'); $('#mystart').prop( "disabled", false ); $('#mystop').prop( "disabled", true ); },
    onError(error) { console.log(`EVENT FIRED: onError: ${error}`); },
    onStat(result) { console.log(`EVENT FIRED: onStat: ${result}`); }
  };
  remon = new Remon({ config, listener });
  $('#mystop').click(function(){
    remon.close();
  });
  $('#mystart').click(function(){
    remon.joinCast("my-first-livestreaming");
  });
  </script>
</body>
</html>

그 외 주요 메소드들

RemonCall의 주요 인스턴스 메소드는 다음과 같습니다.

close() : RemonCall 객체가 소멸됩니다. 통화를 종료할 때 사용합니다. close 후에 새 통화를 시작하려면 RemonCall 객체를 새롭게 생성 해야 합니다.
showLocalVideo(): 통화 시작 전에 자신의 카메라 화면을 미리 보고 싶을 때 호출합니다.
pauseLocalVideo(true): 통화 중 자신의 카메라 화면을 중지하고 싶을 때 호출합니다.
switchCamera(): 카메라가 여러 개일 때 카메라를 순차적으로 스위칭해서 보여줍니다.
fetchCalls() : 통화채널을 조회할 때 호출합니다.

Callback에 대하여

onInit(): RemonCall 객체 생성이 정상적으로 처리됐을 때 호출됩니다. token이 인자로 전달됩니다.
onConnect(): 통화채널이 만들어졌을 때 호출됩니다. 생성된 채널ID가 인자로 전달됩니다.
onComplete() : 통화 상대방과 연결이 됐을 때 호출됩니다.
onClose(): 통화가 종료되었을 때 호출됩니다. CloseType이 인자로 전달됩니다.
onError(): 에러가 발생했을 때 호출됩니다. 오류 메시지가 인자로 전달됩니다.
onStat(): RemoteMonster가 통화품질 데이터를 5초마다 자동으로 생성합니다. 통화품질 데이터가 생성될 때 호출됩니다. 통화품질 데이터가 인자로 전달됩니다.