Trang này mô tả cách tạo bảng điều khiển bên và các trang hiển thị chính của một Tiện ích bổ sung dành cho web của Meet.
SDK Tiện ích của Google Meet có sẵn dưới dạng gói JavaScript từ gstatic, một miền phân phát nội dung tĩnh.
Để sử dụng SDK tiện ích bổ sung cho Meet, hãy thêm thẻ tập lệnh sau vào ứng dụng của bạn:
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
Chức năng SDK tiện ích bổ sung Meet có trong window.meet.addon.
Để xem tài liệu tham khảo, hãy xem Tóm tắt tài nguyên.
Cho biết đã tải xong tiện ích bổ sung
Meet hiển thị một màn hình tải trong khi đang tải tiện ích bổ sung. Khi phiên hoạt động của tiện ích bổ sung là đã được thành lập, Meet coi đây là một tín hiệu từ tiện ích bổ sung đã tải xong và người dùng có thể tương tác với nội dung của bên thứ ba.
Tạo trang bảng điều khiển bên
Bảng điều khiển bên hiển thị các tiện ích bổ sung đã cài đặt mà bạn có thể chọn và sử dụng.
Sau khi bạn chọn tiện ích bổ sung, iframe sẽ tải phía bên
URL của bảng điều khiển mà bạn
được chỉ định trong tệp kê khai tiện ích bổ sung. Đây sẽ là
điểm truy cập của ứng dụng. Cách sử dụng chức năng SDK Tiện ích bổ sung của Meet
trong bảng điều khiển bên, bạn phải tạo sidePanelClient.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.createSidePanelClient();
Thay thế CLOUD_PROJECT_NUMBER bằng số dự án của bạn Dự án trên Google Cloud.
Dưới đây là đoạn mã cho biết cách bắt đầu một hoạt động:
<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>
Thay thế CLOUD_PROJECT_NUMBER bằng số dự án của bạn Dự án trên Google Cloud.
Tạo một trang giai đoạn chính
Phiên bản chính là khu vực tập trung chính, nơi bạn có thể hiển thị tiện ích bổ sung nếu cần không gian làm việc lớn hơn. Chính
giai đoạn sẽ mở sau khi hoạt động bắt đầu. Cách truy cập vào SDK Tiện ích bổ sung cho Meet
các tính năng trong giai đoạn chính, bạn có thể sử dụng đối tượng ứng dụng
MeetMainStageClient:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Thay thế CLOUD_PROJECT_NUMBER bằng số dự án của dự án Google Cloud.
Sau đây là một đoạn mã cho thấy ví dụ về
trang giai đoạn (mainStagePage.html trong đoạn mã trước) và bao gồm một lệnh gọi
vào getActivityStartingState để phản hồi lại một lượt nhấp vào nút:
<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>
Thay thế CLOUD_PROJECT_NUMBER bằng số dự án của bạn Dự án trên Google Cloud.