โปรโมตส่วนเสริมแก่ผู้ใช้ผ่านการแชร์หน้าจอ

การโปรโมตส่วนเสริมผ่านหน้าจอ การแชร์

หน้านี้จะอธิบายวิธีโปรโมตส่วนเสริมให้ผู้ใช้ขณะแชร์หน้าจอแท็บด้วย Google Meet โดยวางโค้ดจำนวนเล็กน้อยในหน้าเว็บอื่น

วิธี exposeToMeetWhenScreensharing() ช่วยให้เว็บไซต์ส่งข้อมูลไปยัง Meet ได้เมื่อมีการแชร์หน้าจอของแท็บนั้น ระบบจะใช้ข้อมูลนี้ใน ส่วนเสริมของ Meet เมื่อ ผู้ใช้คลิก "เริ่มกิจกรรม" บนแบนเนอร์งานนำเสนอ ถ้าผู้อ่านมี ติดตั้งส่วนเสริมแล้ว หากผู้ใช้ไม่ได้ติดตั้งส่วนเสริมเมื่อแชร์หน้าจอแท็บ ระบบจะแจ้งให้ผู้ใช้ติดตั้งส่วนเสริม

ออบเจ็กต์ AddonScreenshareInfo มีพร็อพเพอร์ตี้ 5 รายการที่เพิ่มได้ตามกรณีการใช้งาน ดังนี้

  • additionalData: ข้อมูลที่ใช้เพื่อเริ่มต้นส่วนเสริมได้ ตั้งค่าได้ก็ต่อเมื่อพร็อพเพอร์ตี้ startActivityOnOpen เป็น "จริง" และเข้าถึงได้โดยใช้ ActivityStartingState ดูข้อมูลเพิ่มเติมได้ที่ดูสถานะเริ่มต้นกิจกรรม

  • cloudProjectNumber: ต้องระบุ หมายเลขโปรเจ็กต์ Google Cloud

  • mainStageUrl: URL ที่ขั้นตอนหลักเปิดขึ้นเมื่อส่วนเสริม เริ่มต้น เช่น https://www.example.com URL ต้องเป็นของต้นทางเดียวกันกับ URL ที่ระบุในไฟล์ Manifest ของส่วนเสริม

  • sidePanelUrl: URL ที่แผงด้านข้างจะเปิดขึ้นเมื่อส่วนเสริมเริ่มทำงาน เช่น https://www.example.com URL ต้องเป็นของต้นทางเดียวกันกับ URL ที่ระบุในไฟล์ Manifest ของส่วนเสริม

  • startActivityOnOpen: ต้องระบุ เริ่มใช้ส่วนเสริมกิจกรรมหรือไม่ ใน Meet ทันทีที่ผู้ใช้เริ่มต้น จากแบนเนอร์งานนำเสนอ ต้องเป็น "จริง" หากมีการใช้พร็อพเพอร์ตี้ mainStageUrl

ติดตั้งและนําเข้า SDK

คุณสามารถเข้าถึง SDK โดยใช้ npm หรือ gstatic

หากโปรเจ็กต์ใช้ npm ให้ทำตามวิธีการสำหรับแพ็กเกจ npm ของ SDK ของส่วนเสริม Meet

ก่อนอื่น ให้ติดตั้งแพ็กเกจ npm โดยทำดังนี้

npm install @googleworkspace/meet-addons

จากนั้นคุณจะสามารถใช้ SDK ส่วนเสริม Meet ได้โดยการนำเข้า MeetAddonScreenshareExport อินเทอร์เฟซ:

import {meet} from '@googleworkspace/meet-addons/meet.addons.screenshare';

สำหรับผู้ใช้ TypeScript คำนิยามของ TypeScript จะรวมอยู่ในโมดูล

Gstatic

SDK ของส่วนเสริม Google Meet มีให้บริการเป็นแพ็กเกจ JavaScript จาก gstatic ซึ่งเป็นโดเมนที่แสดงเนื้อหาแบบคงที่

หากต้องการใช้ SDK ของส่วนเสริม Meet ให้เพิ่มแท็กสคริปต์ต่อไปนี้ลงในแอป

<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.screenshare.js"></script>

SDK ของส่วนเสริม Meet พร้อมใช้งานผ่านอินเทอร์เฟซ MeetAddon ในส่วน window.meet.addon

เช่น โหลดในแผงด้านข้างโดยไม่เริ่มกิจกรรม

ในตัวอย่างโค้ดต่อไปนี้ หน้าจอผู้ใช้จะแชร์หน้าเว็บกับส่วนเสริมที่ต้องปรับสิทธิ์ทรัพยากรก่อนจึงจะเริ่มกิจกรรมได้ ด้วยข้อกำหนดนี้ ฟิลด์ ควรเริ่มใช้งานในแผงด้านข้างโดยไม่มี กิจกรรมที่เริ่มต้นสำหรับทุกคน

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: false,
    sidePanelUrl: SIDE_PANEL_URL,
  }
);
</script>

โดยแทนที่ค่าต่อไปนี้

  • CLOUD_PROJECT_NUMBER: สตริง หมายเลขโปรเจ็กต์ของ โปรเจ็กต์ที่อยู่ในระบบคลาวด์
  • SIDE_PANEL_URL: สตริง URL สำหรับแผงด้านข้าง

เมื่อผู้ใช้ในหน้าจอการโทรของ Meet แชร์หน้าจอ ผู้ใช้จะเห็น แบนเนอร์งานนำเสนอใน Meet การคลิกปุ่มในแบนเนอร์จะเปิดส่วนเสริมสำหรับหมายเลขโปรเจ็กต์ที่อยู่ในระบบคลาวด์ที่ระบุในแผงด้านข้าง เนื่องจากมีการตั้งค่าพร็อพเพอร์ตี้ startActivityOnOpen เป็นเท็จ ปุ่มเริ่มกิจกรรมจึงปิดอยู่จนกว่าจะตั้งค่า ActivityStartingState ดูข้อมูลเพิ่มเติมได้ที่ใช้สถานะเริ่มต้นของกิจกรรม

เมื่อกิจกรรมเริ่มต้นขึ้น ผู้ใช้คนอื่นๆ ในสายจะได้รับแจ้งให้เปิดหรือติดตั้งส่วนเสริม

ไฟล์ "ภาพเคลื่อนไหว" ตัวอย่างส่วนเสริมใน GitHub รวมตัวอย่างนี้ไว้เป็นส่วนหนึ่งของส่วนเสริมเต็มรูปแบบ วันและเวลา หน้าดัชนี ของเว็บแอปที่เชื่อมโยงกับส่วนเสริมนั้นแสดงขึ้น ผู้ใช้ที่นําเสนอจะได้รับข้อความแจ้งให้ติดตั้งหรือตั้งค่า ส่วนเสริม

ตัวอย่าง: โหลดในเวทีหลัก

ในตัวอย่างโค้ดต่อไปนี้ ผู้ใช้ที่หน้าจอแชร์หน้าเว็บใน Meet ที่มีรหัสต่อไปนี้จะได้รับข้อความแจ้งให้เปิดใช้ ส่วนเสริม:

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: true,
    mainStageUrl: MAIN_STAGE_URL,
    additionalData: "{\"selected_item\": \"42\"}",
  }
);
</script>

แทนที่ข้อมูลต่อไปนี้

  • CLOUD_PROJECT_NUMBER: สตริง หมายเลขโปรเจ็กต์ของ โปรเจ็กต์ Google Cloud
  • MAIN_STAGE_URL: สตริง URL ของเวทีหลัก

เมื่อผู้ใช้ในหน้าจอการโทรของ Meet แชร์หน้าเว็บ ผู้ใช้จะเห็นแบนเนอร์การนำเสนอใน Meet คลิกปุ่มบนแบนเนอร์ เปิดส่วนเสริมสำหรับหมายเลขโปรเจ็กต์ระบบคลาวด์ที่ระบุใน ที่เวทีหลัก ระบบจะโหลดพร็อพเพอร์ตี้ mainStageUrl และใช้พร็อพเพอร์ตี้ additionalData เพื่อตั้งค่าสถานะเริ่มต้นกิจกรรมของส่วนเสริม ผู้ใช้คนอื่นๆ ในสายอยู่ในสาย ได้รับข้อความแจ้งให้ติดตั้งหรือเปิดส่วนเสริม

ตัวอย่าง: โหลดในแผงด้านข้าง

ในตัวอย่างโค้ดต่อไปนี้ หน้าจอผู้ใช้จะแชร์หน้าเว็บกับส่วนเสริมที่ต้องการเริ่มต้นในแผงด้านข้างแทนที่จะเป็นเวทีหลัก

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: true,
    sidePanelUrl: SIDE_PANEL_URL,
    additionalData: "{\"selected_item\": \"42\"}",
  }
);
</script>

โดยแทนที่ค่าต่อไปนี้

  • CLOUD_PROJECT_NUMBER: สตริง หมายเลขโปรเจ็กต์ของ โปรเจ็กต์ที่อยู่ในระบบคลาวด์
  • SIDE_PANEL_URL: สตริง URL สำหรับแผงด้านข้าง

เมื่อผู้ใช้ในหน้าจอการโทรของ Meet แชร์หน้าเว็บ ผู้ใช้จะเห็นแบนเนอร์การนำเสนอใน Meet คลิกปุ่มบนแบนเนอร์ เปิดส่วนเสริมสำหรับหมายเลขโปรเจ็กต์ระบบคลาวด์ที่ระบุใน แผงด้านข้าง ระบบจะโหลดพร็อพเพอร์ตี้ sidePanelUrl และใช้พร็อพเพอร์ตี้ additionalData เพื่อตั้งค่าสถานะเริ่มต้นกิจกรรมของส่วนเสริม ระบบจะแจ้งให้ผู้ใช้รายอื่นในสายติดตั้งหรือเปิดใช้งานส่วนเสริมทันที

การจับคู่ตามต้นฉบับ

ต้นทางที่ระบุไว้ใน mainStageUrl และพร็อพเพอร์ตี้ sidePanelUrl ระบบจะเปรียบเทียบพร็อพเพอร์ตี้กับต้นทางในส่วนเสริม ไฟล์ Manifest ของหมายเลขโปรเจ็กต์ที่อยู่ในระบบคลาวด์ที่ระบุไว้ หากทุกอย่างตรงกัน ผู้ใช้จะได้รับอนุญาตให้เปิดส่วนเสริม

นอกจากนี้ จะต้องระบุต้นทางของเว็บไซต์ที่เริ่มแชร์หน้าจอด้วย ในฟิลด์ addOnOrigins ในส่วนเสริม Manifest

สำหรับข้อมูลเพิ่มเติม โปรดดูที่ส่วนเสริม ความปลอดภัย