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

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

หน้านี้จะอธิบายวิธีโปรโมตส่วนเสริมให้ผู้ใช้ขณะแชร์หน้าจอแท็บด้วย 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 ของส่วนเสริม

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