คู่มือนี้จะอธิบายวิธีการตั้งค่าและเรียกใช้ตัวอย่าง ส่วนเสริม Google Meet โดยการสร้างเวทีหลักและแผงด้านข้าง "สวัสดีชาวโลก" ตัวอย่างในหน้านี้มีอยู่ใน GitHub ด้วยเช่นกันว่าเสร็จสมบูรณ์ ส่วนเสริม Meet ที่สร้างด้วย JavaScript พื้นฐาน หรือ Next.js TypeScript
ติดตั้งและนําเข้า SDK
คุณสามารถเข้าถึง SDK โดยใช้ npm หรือใช้ gstatic
npm (แนะนำ)
หากโครงการของคุณใช้ npm คุณสามารถทำตามคำแนะนำสำหรับ แพ็กเกจ SDK NPM ของส่วนเสริม Meet
ก่อนอื่น ให้ติดตั้งแพ็กเกจ npm ดังนี้
npm install @googleworkspace/meet-addons
จากนั้นคุณจะสามารถใช้ SDK ส่วนเสริม Meet ได้โดยการนำเข้า
MeetAddonExport
อินเทอร์เฟซ:
import {meet} from '@googleworkspace/meet-addons/meet.addons';
สําหรับผู้ใช้ TypeScript ระบบจะรวมคําจํากัดความ TypeScript ไว้ในโมดูล
gstatic
SDK ของส่วนเสริม Google Meet มีให้บริการเป็นแพ็กเกจ JavaScript จาก gstatic
ซึ่งเป็นโดเมนที่แสดงเนื้อหาแบบคงที่
หากต้องการใช้ SDK ส่วนเสริม Meet ให้เพิ่มแท็กสคริปต์ต่อไปนี้ลงใน แอป:
<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.js"></script>
SDK ส่วนเสริม Meet พร้อมใช้งานผ่านอินเทอร์เฟซ MeetAddon
ในส่วน window.meet.addon
สร้างหน้าแผงด้านข้าง
แผงด้านข้างจะแสดงส่วนเสริมที่ติดตั้งไว้ซึ่งคุณเลือกและใช้ได้ เมื่อเลือกส่วนเสริมแล้ว iframe จะโหลด URL ของแผงด้านข้างที่คุณระบุไว้ใน ไฟล์ Manifest ของส่วนเสริม ไฟล์นี้ควรเป็นจุดแรกเข้าของแอป และควรทําสิ่งต่อไปนี้เป็นอย่างน้อย
บ่งบอกว่าการโหลดส่วนเสริมเสร็จสมบูรณ์ Meet จะแสดงหน้าจอการโหลดในขณะที่ กำลังโหลดส่วนเสริม เมื่อ เซสชันส่วนเสริม สร้างขึ้นโดยการเรียกใช้
createAddonSession
() Meet จะถือว่านี่เป็นสัญญาณจาก ส่วนเสริมที่โหลดเสร็จแล้ว และผู้ใช้ สามารถโต้ตอบกับเนื้อหาของบุคคลที่สามได้ ส่วนเสริมของคุณ ไม่ควรเรียกใช้เมธอดcreateAddonSession()
จนกว่าเนื้อหาของคุณจะจบ กำลังโหลดสร้างไคลเอ็นต์แผงด้านข้าง หากต้องการเข้าถึง SDK ของส่วนเสริม Meet ในแผงด้านข้าง คุณต้องสร้างอินเทอร์เฟซ
MeetSidePanelClient
ขึ้นมา ซึ่งจะช่วยให้คุณควบคุมประสบการณ์การใช้งาน SDK ของส่วนเสริม Meet หลักได้เริ่มกิจกรรม ซึ่งจะช่วยให้ผู้อื่นเข้าร่วมส่วนเสริมของคุณได้ และเปิดส่วนเสริมในหน้าจอหลัก (ไม่บังคับ)
ตัวอย่างโค้ดต่อไปนี้แสดงวิธีที่เซสชันสร้างไคลเอ็นต์แผงด้านข้าง และวิธีที่ไคลเอ็นต์แผงด้านข้างเริ่มกิจกรรมในเวทีหลัก
JS พื้นฐาน + Webpack
ในไฟล์ใหม่ชื่อ main.js
ให้กำหนดฟังก์ชันที่สร้างฟังก์ชัน
เซสชันส่วนเสริม ไคลเอ็นต์แผงด้านข้าง และการเริ่มต้น
กิจกรรมเมื่อมีการคลิกปุ่มที่มีรหัส 'start-activity'
:
import { meet } from '@googleworkspace/meet-addons/meet.addons';
const CLOUD_PROJECT_NUMBER = 'CLOUD_PROJECT_NUMBER';
const MAIN_STAGE_URL = 'MAIN_STAGE_URL';
/**
* Prepares the Add-on Side Panel Client, and adds an event to launch the
* activity in the main stage when the main button is clicked.
*/
export async function setUpAddon() {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: CLOUD_PROJECT_NUMBER,
});
const sidePanelClient = await session.createSidePanelClient();
document
.getElementById('start-activity')
.addEventListener('click', async () => {
await sidePanelClient.startActivity({
mainStageUrl: MAIN_STAGE_URL
});
});
}
ในไฟล์ใหม่ที่ชื่อ SidePanel.html
ให้กำหนดปุ่มที่เปิดใช้งานกิจกรรม และเรียกใช้ฟังก์ชันจาก main.js
เมื่อโหลดเอกสาร
<html>
<head>
<title>Meet Add-on Side Panel</title>
<script src="./main.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0">
<div>This is the Add-on Side Panel. Only you can see this.</div>
<button id="start-activity">Launch Activity in Main Stage.</button>
<script>
document.body.onload = () => {
// Library name (`helloWorld`) is defined in the webpack config.
// The function (`setUpAddon`) is defined in main.js.
helloWorld.setUpAddon();
};
</script>
</body>
</html>
คุณจะต้องรวม SDK ส่วนเสริมของ Meet ไว้กับ
main.js
และแสดงในคลัง เราขอแนะนำให้ดำเนินการภายในวันที่
ติดตั้ง Webpack
และการใช้ตัวเลือก library
ในไฟล์ webpack.config.js
ของคุณ:
module.exports = {
entry: './main.js',
output: {
library: 'helloWorld',
...
},
...
};
Next.js
เพิ่ม Page
ใหม่เพื่อแสดงแผงด้านข้าง หน้านี้จะสร้าง
เซสชันส่วนเสริมและไคลเอ็นต์แผงด้านข้างขณะโหลด และ
เริ่มกิจกรรมเมื่อมีการคลิกปุ่ม
'use client';
import { useEffect, useState } from 'react';
import {
meet,
MeetSidePanelClient,
} from '@googleworkspace/meet-addons/meet.addons';
export default function Page() {
const [sidePanelClient, setSidePanelClient] = useState<MeetSidePanelClient>();
// Launches the main stage when the main button is clicked.
async function startActivity(e: unknown) {
if (!sidePanelClient) {
throw new Error('Side Panel is not yet initialized!');
}
await sidePanelClient.startActivity({
mainStageUrl: 'MAIN_STAGE_URL'
});
}
/**
* Prepares the Add-on Side Panel Client.
*/
useEffect(() => {
(async () => {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
});
setSidePanelClient(await session.createSidePanelClient());
})();
}, []);
return (
<>
<div>
This is the Add-on Side Panel. Only you can see this.
</div>
<button onClick={startActivity}>
Launch Activity in Main Stage.
</button>
</>
);
}
แทนที่ข้อมูลต่อไปนี้
CLOUD_PROJECT_NUMBER: หมายเลขโปรเจ็กต์ Google Cloud
MAIN_STAGE_URL: URL ของเวทีหลักที่คุณสร้างในขั้นตอนถัดไป
สร้างหน้าเวทีหลัก
เวทีหลักคือพื้นที่โฟกัสหลักที่คุณสามารถแสดงส่วนเสริมได้หากต้องการพื้นที่ทำงานขนาดใหญ่ขึ้น องค์ประกอบหลัก
จะเปิดขึ้นเมื่อกิจกรรมเริ่มขึ้น หากต้องการเข้าถึงฟีเจอร์ SDK ของส่วนเสริม Meet ในเวทีหลัก คุณต้องใช้อินเทอร์เฟซ MeetMainStageClient
ตัวอย่างโค้ดต่อไปนี้แสดงตัวอย่างหน้าเวทีหลักที่แสดงผล div
ที่กำหนดเองเพื่อพูดว่า "Hello, world!"
JS + Webpack พื้นฐาน
เพิ่มฟังก์ชันต่อไปนี้ลงในไฟล์ main.js
ที่คุณสร้างไว้แล้ว
เวทีหลักอาจเป็นสัญญาณว่าโหลดเสร็จแล้ว ดังนี้
/**
* Prepares the Add-on Main Stage Client, which signals that the add-on has
* successfully launched in the main stage.
*/
export async function initializeMainStage() {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: CLOUD_PROJECT_NUMBER,
});
await session.createMainStageClient();
}
จากนั้นเพิ่มไฟล์ MainStage.html
ใหม่ ซึ่งจะเรียก
initializeMainStage
และแสดงคำว่า "สวัสดีทุกคน" ที่กำหนดเอง เนื้อหา:
<html>
<body style="width: 100%; height: 100%; margin: 0">
<div>
This is the Add-on Main Stage. Everyone in the call can see this.
</div>
<div>Hello, world!</div>
<script>
document.body.onload = () => {
helloWorld.initializeMainStage();
};
</script>
</body>
</html>
Next.js
เพิ่ม Page
เพื่อแสดงเวทีหลัก หน้านี้จะสร้างเซสชันของส่วนเสริมและไคลเอ็นต์ของแผงด้านข้างเมื่อโหลด และแสดงเนื้อหา "Hello World" ที่กําหนดเอง
'use client';
import { useEffect } from 'react';
import { meet } from '@googleworkspace/meet-addons/meet.addons';
export default function Page() {
/**
* Prepares the Add-on Main Stage Client, which signals that the add-on
* has successfully launched in the main stage.
*/
useEffect(() => {
(async () => {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
});
await session.createMainStageClient();
})();
}, []);
return (
<>
<div>
This is the Add-on Main Stage.
Everyone in the call can see this.
</div>
<div>Hello, world!</div>
</>
);
}
แทนที่ CLOUD_PROJECT_NUMBER ด้วยหมายเลขโปรเจ็กต์ โปรเจ็กต์ Google Cloud
เรียกใช้ตัวอย่าง
หากต้องการเรียกใช้แบบในเครื่อง ให้ทําดังนี้
JS + Webpack พื้นฐาน
เรียกใช้ webpack เพื่อรวมไฟล์ main.js
เข้ากับ SDK ของส่วนเสริม Meet โดยทำดังนี้
npx webpack
เปิดไฟล์ SidePanel.html
และไฟล์ MainStage.html
ในเบราว์เซอร์ใดก็ได้
ซึ่งควรมีลักษณะเหมือนการติดตั้งใช้งานตัวอย่าง JS พื้นฐานใน GitHub
ไปยัง SidePanel.html
และ MainStage.html
บนหน้า GitHub
Next.js
เรียกใช้ถัดไป
next dev
นำทางไปยัง http://localhost:3000/sidepanel
หรือ
http://localhost:3000/mainstage
ซึ่งควรมีลักษณะเดียวกับ
การทำให้ตัวอย่าง Next.js ใช้งานได้ใน GitHub
ไปยัง SidePanel.html
และ MainStage.html
บนหน้า GitHub
ทำให้ส่วนเสริม Meet ใช้งานได้
ตั้งค่าการติดตั้งใช้งานส่วนเสริมโดยทําตามวิธีการติดตั้งใช้งานส่วนเสริมของ Meet
เรียกใช้ตัวอย่าง
ไปที่ Meet
คลิกกิจกรรม
ในส่วนส่วนเสริมของคุณ คุณจะเห็น ส่วนเสริม เลือกเพื่อเรียกใช้ส่วนเสริม
เพิ่มฟีเจอร์อื่นๆ
เมื่อคุณมีแผงด้านข้างและหน้าจอหลักพื้นฐานแล้ว ก็เริ่มเพิ่มฟีเจอร์อื่นๆ ลงในส่วนเสริมได้ ดังนี้
- การทำงานร่วมกันโดยใช้ส่วนเสริมของ Meet
- ข้อความระหว่างเวทีหลักกับแผงด้านข้าง
- การโปรโมตส่วนเสริมผ่านการแชร์หน้าจอ
เราขอแนะนำให้ใช้ตัวอย่างส่วนเสริมของ Meet ใน GitHub เป็นข้อมูลอ้างอิงในการสร้างฟีเจอร์เหล่านี้