Embeber Zoom en Vuejs

Recientemente me he visto involucrado en un proyecto en el cual he tenido que trabajar por primera vez con Zoom. Una de las funcionalidades peor documentadas y con más limitaciones de Zoom es la integración, en este caso Embeber Zoom en Vuejs, es decir, hacer que un Meeting de Zoom pueda ser seguido desde tu sitio en lugar de utilizar su APP.

Instalar el SDK de Zoom Lo primero que debemos hacer es instalar el SDK de Zoom, esta es la herramienta que nos permitirá hacer la integración:

yarn add @zoomus/websdk

Inicializar la configuración de Zoom en Vuejs Ahora crea un archivo zoom.client.js para inicializar la configuración necesaria y crear dos EventBus con Vuejs.

import Vue from 'vue'

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

ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.9/lib', '/av');

console.log("checkSystemRequirements");
console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

const API_KEY = 'YOUR_JWT_API_KEY';
const API_SECRET = 'YOUR_JWT_API_SECRET';
const lang = 'es-ES';

const MeetingCfg = (meetingId, nickname, email, password, role) => ({
    apiKey: API_KEY,
    apiSecret: API_SECRET,
    meetingNumber: meetingId, // meetingID
    userEmail: email,
    userName: nickname,
    passWord: password,
    leaveUrl: "/meetings", // when meeting is closed
    role: parseInt(role), // 0 (participant) 1 (host)
    lang // language
})

Vue.prototype.$ZoomMtg = ZoomMtg
Vue.prototype.$MeetingCfg = MeetingCfg

Crear el componente Zoom con Vuejs Para finalizar nuestro trabajo simplemente nos queda crear un componente con Vuejs para poder mostrar los meetings de Zoom en nuestro sitio web, eso lo podemos conseguir con el siguiente componente:

<template>
    <div></div>
</template>

<script>
    import "@/zoom/zoom.client";
    export default {
        name: "Zoom",
        props: {
            nickname: String,
            meetingId: String,
            email: String,
            password: String,
            role: String
        }
        mounted () {
            // Init meetingConfig with event bus
            const meetingConfig = this.$MeetingCfg(
                this.meetingId, this.nickname, this.email, this.password, this.role
            )
            const ZoomMtg = this.$ZoomMtg;
            
            // create the signature
            const signature = ZoomMtg.generateSignature({
                meetingNumber: this.meetingId,
                apiKey: meetingConfig.apiKey,
                apiSecret: meetingConfig.apiSecret,
                role: meetingConfig.role,
                success: function (res) {
                    meetingConfig.signature = res.result;
                },
            });

            // init zoom!
            ZoomMtg.init({
                leaveUrl: meetingConfig.leaveUrl,
                webEndpoint: meetingConfig.webEndpoint,
                success: function () {
                    // join!
                    ZoomMtg.join({
                        meetingNumber: meetingConfig.meetingNumber,
                        userName: meetingConfig.userName,
                        signature: signature,
                        apiKey: meetingConfig.apiKey,
                        userEmail: meetingConfig.userEmail,
                        passWord: meetingConfig.passWord,
                        success: function (res) {
                            ZoomMtg.getAttendeeslist({});
                            ZoomMtg.getCurrentUser({
                                success: function (res) {
                                    console.log("success getCurrentUser", res.result.currentUser);
                                },
                            });
                        },
                        error: function (res) {
                            console.log(res);
                        },
                    });
                },
                error: function (res) {
                    console.log(res);
                },
            });
        }
    };
</script>

Mostrar Zoom en nuestra web El último paso es utilizar nuestro nuevo componente Zoom, eso lo podemos conseguir con el siguiente código:

<zoom
    meeting-id=""
    password=""
    nickname=""
    email=""
    role=""
></zoom>

Y eso es todo, espero que esta pequeña guía te ayude a hacer la integración para embeber Zoom en una web, en este caso utilizando Vuejs.