หน้านี้อธิบายวิธีสร้างแผงด้านข้างและหน้าหลัก ส่วนเสริมบนเว็บของ Meet
SDK ส่วนเสริมของ Google Meet พร้อมให้ใช้งานในรูปแบบ
กลุ่ม JavaScript จาก gstatic
ซึ่งเป็นโดเมนที่แสดงผลเนื้อหาแบบคงที่
หากต้องการใช้ SDK ส่วนเสริม Meet ให้เพิ่มแท็กสคริปต์ต่อไปนี้ลงในแอป
<script src="https://www.gstatic.com/meetjs/addons/0.9.1/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.getSidePanelClient();
ข้อมูลโค้ดที่แสดงวิธีเริ่มทํางานร่วมกันมีดังนี้
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/0.9.1/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-collaboration">
startCollaboration
</button>
</div>
<div>
Collaboration 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>
Collaboration 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-collaboration')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalPropertyInputElement =
document.getElementById('additionalProperty');
await sidePanelClient.startCollaboration({
// 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>
สร้างหน้าขั้นตอนหลัก
เวทีหลักคือพื้นที่โฟกัสหลักที่คุณสามารถแสดงส่วนเสริมได้
หากต้องการพื้นที่การทำงานขนาดใหญ่ขึ้น เวทีหลักจะเปิดขึ้นเมื่อมีการทำงานร่วมกัน
เริ่ม วิธีเข้าถึงฟังก์ชันการทำงานของ SDK ส่วนเสริม Meet ใน
คุณสามารถใช้ออบเจ็กต์ไคลเอ็นต์
MeetMainStageClient
:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
ต่อไปนี้เป็นข้อมูลโค้ดที่แสดงตัวอย่างของ
หน้าพื้นที่งาน (mainStagePage.html
ในข้อมูลโค้ดก่อนหน้านี้) และรวมการเรียก
ไปยัง getCollaborationStartingState
เพื่อตอบสนองการคลิกปุ่ม:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add On</title>
<script src="https://www.gstatic.com/meetjs/addons/0.9.1/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">
Get Collaboration Starting State's Additional Property
</button>
</div>
<div id="receivedCollaborationStartingStateProperty"
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 () => {
const startingState =
await mainStageClient.getCollaborationStartingState();
const startingStateData = JSON.parse(startingState.additionalData);
document.getElementById(
'receivedCollaborationStartingStateProperty').textContent =
startingStateData.additionalProperty;
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>