Cette page explique comment créer le panneau latéral et les pages de l'espace de création principal d'un le module complémentaire Web Meet.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Le SDK des modules complémentaires Google Meet est disponible
Bundle JavaScript provenant de 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.7.0/meet.addons.js"></script>
La fonctionnalité du SDK des modules complémentaires Meet est disponible sous window.meet.addon.
Pour consulter la documentation de référence, reportez-vous à la page Ressource
résumé.
Indiquer que le chargement du module complémentaire est terminé
Meet affiche un écran de chargement pendant que le module complémentaire est en cours de chargement. Lorsque est une session complémentaire établie, Meet considère cela comme un signal émis par 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 installés
que vous pouvez sélectionner et utiliser.
Une fois que vous avez sélectionné votre module complémentaire, un iFrame charge le côté
URL du panneau
spécifiés dans le fichier manifeste du module complémentaire. Il doit s'agir
point d'entrée de votre application. Pour accéder aux fonctionnalités du SDK des modules complémentaires Meet
dans le panneau latéral, vous devez instancier un sidePanelClient.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
L'extrait de code ci-dessous montre comment démarrer une collaboration:
<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>
Créer une page principale sur la scène
L'espace principal est la zone de focus principale où vous pouvez afficher le module complémentaire
si un plus grand espace
de travail est nécessaire. L'espace principal s'ouvre lorsque la collaboration
démarre. Pour accéder aux fonctionnalités du SDK des modules complémentaires Meet dans le
vous pouvez utiliser l'objet client
MeetMainStageClient
:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Voici un extrait de code montrant un exemple
(mainStagePage.html dans l'extrait précédent) et inclut un appel
à getCollaborationStartingState en réponse à un clic sur un bouton:
<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>