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

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

หน้านี้จะอธิบายวิธีโปรโมตส่วนเสริมให้ผู้ใช้ขณะแชร์หน้าจอแท็บด้วย 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 ไว้ในโมดูล ผู้ใช้ TypeScript ควรตั้งค่า moduleResolution เป็น "bundler" ภายใน tsconfig.json ของโปรเจ็กต์ เพื่อให้ข้อกำหนด"exports" ของ package.json อนุญาตให้นำเข้าการส่งออกแพ็กเกจการแชร์หน้าจอ

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 ของส่วนเสริม

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