Halaman ini menjelaskan cara membuat panel samping dan halaman tahap utama dari Perkenalkan Add-on Web.
Menginstal dan mengimpor SDK
Anda dapat mengakses SDK menggunakan npm atau menggunakan gstatic.
npm (direkomendasikan)
Jika proyek Anda menggunakan npm, Anda dapat mengikuti petunjuk untuk Perkenalkan paket npm Add-on SDK.
Pertama, instal paket npm:
npm install @googleworkspace/meet-addons
Kemudian, SDK Add-on Meet tersedia dengan mengimpor
MeetAddonExport
antarmuka:
import {meet} from '@googleworkspace/meet-addons/meet.addons';
Untuk pengguna TypeScript, definisi TypeScript dikemas dengan modul.
{i>gstatic<i}
SDK Add-on Google Meet tersedia sebagai
Paket JavaScript dari gstatic
, domain yang menayangkan konten statis.
Untuk menggunakan SDK Add-on Meet, tambahkan tag skrip berikut ke aplikasi:
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
SDK Add-on Meet tersedia melalui antarmuka MeetAddon
di bagian window.meet.addon
.
Menunjukkan pemuatan add-on selesai
Meet menampilkan layar pemuatan saat add-on sedang dimuat. Jika sesi add-on adalah tetap, Meet memperlakukan panggilan ini sebagai sinyal dari tambahan saat pemuatan telah selesai, dan pengguna dapat berinteraksi dengan konten pihak ketiga.
Membuat halaman panel samping
Panel samping menampilkan add-on terinstal yang
yang dapat dipilih dan digunakan.
Setelah Anda memilih add-on, iframe akan memuat bagian samping
panel URL yang Anda
yang ditentukan dalam manifes add-on. Seharusnya,
titik masuk aplikasi Anda. Untuk mengakses fungsi SDK Add-on Meet
Di panel samping, Anda harus membuat instance sidePanelClient
.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.createSidePanelClient();
Ganti CLOUD_PROJECT_NUMBER dengan nomor project Anda project Google Cloud Anda.
Berikut adalah cuplikan kode yang menunjukkan cara memulai aktivitas:
<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>
Ganti CLOUD_PROJECT_NUMBER dengan nomor project Anda project Google Cloud Anda.
Membuat halaman panggung utama
Panggung utama adalah area fokus utama tempat Anda dapat menampilkan
{i>add-on<i} jika ruang kerja
yang lebih besar diperlukan. Utama
akan terbuka setelah aktivitas dimulai. Untuk mengakses SDK Add-on Meet
di layar utama, Anda dapat menggunakan objek klien
MeetMainStageClient
:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Ganti CLOUD_PROJECT_NUMBER dengan nomor project Anda project Google Cloud Anda.
Berikut ini cuplikan kode yang menunjukkan contoh
halaman tahap (mainStagePage.html
di cuplikan sebelumnya), dan menyertakan panggilan
ke getActivityStartingState
sebagai respons terhadap klik tombol:
<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>
Ganti CLOUD_PROJECT_NUMBER dengan nomor project Anda project Google Cloud Anda.