คู่มือนี้จะอธิบายวิธีการตั้งค่าและเรียกใช้ตัวอย่าง ส่วนเสริม Google Meet
วัตถุประสงค์
- ตั้งค่าตัวอย่าง
- เรียกใช้ตัวอย่าง
ข้อกำหนดเบื้องต้น
- บัญชี Google Workspace ที่มีสิทธิ์เข้าถึง Google Meet
- โปรเจ็กต์ Google Cloud
- Node.js และ NPM ติดตั้งไว้แล้ว
ตั้งค่าตัวอย่าง
ในไดเรกทอรีการทำงาน ให้เรียกใช้คำสั่งต่อไปนี้เพื่อเริ่มต้นใช้งาน โปรเจ็กต์:
npm init
ติดตั้ง Express.js ในไดเรกทอรีที่ใช้งานได้
npm install express --save
ติดตั้ง SDK เว็บส่วนเสริม Meet โดยทำดังนี้
npm install @googleworkspace/meet-addons --save
ในไดเรกทอรีการทำงาน ให้สร้างไฟล์ชื่อ
index.js
และวาง รหัสต่อไปนี้:const express = require('express'); const path = require('path'); var app = express(); app = require("https-localhost")(); app.use(express.static(path.join(__dirname, '/'))); app.use('/', express.static(__dirname + '/node_modules/@googleworkspace/meet-addons')); app.get('/sidepanel', function(req, res){ res.render(path.join(__dirname, 'sidepanel.html')); }); app.get('/mainstage', function(req, res){ res.render(path.join(__dirname, 'mainstage.html')); }); app.listen(3000);
ในไดเรกทอรีการทำงาน ให้สร้างไฟล์ชื่อ
mainstage.html
และวาง รหัสต่อไปนี้:<html style="width: 100%; height: 100%"> <head> <title>Main Stage Add On</title> <script src="meet.addons.js"></script> </head> <body style="width: 100%; height: 100%; margin: 0; background: white;"> <div style="display: flex; flex-direction: column; height: 100%"> <h1>Main Stage Add-on</h1> <div> <div> <button id="get-collaboration-starting-state"> getCollaborationStartingState </button> </div> <div id="receivedCollaborationStartingState" style="margin-left: 20px; width: 300px; overflow-wrap: anywhere"></div> </div> </div> <script> let mainStageClient; async function init() { const session = await window.meet.addon.createAddonSession({ cloudProjectNumber: "CLOUD_PROJECT_NUMBER", }); console.log("Successfully constructed the add-on session."); const mainStageClient = await session.createMainStageClient(); console.log("Successfully constructed main stage client."); document .getElementById('get-collaboration-starting-state') .addEventListener( 'click', async () => { document.getElementById( 'receivedCollaborationStartingState').textContent = JSON.stringify( await mainStageClient.getCollaborationStartingState()); }); } document.body.onload = () => { init(); }; </script> </body> </html>
ในไดเรกทอรีการทำงาน ให้สร้างไฟล์ชื่อ
sidepanel.html
และวาง รหัสต่อไปนี้:<html style="width: 100%; height: 100%"> <head> <title>Side Panel Add-on</title> <script src="meet.addons.js"></script> </head> <body style="width: 100%; height: 100%; margin: 0"> <div style="display: flex; flex-direction: column; height: 100%"> <h1>Side Panel Add-on</h1> <div> <div> <button id="set-collaboration-starting-state"> setCollaborationStartingState </button> </div> <div> <input type="text" id="sidePanelIframeUrl" style="margin-left: 20px" value="https://localhost:3000/sidepanel.html" /> </div> <div> <input type="text" id="mainStageIframeUrl" style="margin-left: 20px" value="https://localhost:3000/mainstage.html" /> </div> <div> <input type="text" id="additionalData" style="margin-left: 20px" value="additional data" /> </div> </div> </div> <script> let sidePanelClient; async function init() { const session = await window.meet.addon.createAddonSession({ cloudProjectNumber: "CLOUD_PROJECT_NUMBER", }); console.log("Successfully constructed the add-on session."); sidePanelClient = await session.createSidePanelClient(); console.log("Successfully constructed side panel client."); document .getElementById('set-collaboration-starting-state') .addEventListener( 'click', async () => { const sidePanelIframeUrlInputElement = document.getElementById('sidePanelIframeUrl'); const mainStageIframeUrlInputElement = document.getElementById('mainStageIframeUrl'); const additionalDataInputElement = document.getElementById('additionalData'); await sidePanelClient.setCollaborationStartingState({ sidePanelUrl: sidePanelIframeUrlInputElement.value, mainStageUrl: mainStageIframeUrlInputElement.value, additionalData: additionalDataInputElement.value, }); }); } document.body.onload = () => { init(); }; </script> </body> </html>
แทนที่ค่าต่อไปนี้สำหรับทั้งไฟล์
mainstage.html
และsidepanel.html
CLOUD_PROJECT_NUMBER
: หมายเลขโปรเจ็กต์ โปรเจ็กต์ Google Cloud
ในไดเรกทอรีที่ใช้งานอยู่ ให้ติดตั้ง https-localhost แพ็กเกจ:
npm install https-localhost --save
ในไดเรกทอรีการทำงาน ให้เรียกใช้ตัวอย่าง
node index.js
ในเบราว์เซอร์ ให้ไปที่
https://localhost:3000/mainstage.html
และhttps://localhost:3000/sidepanel.html
เพื่อยืนยันหน้าเว็บ
สร้างส่วนเสริม Meet
ตั้งค่าการทำให้ส่วนเสริมใช้งานได้โดยทำตามขั้นตอนต่อไปนี้ วิธีการสร้างส่วนเสริม Meet
เรียกใช้ตัวอย่าง
ไปที่ Meet
คลิกกิจกรรม
ในหัวข้อส่วนเสริมของคุณ คุณควรเห็น
Google Meet Add-ons Quickstart
เลือกคีย์เพื่อเรียกใช้ ส่วนเสริม