k'/.

การใช้งาน BigBlueButton ภายใน iframe - Reactjs, Vue.js, Angular.js

Big Blue Meeting Cloud Hosting, เซิร์ฟเวอร์เฉพาะ และ Dedicated Private Cloud รองรับการฝัง BigBlueButton ใน iframe

วิธีฝัง BigBlueButton 3.0 ลงใน iframe

หากคุณใช้บริการคลาวด์โฮสติ้งของเรา คุณสามารถใช้คีย์ API ของคุณได้เลย ไม่จำเป็นต้องตั้งค่าเพิ่มเติมใดๆ

หากคุณใช้บริการโฮสติ้งอื่น โปรดติดต่อทีมสนับสนุนของเรา เราจำเป็นต้องทำการเปลี่ยนแปลงการตั้งค่าเล็กน้อยบนเซิร์ฟเวอร์ของคุณเพื่อเปิดใช้งานการฝัง iframe

นอกจากนี้ คุณยังสามารถสมัครบัญชีทดลองใช้งานฟรีเพื่อทดสอบการทำงานร่วมกันในระหว่างการพัฒนาแอปพลิเคชันของคุณได้อีกด้วย

จำเป็นต้องใช้ SSL

ของคุณ <iframe> เว็บไซต์ของคุณต้องโฮสต์อยู่บนเว็บไซต์ที่ให้บริการผ่าน HTTPS (SSL/TLS) คุณสมบัติของ WebRTC เช่น เว็บแคม ไมโครโฟน และการแชร์หน้าจอ จำเป็นต้องใช้สภาพแวดล้อมที่ปลอดภัย หากเว็บไซต์ของคุณไม่ได้โฮสต์ภายใต้ SSL ผู้ใช้จะไม่สามารถให้สิทธิ์ที่จำเป็นได้

เปิดใช้งาน allowRequestsWithoutSession

เมื่อสร้างการประชุม คุณต้องตั้งค่า allowRequestsWithoutSession พารามิเตอร์ true.

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

พารามิเตอร์นี้ถูกเพิ่มเข้ามาใน BigBlueButton เวอร์ชัน 2.4.3 และมีค่าเริ่มต้นเป็น falseหากละเว้นพารามิเตอร์นี้หรือปล่อยว่างไว้ falseผู้ใช้อาจไม่สามารถเข้าร่วมการประชุมผ่าน iframe ที่ฝังอยู่ได้

สร้าง URL สำหรับเข้าร่วมใน iframe

  1. สร้างการประชุมโดยใช้ create การเรียก API และรวมถึง allowRequestsWithoutSession=true.
  2. รอประมาณ 5 วินาทีเพื่อให้การประชุมเริ่มต้น หรือตรวจสอบสถานะเป็นระยะ getMeetingInfo จุดเชื่อมต่อ API จนกว่าการประชุมจะพร้อมใช้งาน
  3. แสดงหน้าจอโหลดขณะที่การประชุมกำลังเริ่มต้น
  4. สร้าง URL สำหรับเข้าร่วมโดยใช้ join การเรียก API
  5. ใช้ URL เข้าร่วมที่สร้างขึ้นเป็น src คุณลักษณะของ iframe ของคุณ

สำคัญ

คุณสามารถสร้าง URL สำหรับเข้าร่วมได้ทันทีหลังจากสร้างการประชุม แต่คุณควรรอจนกว่าการประชุมจะพร้อมก่อนที่จะแสดง iframe การโหลด iframe เร็วเกินไปอาจทำให้เกิดหน้าแสดงข้อผิดพลาดได้

Vue.js, React และ Angular ต่างก็มีวิธีการแสดงผล iframe ที่แตกต่างกัน โปรดดูเอกสารประกอบของเฟรมเวิร์กที่คุณใช้สำหรับรายละเอียดการใช้งาน

ตั้งค่าสิทธิ์การใช้งาน iframe ให้ถูกต้อง

การขอ allow ต้องกำหนดค่าแอตทริบิวต์ให้ตรงตามที่แสดงด้านล่าง เพื่อเปิดใช้งานฟังก์ชันกล้อง ไมโครโฟน และการแชร์หน้าจอ:

<iframe
 src="https://manager.bigbluemeeting.com/bigbluebutton/api/join?..."
 width="100%"
 height="700"
 allow="camera *; microphone *; display-capture *;"
 allowfullscreen
></iframe>

เมื่อตั้งค่าอย่างถูกต้อง iframe จะเชื่อมต่อผู้ใช้เข้าสู่การประชุมโดยอัตโนมัติ

ต้องการความช่วยเหลือ?

หากคุณมีคำถามหรือพบปัญหาใด ๆ โปรดเปิดตั๋วขอความช่วยเหลือหรือใช้ปุ่มแชทสดที่อยู่มุมล่างขวาของเว็บไซต์