Cette page explique comment créer le panneau latéral et les pages de l'espace de création principal pour afficher les modules complémentaires Meet pour le Web. Cela vous permet de gérer les activités ou les tâches pour lesquelles d'autres participants peuvent collaborer dans Google Meet.
Le SDK des modules complémentaires Google Meet est disponible sous forme de bundle JavaScript dans gstatic, un domaine qui diffuse du contenu statique.
Pour utiliser le SDK des modules complémentaires Meet, ajoutez le tag de script suivant à votre application:
<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.js"></script>
La fonctionnalité du SDK des modules complémentaires Meet est disponible sous window.meet.addon.
Pour afficher la documentation de référence, consultez le résumé des ressources.
Indiquer que le chargement du module complémentaire est terminé
Meet affiche un écran pendant le chargement du module complémentaire. Lorsque la session du module complémentaire est établie, Meet la traite comme un signal du module complémentaire indiquant que le chargement est terminé et que l'utilisateur peut interagir avec le contenu tiers.
Créer une page dans le panneau latéral
Le panneau latéral affiche les modules complémentaires actuellement installés que vous pouvez sélectionner et utiliser. Pour instancier le panneau latéral, vous pouvez utiliser l'objet client MeetSidePanelClient:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
Vous trouverez ci-dessous un extrait de code qui montre un exemple de panneau latéral, y compris le chargement et le déchargement de l'étape principale:
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/latest/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>
Créer une page principale sur la scène
L'espace principal est la zone qui vous permet d'afficher le contenu du module complémentaire sélectionné. Après avoir créé la page du panneau latéral, vous pouvez utiliser l'objet client MeetMainStageClient pour instancier l'étape principale:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Créez une page principale sur l'espace de création afin d'utiliser les modules complémentaires Meet pour le Web. L'extrait de code ci-dessous est un exemple d'étape principale, qui inclut le chargement et le déchargement de la page du panneau latéral:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add On</title>
<script src="https://www.gstatic.com/meetjs/addons/latest/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>