หน้านี้อธิบายวิธีสร้างแผงด้านข้างและหน้าหลัก ส่วนเสริมบนเว็บของ Meet
SDK ของส่วนเสริม Google Meet มีให้บริการเป็นแพ็กเกจ JavaScript จาก gstatic
ซึ่งเป็นโดเมนที่แสดงเนื้อหาแบบคงที่
หากต้องการใช้ SDK ส่วนเสริม Meet ให้เพิ่มแท็กสคริปต์ต่อไปนี้ลงในแอป
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
ฟังก์ชันของ SDK ส่วนเสริม Meet พร้อมให้ใช้งานภายใต้ window.meet.addon
หากต้องการดูเอกสารอ้างอิง โปรดดูที่แหล่งข้อมูล
สรุป
ระบุว่าการโหลดส่วนเสริมเสร็จสมบูรณ์แล้ว
Meet จะแสดงหน้าจอการโหลดในขณะที่ กำลังโหลดส่วนเสริม เมื่อ เซสชันเสริมคือ ก่อตั้งขึ้น Meet จะถือว่านี่เป็นสัญญาณจาก ส่วนเสริมที่โหลดเสร็จแล้ว และผู้ใช้ สามารถโต้ตอบกับเนื้อหาของบุคคลที่สามได้
สร้างหน้าแผงด้านข้าง
แผงด้านข้างจะแสดงส่วนเสริมที่ติดตั้งไว้ซึ่งคุณเลือกและใช้ได้
เมื่อเลือกส่วนเสริมแล้ว iframe จะโหลด URL ของแผงด้านข้างที่คุณระบุไว้ในไฟล์ Manifest ของส่วนเสริม ค่านี้ควรเป็น
จุดแรกเข้าของแอป วิธีเข้าถึงฟังก์ชันการทำงานของ SDK ส่วนเสริม Meet
ในแผงด้านข้าง คุณต้องสร้างอินสแตนซ์ sidePanelClient
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.createSidePanelClient();
แทนที่ CLOUD_PROJECT_NUMBER ด้วยหมายเลขโปรเจ็กต์ โปรเจ็กต์ Google Cloud
นี่คือข้อมูลโค้ดที่แสดงวิธีเริ่มกิจกรรม
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/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="start-activity">
startActivity
</button>
</div>
<div>
Activity Side Panel URL:
<input type="text" id="sidePanelIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/newSidePanelPage.html" />
</div>
<div>
Main Stage URL:
<input type="text" id="mainStageIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/mainStagePage.html" />
</div>
<div>
Activity start state data:
<input type="text" id="additionalProperty" style="margin-left: 20px; width: 90%;"
value="abc123" />
</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('start-activity')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalPropertyInputElement =
document.getElementById('additionalProperty');
await sidePanelClient.startActivity({
// Side panel is replaced with a new page.
sidePanelUrl: sidePanelIframeUrlInputElement.value,
// Main stage loads a large work area.
mainStageUrl: mainStageIframeUrlInputElement.value,
additionalData: JSON.stringify({
additionalProperty: additionalPropertyInputElement.value
}),
});
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
แทนที่ CLOUD_PROJECT_NUMBER ด้วยหมายเลขโปรเจ็กต์ โปรเจ็กต์ Google Cloud
สร้างหน้าเวทีหลัก
เวทีหลักคือพื้นที่โฟกัสหลักที่คุณสามารถแสดง
หากจำเป็นต้องใช้พื้นที่ทำงานขนาดใหญ่ขึ้น องค์ประกอบหลัก
จะเปิดขึ้นเมื่อกิจกรรมเริ่มขึ้น หากต้องการเข้าถึงฟีเจอร์ SDK ของส่วนเสริม Meet ในสเตจหลัก คุณสามารถใช้ออบเจ็กต์ไคลเอ็นต์ MeetMainStageClient
ดังนี้
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
แทนที่ CLOUD_PROJECT_NUMBER ด้วยหมายเลขโปรเจ็กต์ โปรเจ็กต์ Google Cloud
ต่อไปนี้เป็นข้อมูลโค้ดที่แสดงตัวอย่างของ
หน้าพื้นที่งาน (mainStagePage.html
ในข้อมูลโค้ดก่อนหน้านี้) และรวมการเรียก
ไปยัง getActivityStartingState
เพื่อตอบสนองการคลิกปุ่ม:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/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-activity-starting-state">
Get Activity Starting State's Additional Property
</button>
</div>
<div id="receivedActivityStartingStateProperty"
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-activity-starting-state')
.addEventListener(
'click', async () => {
const startingState =
await mainStageClient.getActivityStartingState();
const startingStateData = JSON.parse(startingState.additionalData);
document.getElementById(
'receivedActivityStartingStateProperty').textContent =
startingStateData.additionalProperty;
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
แทนที่ CLOUD_PROJECT_NUMBER ด้วยหมายเลขโปรเจ็กต์ Google Cloud