Bu sayfada, web için Meet eklentilerini göstermek üzere yan panelin ve ana sahne sayfalarının nasıl oluşturulacağı açıklanmaktadır. Bu sayede, Google Meet'te diğer katılımcıların ortak çalışma yapabileceği etkinlikleri veya görevleri yönetebilirsiniz.
Google Meet Eklentileri SDK'sı, statik içerik sunan gstatic adlı alanın JavaScript paketi olarak sunulur.
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 Kaynak özeti'ne bakın.
Eklenti yüklemenin tamamlandığını belirt
Meet, eklenti yüklenirken bir yükleme ekranı gösteriyor. Eklenti oturumu oluşturulduktan sonra Meet, bunu yüklemenin tamamlandığı eklentiden gelen ve kullanıcının üçüncü taraf içeriğiyle etkileşim kurabileceğinden gelen bir sinyal olarak değerlendirir.
Yan panel sayfası oluşturma
Yan panelde, seçip kullanabileceğiniz, şu anda yüklü olan eklentiler gösterilir. Yan paneli örneklendirmek için MeetSidePanelClient istemci nesnesini kullanabilirsiniz:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
Aşağıda, ana sahnenin yüklenmesini ve boşaltılmasını içeren bir yan panel sayfası örneğini gösteren bir kod snippet'i bulunmaktadır:
<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="set-collaboration-starting-state">
setCollaborationStartingState
</button>
</div>
<div>
<input type="text" id="sidePanelIframeUrl" style="margin-left: 20px"
value="https://your_side_panel_iframe.url" />
</div>
<div>
<input type="text" id="mainStageIframeUrl" style="margin-left: 20px"
value="https://your_main_stage_iframe.url" />
</div>
<div>
<input type="text" id="additionalData" style="margin-left: 20px" value="additional data" />
</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('set-collaboration-starting-state')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalDataInputElement =
document.getElementById('additionalData');
await sidePanelClient.setCollaborationStartingState({
sidePanelUrl: sidePanelIframeUrlInputElement.value,
mainStageUrl: mainStageIframeUrlInputElement.value,
additionalData: additionalDataInputElement.value,
});
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
Ana sahne sayfası oluşturma
Ana sahne, seçili eklentinin içeriğini görüntülemenize olanak tanıyan alandır. Yan panel sayfasını oluşturduktan sonra ana sahneyi örneklendirmek için MeetMainStageClient istemci nesnesini kullanabilirsiniz:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Web için Meet eklentilerini kullanmak üzere bir ana sahne sayfası oluşturmaya devam edin. Aşağıdaki kod snippet'i, yan panel sayfasının yüklenmesini ve kaldırılmasını içeren bir ana aşama örneğidir:
<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">
getCollaborationStartingState
</button>
</div>
<div id="receivedCollaborationStartingState"
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 () => {
document.getElementById(
'receivedCollaborationStartingState').textContent =
JSON.stringify(
await mainStageClient.getCollaborationStartingState());
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>