Bu sayfada, bir Google Etiket Yöneticisi'nin yan paneli ve ana sahne sayfalarının nasıl oluşturulacağı Meet web eklentisi.
Google Meet Eklentileri SDK'sı
Statik içerik sunan bir alan adı olan gstatic
JavaScript paketi.
Meet Eklentileri SDK'sını kullanmak için uygulamanıza aşağıdaki komut dosyası etiketini ekleyin:
<script src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"></script>
Meet Eklentileri SDK'sı işlevi window.meet.addon
altında kullanılabilir.
Referans belgeleri görüntülemek için bkz. Kaynak
özet bölümüne bakın.
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.getSidePanelClient();
Aşağıda, ortak çalışmaların 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/0.7.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-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>
Ana sahne sayfası oluşturma
Ana sahne, eklentiyi gösterebileceğiniz ana odak alanıdır
bir çözüm üretebiliriz. Ana aşama, ortak çalışma yapıldıktan sonra
başlar. Meet Eklentileri SDK'sı işlevine
bu aşamada istemci nesnesini
MeetMainStageClient
:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
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 getCollaborationStartingState
için:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add On</title>
<script src="https://www.gstatic.com/meetjs/addons/0.7.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-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>