Zoom SDK 연동 - 3) Zoom SDK 사용하기

옹치키·2022년 1월 22일
0

Zoom SDK

목록 보기
3/3
post-thumbnail

1. Sample 예제

https://github.com/zoom/meetingsdk-sample-react


2. Zoom SDK 초기화

2-1) Setting Zoom SDK

import { ZoomMtg } from '@zoomus/websdk';

ZoomMtg.setZoomJSLib('https://source.zoom.us/2.1.1/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
ZoomMtg.i18n.load('ko-KO');
ZoomMtg.i18n.reload('ko-KO');
  • setZoomJSLib 메소드 호출 시, CDN 링크 이외에 오동작 하는 이슈가 있어서,
    CDN 링크를 사용했습니다.
  • 위 코드 실행 시, 개발자가 작성한 React App 컴포넌트 외부에 Zoom 컴포넌트가 생성됩니다.

2-2) Zoom 컴포넌트 제어

const zoomMeetingSDK = document.getElementById("zmmtg-root")

// To hide
zoomMeetingSDK.style.display = 'none';

// To show
zoomMeetingSDK.style.display = 'block';
/* To hide */
#zmmtg-root {
	display: none;
}

/* To show */
#zmmtg-root {
	display: block;
}
  • 생성된 Zoom 컴포넌트는 위와 같은 방식으로 숨깁니다.
  • 실제 SDK를 통해 Zoom Client를 띄울 때, display 속성을 'block'으로 변경

3. Zoom 클라이언트 띄우기

Meeting : https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/meetings
Webinar : https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/webinars

3-1) generateSignature

const signature = ZoomMtg.generateSignature({ apiKey, apiSecret, meetingNumber, role });

3-2) ZoomSDK.init

Reference : https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/reference

ZoomMtg.init({
  leaveUrl: leaveUrl,
  success: (success) => {
    console.log(success)
    ZoomMtg.join({
      ...
    })
  },
  error: (error) => {
    console.log(error)
  }
})
  • leaveUrl(required) : Zoom Client 종료 시, 이동할 페이지 지정
  • 상단 레퍼런스 링크를 참고, 파라미터를 통해 Zoom Client 초기화 가능

3-3) ZoomSDK.join

ZoomMtg.join({
	signature: signature, // required
	apiKey: apiKey, // required
	meetingNumber: meetingNumber, // required
	userName: userName, // required
	userEmail: userEmail, // required
	passWord: passWord, // optional
	success: (success) => {
		console.log(success)
	},
	error: (error) => {
		console.log(error)
	}
})
  • Signature : 사용자에 대한 서명, 검증된 사용자 체크
  • apiKey : Zoom App Credentials
  • meetingNumber : 실제 참여하고자 하는 미팅룸 번호
  • userName : 참가자 이름
  • userEmail : 참가자 이메일
  • passWord : 미팅룸 패스워드 (패스워드 지정 시)
profile
잊지 않기 위해 기록하는 프론트엔드 엔지니어입니다.

0개의 댓글