Zoom API 샘플 웹 구현하기

코로나 이후로도 굳이 만나지 않고 회의나 강의를 하는 문화가 정착할 거라고 생각합니다. 화상회의 기능을 개발하지 않아도 Zoom 같은 플랫폼의 API로 쉽게 만들 수 있습니다. 본 포스트에서는 Zoom API를 사용하기 위해 JWT를 발급받고, 샘플 소스에 넣어 웹으로 회의에 참여하는 기능을 구현했습니다.



Zoom에서 JWT 발급받기

1. 줌 사이트에 접속해 [Build App]을 클릭합니다.

Zoom API 샘플 웹 구현하기



2. 여러 인증수단 중 [JWT]을 클릭해 새로 발급합니다.

Zoom API 샘플 웹 구현하기



3. API를 사용하는 앱과 개발자에 대한 정보를 간략히 입력하세요.

Zoom API 샘플 웹 구현하기



4. 발급 후 사용할 요소는 [API Key]와 [API Secret]입니다.

Zoom API 샘플 웹 구현하기



Zoom 샘플 웹 구현하기

5. 코딩에 앞서 줌을 실행해 [새 회의]를 만들어주세요.

Zoom API 샘플 웹 구현하기



6. 화면의 [참가자]를 누른 후 [초대]를 클릭하세요.

Zoom API 샘플 웹 구현하기



7. [초대 링크 복사]를 클릭해 복사한 URL 안의 [회의 ID]와 [회의 PW]를 활용합니다.

Zoom API 샘플 웹 구현하기



8. 깃허브에서 샘플 웹의 소스 코드를 다운로드합니다. [샘플앱 주소]

Zoom API 샘플 웹 구현하기



9. 압축을 해제한 후 CDN 폴더 안의 [index.html]을 클릭하세요. 브라우저로 실행되면 7에서 만들었던 [회의 ID]와 [회의 PW]를 입력한 후 Join을 누르세요.

Zoom API 샘플 웹 구현하기



10. 이미지와 같은 오류가 발생하는데 이유는 주소창 안의 위치가 잘못됐기 때문입니다. CDN > JS 폴더 안의 [index.js]를 IDE로 띄워주세요.

Zoom API 샘플 웹 구현하기



11. 아래 흰 박스를 4에서 얻은 [API Key]와 [API Secret]으로 바꿔주세요.

Zoom API 샘플 웹 구현하기



12. 더 아래로 스크롤 하면 잘못된 실행주소가 나타납니다. 파일 주소 확인 방법은 아래를 확인해 주세요.

Zoom API 샘플 웹 구현하기



13. 파일의 경로는 폴더의 주소창을 사용해 쉽게 알 수 있습니다. 해당 주소를 입력해 주세요.

Zoom API 샘플 웹 구현하기



14. [index.html]로 다시 접속을 시도하면 [meeting.html]이 정상적으로 실행됩니다. join을 눌러 회의에 참여하세요.

Zoom API 샘플 웹 구현하기



15. 웹으로 줌 회의에 정상적으로 접속한 것을 볼 수 있습니다.

Zoom API 샘플 웹 구현하기




참조 사이트

[Zoom API 문서]
Zoom Web SDK document

[Zoom에서 JWT 발급받기]
Zoom API 연동하는 법 – 집콕주부 15단
Zoom API 연동해보기 – yuriyaam

[Zoom 샘플 웹 구현하기]
zoom sdk 이용하기(web) – StartIT
Zoom API Integration – Youtube



관련글

guest
0 Comments
Inline Feedbacks
모든 댓글 보기