Zoom Meeting SDK for web 를 이용해서 웹페이지에 줌 회의 띄우기 - 1

이번 포스트는 줌 공식문서를 따라하면서 웹페이지에 줌 화면을 띄우는 과정을 설명한 포스트이다.

과정은 크게 3단계로

1. 줌 회원가입
2. App MarketPlace에 앱 생성 후 client-id, client-secret 생성하기
3. 줌 공식 프로젝트를 이용해서 웹페이지에 줌 화면 띄우기

와 같이 구성되어있다.

글을 읽는거보다 영상보는게 편하다 하시는 분은 아래 영상을 참고하시길 바랍니다.

 

참고. Zoom Meeting SDK for web 공식 문서 링크 (클릭)

---

1. 줌 회원가입

https://zoom.us/ 에 접속하여 무료가입을 진행하면 됩니다.

회원가입이 완료되었다면 로그인 후 회의탭을 들어가서 하나 생성해주시면 이번 스텝은 끝입니다.

회의 생성 후 보이는 회의 ID는 마이페이지에서 나중에 확인하면 되지만 그게 귀찮다 하시면 복사해서 잠시 메모장같은 곳에 저장해두시면 됩니다.

---

2. App MarketPlace에 앱 생성 후 client-id, client-secret 생성하기

https://marketplace.zoom.us/ 에 접속한뒤 로그인이 풀렸다면 줌 계정으로 로그인 하시면 됩니다.

그 후 좌측 상단에 있는 develop에 마우스를 올린 뒤 Build App 클릭

그 다음 General App 선택 후 create

그럼 다음 스텝으로 넘어가면서 여러 설정이 나올텐데 다른건 필요없고 Client-ID와 Client-Secret 만 기억하시면 됩니다.

그럼 이번 스텝도 끝!

---

3. 줌 공식 프로젝트를 이용해서 웹페이지에 줌 화면 띄우기

https://github.com/zoom/meetingsdk-web-sample 에 접속하여 프로젝트 클론 또는 zip으로 다운로드하여 원하는 디렉토리에서 압축해제 하시면 됩니다. 해제한 폴더에 들어가셔서 CDN/js/index.js 를 편집모드로 열기(편집모드란 그냥 vscode 나 메모장 같이 편집가능하게 여시면 된다는 뜻입니다.) 

var CLIENT_ID = "YOUR_CLIENT_ID_OR_SDK_KEY";
  /**
   * NEVER PUT YOUR ACTUAL SDK SECRET OR CLIENT SECRET IN CLIENT SIDE CODE, THIS IS JUST FOR QUICK PROTOTYPING
   * The below generateSignature should be done server side as not to expose your SDK SECRET in public
   * You can find an example in here: https://developers.zoom.us/docs/meeting-sdk/auth/#signature
   */
 var CLIENT_SECRET = "YOUR_CLIENT_SECRET_OR_SDK_SECRET";

위 처럼 CLIENT_ID, CLIENT_SECRET 두 부분을 2번에서 확인한 코드로 변경해주세요.

그 다음 joinUrl 이라고하는 부분을 수정해주면 끝납니다.

var signature = ZoomMtg.generateSDKSignature({
  meetingNumber: meetingConfig.mn,
  sdkKey: CLIENT_ID,
  sdkSecret: CLIENT_SECRET,
  role: meetingConfig.role,
  success: function (res) {
    console.log(res);
    meetingConfig.signature = res;
    meetingConfig.sdkKey = CLIENT_ID;
    var joinUrl = "/meeting.html?" + testTool.serialize(meetingConfig);
    // "/meeting.html?" 을 수정해주세요.
    console.log(joinUrl);
    window.open(joinUrl, "_blank");
  },
});

...

var signature = ZoomMtg.generateSDKSignature({
  meetingNumber: meetingConfig.mn,
  sdkKey: CLIENT_ID,
  sdkSecret: CLIENT_SECRET,
  role: meetingConfig.role,
  success: function (res) {
  console.log(res.result);
  meetingConfig.signature = res.result;
  meetingConfig.sdkKey = CLIENT_ID;
  var joinUrl =
    testTool.getCurrentDomain() +
    "/meeting.html?" +
    // "/meeting.html?" 을 수정해주세요.
    testTool.serialize(meetingConfig);
  document
    .getElementById("copy_link_value")
    .setAttribute("link", joinUrl);
  copyToClipboard("copy_link_value");
  },
});

/meeting.html 앞에 해당 파일이 있는 절대경로를 추가해주면 된다.

저의 경우 "D:/project/meetingsdk-web-sample/CDN" 와 같이 D 드라이브의 project 디렉토리에 샘플을 압축해제 했기에 앞에 압축해제한 경로 + meetingsdk-web-sample/CDN 을 적어줬습니다.

그리고 저장 후 meetingsdk-web-sample/CDN 디렉토리에 있는 index.html 을 열어주면 아래와 같은 페이지가 열리는데

여기서 맨 왼쪽칸에는 입장 닉네임을 적어주고 Meeting Number에는 1번 스텝에서 생성한 회의 ID 를 적어주면 됩니다. 패스워드가 있는 경우에는 Meeting Password 작성. 그 후 join을 클릭하면 웹페이지에서 줌 화면이 띄워지고 회의 시작 시 우리가 알고 있는 화면이 웹 페이지에서 보여진다.