가이드

설명

아래의 예시를 참고 하세요.

<html>
  <header>
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script src="https://api.interwater.biz/lib/s-connector-lib-0.0.1.js"></script>
    <script>
      "use strict";
      /** 1. 아래 로직은 개발사 측의 서버에서 호출 하여 응답 주도록 하여야 합니다.
       1. accessKey, secretKey 은 유출 될시에 해킹의 위험이 있습니다.
      1. 개발시 accessKey, secretKey 값을 개발용과 서비스용으로 따로 발급 받으셔야 합니다.**/
      const serverCall = {
        auth: function (userName, roomName) {
          return $.ajax({
              type: "POST",
              url : "https://api.interwater.biz/v1/auth",
              accept: "application/json",
              contentType: "application/json; charset=utf-8",
              data : JSON.stringify({
                  "accessKey": "foziz2mdywm",
                  "secretKey": "5bfdabd106fbd8c7ac14935c4e3ce98c4a84c79de697a777809c533f3b9232d116b697bf682ea43fca3a88ee6da62fb14e0f9e7805cf54feb0d38451de24eb333b368b155199272a96289bb70b21fa80bf418af5defe54d771443b80e2fb70beaeba8c59c1aa07aa298ea16c6696f3fd876ae7339adb1c349d14668458651e2a78a7f9094ad52a2ad86b01",
                  isOwner: false,
                  userName: userName,
                  roomName: roomName,
                  start: "2021-06-01 11:00",
                  end: "2030-06-01 12:00"
              }),
              dataType: "json"
          });
        },
      };
      window.onload = function () {
        const sElement = document.getElementById("s-element");
        const sConnector = new SConnector.default(
          sElement,
          "https://remote.interwater.biz"
        );
        const joinElement = document.getElementById("join");
        sConnector.onLeave(function(isKickedOut){
          if(isKickedOut == true) alert("강제 퇴장 되었습니다.");
          else alert("회의가 종료 되었습니다.");
        });
        sConnector.onFullScreen(function(isFull){
          if(isFull) sElement.requestFullscreen();
          else document.exitFullscreen();
        });
        joinElement.onclick = (e) => {
          sElement.style = "width: 100%; height: 100%;margin: 5px;";
          try {
            const userName = document.getElementById("userName").value;
            const roomName = document.getElementById("roomName").value;
            const success = function(response) {
              const join = {
                accessToken: response.data.accessToken,
                backgroudImgUrl:
                  "https://images.unsplash.com/photo-1584907797075-c5308ada266f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw",
                userName: userName,
                roomName: roomName
              };
              sConnector.joinRoom(join);
            };
            /** serverCall method 는 서버에서 응답을 줘야 합니다. */
            serverCall.auth(userName, roomName).done(success);
          } catch (e) {
            console.error(e);
          }
        };
      };
    </script>
  </header>
  <h1>S-Connector</h1>
  <div>
    <input id="userName" type="text" placeholder="사용자명" value="test" />
    <input id="roomName" type="text" placeholder="회의실명" value="test" />
    <button id="join">참여</button>
  </div>
  <div id="s-element"></div>
  <html></html>
</html>