Bu sayfada, bir Google Etiket Yöneticisi'nin yan paneli ve ana sahne sayfalarının nasıl oluşturulacağı Meet web eklentisi.
SDK'yı yükleme ve içe aktarma
SDK'ya npm veya gstatic kullanarak erişebilirsiniz.
npm (önerilen)
Projenizde npm kullanılıyorsa Eklenti SDK'sı npm paketiyle tanışın.
Öncelikle npm paketini yükleyin:
npm install @googleworkspace/meet-addons
Ardından,
MeetAddonExport
arayüz:
import {meet} from '@googleworkspace/meet-addons/meet.addons';
TypeScript kullanıcıları için TypeScript tanımları modülle birlikte paketlenir.
gstatic
Google Meet Eklentileri SDK'sı
Statik içerik sunan bir alan adı olan gstatic JavaScript paketi.
Meet Eklentileri SDK'sını kullanmak için aşağıdaki komut dosyası etiketini uygulama:
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
Meet Eklentileri SDK'sı, window.meet.addon altındaki MeetAddon arayüzünden kullanılabilir.
Eklenti yüklemenin tamamlandığını belirt
Meet, çalışırken bir yükleme ekranı eklentisi yükleniyor. eklenti oturumu tanınmış, Meet bunu, ve kullanıcının, yüklemenin sona erdiğini ve üçüncü taraf içeriklerle etkileşime girebilmesidir.
Yan panel sayfası oluşturma
Yan panelde, yüklediğiniz
kullanabileceğiniz en iyi araçtır.
Eklentinizi seçtikten sonra, bir iframe tarafından yüklenen
panel URL'si:
eklenti manifest'inde belirtilir. Bu,
giriş noktasını kullanabilirsiniz. Meet Eklentileri SDK'sı işlevine erişmek için
yan panelde sidePanelClient örneği oluşturmanız gerekir.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.createSidePanelClient();
CLOUD_PROJECT_NUMBER kısmına proje numarasını yazın Google Cloud projesi.
Aşağıda, bir etkinliğin nasıl başlatılacağını gösteren kod snippet'i verilmiştir:
<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 kısmına proje numarasını yazın Google Cloud projesi.
Ana sahne sayfası oluşturma
Ana sahne, sahneyi gösterebileceğiniz ana odak alanıdır.
bir eklenti kullanmayı deneyin. Ana
etkinlik başladığında aşaması açılır. Meet Eklentileri SDK'sına erişmek için
ana sahnede, istemci nesnesini kullanabilirsiniz.
MeetMainStageClient:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
CLOUD_PROJECT_NUMBER kısmına proje numarasını yazın Google Cloud projesi.
Aşağıda, temel
aşama sayfası (önceki snippet'te mainStagePage.html) ve bir çağrı içerir
bir düğme tıklamasına yanıt olarak getActivityStartingState için:
<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 kısmına proje numarasını yazın Google Cloud projesi.