มีบทความนี้ให้บริการที่นี่ด้วย(ภาษาญี่ปุ่น)
https://cloud.flect.co.jp/entry/2020/06/01/115652
(บทความใหม่ 20 ต.ค./2020):
Faceswap และพื้นหลังเสมือนจริงบนเบราว์เซอร์ของคุณ
ในบทความที่แล้ว ฉันได้อธิบายวิธีสร้างพื้นหลังเสมือนสำหรับ Amazon Chime SDK
ฉันอยากจะพูดคุยเกี่ยวกับ Amazon Chime SDK ต่อไปในโพสต์นี้
คุณรู้ไหมว่า Amazon ประกาศฟีเจอร์ใหม่เพิ่มเติมใน Amazon Chime SDK เมื่อวันก่อน
คุณสมบัตินี้ช่วยให้ผู้เข้าร่วมการประชุมสามารถแลกเปลี่ยนข้อความข้อมูลโดยใช้ช่องทางการสื่อสารข้อมูลที่ใช้โดย Amazon Chime ตามที่กล่าวไว้ในประกาศ สิ่งนี้ช่วยให้เราสามารถใช้ไวท์บอร์ดและอิโมจิกับผู้เข้าร่วมในห้องประชุมได้อย่างง่ายดาย และยังสามารถใช้เพื่อควบคุมสถานะของห้องประชุมได้ เช่น การบังคับให้ผู้เข้าร่วมปิดเสียง
ฉันจึงอยากจะแสดงวิธีสร้างไวท์บอร์ดโดยใช้ฟีเจอร์นี้
นี่คือพฤติกรรมของไวท์บอร์ดที่ฉันทำในครั้งนี้
Amazon Chime และการส่งสัญญาณ
คุณสมบัติเพิ่มเติมของ Amazon Chime SDK ใช้การสื่อสารการส่งสัญญาณที่มีอยู่แล้วใน Amazon Chime การประชุมทางวิดีโอของ Amazon Chime ทำได้โดยใช้เทคโนโลยีที่เรียกว่า WebRTC และใน WebRTC จะใช้การสื่อสารแบบส่งสัญญาณเพื่อควบคุมเซสชัน
โดยเฉพาะอย่างยิ่ง WebRTC ใช้สำหรับการสื่อสาร P2P ระหว่างเบราว์เซอร์ และการสื่อสารการส่งสัญญาณใช้เพื่อระบุปลายทางของอีกฝ่ายหรือเพื่อแลกเปลี่ยนคีย์สำหรับการสื่อสารแบบเข้ารหัสเพื่อเริ่มการสื่อสารนี้
และถึงแม้จะเรียกว่าการสื่อสาร P2P แต่ก็จำเป็นต้องผ่านเซิร์ฟเวอร์รีเลย์ที่เรียกว่า TURN เมื่อสื่อสารผ่านไฟร์วอลล์ การแลกเปลี่ยนข้อมูลเกี่ยวกับเส้นทางเหล่านี้ก็กระทำผ่านการสื่อสารสัญญาณเช่นกัน
หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ WebRTC และความสัมพันธ์กับการส่งสัญญาณ โปรดดูที่ หน้านี้
Amazon Chime มีเซิร์ฟเวอร์รีเลย์ที่ได้รับการจัดการและช่องสัญญาณเพื่อให้เริ่มการประชุมทางวิดีโอในสภาพแวดล้อมเครือข่ายต่างๆ ได้อย่างง่ายดาย คุณลักษณะใหม่ใช้ประโยชน์จากเส้นทางการสื่อสารที่ได้รับการจัดการสำหรับการส่งสัญญาณนี้เพื่อให้สามารถแลกเปลี่ยนข้อความข้อมูลได้ตามต้องการ ดังนั้นนักพัฒนาจึงสามารถเพิ่มสิ่งต่างๆ เช่น ไวท์บอร์ดที่ใช้ร่วมกันลงในระบบการประชุมทางวิดีโอได้อย่างง่ายดาย โดยไม่ต้องจัดเตรียมเซิร์ฟเวอร์สำหรับการส่งข้อความ
ภาพรวม API ใหม่
วิธีการใหม่สามวิธีที่นำเสนอมีดังนี้
ฟังก์ชั่นนี้ส่งข้อความข้อมูลด้วย "หัวข้อ"
ประการแรก ลูกค้าแต่ละรายจะลงทะเบียนฟังก์ชันการติดต่อกลับซึ่งกำหนดกระบวนการสำหรับแต่ละหัวข้อ จากนั้น เมื่อผู้ส่งส่งข้อความข้อมูลด้วย Topic ลูกค้าจะได้รับข้อความข้อมูลและเรียกใช้ฟังก์ชันการโทรกลับที่สอดคล้องกับ Topic เราไม่ทราบรายละเอียดของการประมวลผลภายใน โดยเฉพาะอย่างยิ่งกระแสข้อมูล แต่อาจทำงานบน "โมเดลการเผยแพร่/สมัครสมาชิก" ทั่วไป
หลังจากใช้งานในครั้งนี้ ฉันพบว่ามันเป็นคุณสมบัติที่ใช้งานง่ายมาก
โปรดทราบว่าฟังก์ชันนี้อาจไม่สามารถรับข้อความข้อมูลได้แม้ว่าผู้เผยแพร่ข้อความข้อมูลจะสมัครรับหัวข้อของข้อความข้อมูลแล้ว ดังนั้นคุณอาจต้องใช้ความระมัดระวัง ฉันคิดว่าข้อดีของรูปแบบการเผยแพร่/สมัครสมาชิกคือช่วยให้ผู้เผยแพร่และสมาชิกสามารถเพิกเฉยต่อความสัมพันธ์ของกันและกันได้โดยสิ้นเชิง ดังนั้นการที่ผู้เผยแพร่ไม่สามารถรับข้อมูลได้เมื่อพวกเขาอยู่ในซอฟต์แวร์เดียวกัน (เซสชัน) จึงมีข้อบกพร่องเพียงเล็กน้อยเท่านั้น .
- SendDataMessage
https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html#realtimesenddatamessage - สมัครสมาชิก
https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html#realtimesubscribetoreceivedatamessage - ยกเลิกการสมัคร
https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html#realtimeunsubscribefromreceivedatamessage
ไวท์บอร์ดที่ใช้ร่วมกัน
ต่อไปนี้เป็นขั้นตอนทั่วไปของไวท์บอร์ดที่ใช้ร่วมกันที่เราสร้างขึ้น
- ตรวจจับเหตุการณ์เมาส์/เหตุการณ์การสัมผัสบนผืนผ้าใบของเบราว์เซอร์ของผู้เผยแพร่ (HTMLCanvasEelemnt) และระบุพิกัด
- วาดภาพบนผืนผ้าใบของผู้จัดพิมพ์
- ส่งพิกัดไปยังนายหน้า (Chime) เป็นข้อความข้อมูล (real-timeSendDataMessage)
- การส่งพิกัดจากนายหน้าไปยังสมาชิกแต่ละราย
- วาดภาพบนผืนผ้าใบของสมาชิกแต่ละคน
ตามที่กล่าวไว้ก่อนหน้านี้ ผู้เผยแพร่ไม่สามารถรับข้อความข้อมูลที่ส่งได้ ดังนั้นจึงต้องวาดบนผืนผ้าใบของตัวเองก่อนที่จะส่งข้อความข้อมูล เมื่อสร้างแอพพลิเคชั่นที่ต้องการสะท้อนการทำงานของผู้ใช้ใน UI โดยไม่ชักช้า เช่น ไวท์บอร์ด จะดีกว่าสำหรับประสบการณ์ผู้ใช้ที่สะท้อนการทำงานของผู้ใช้ใน UI ก่อนที่จะส่งข้อความข้อมูล ดังนั้นผมคิดว่ามันจะคล้ายกันไม่ว่า Publisher จะเป็นอย่างไร สามารถรับข้อความข้อมูลได้หรือไม่
นอกจากนี้ เนื่องจากผู้เผยแพร่ไม่สามารถรับข้อความข้อมูลที่ส่งได้ จึงอาจใช้งานได้ง่ายกว่าเนื่องจากผู้เผยแพร่ไม่จำเป็นต้องละทิ้งข้อมูลที่ได้รับ
การดำเนินการ
ติดตาม
นี่คือตัวอย่างของฟังก์ชัน wrapper ที่ลงทะเบียนหัวข้อและฟังก์ชันโทรกลับที่เกี่ยวข้องที่จะสมัครสมาชิกโดย realtimeSubscribeToReceiveDataMessage ที่นี่ เรากำหนดฟังก์ชันการโทรกลับที่เรียก app.app.receivedDataMessage เมื่อเราได้รับข้อความข้อมูลและใช้เป็นอาร์กิวเมนต์ โปรดทราบว่าสามารถกำหนด app.app.receivedDataMessage ได้ที่อื่นเพื่อการประมวลผลตามอำเภอใจ
export const setRealtimeSubscribeToReceiveDataMessage = (app:App, audioVideo:AudioVideoFacade, topic:string) =>{
const receiveDataMessageHandler = (dataMessage: DataMessage): void => {
app.receivedDataMessage(dataMessage)
}
audioVideo.realtimeSubscribeToReceiveDataMessage(topic, receiveDataMessageHandler)
}
ส่งข้อความข้อมูล
นี่คือตัวอย่างวิธีการส่งข้อความข้อมูลโดยใช้ realtimeSendDataMessage
ในการวาดบนไวท์บอร์ด พิกัดของจุดเริ่มต้นและจุดสิ้นสุด ข้อมูลเส้นขีด ความหนาของเส้น ฯลฯ จะถูก JOSNized และส่ง
sendDrawsingBySignal = (targetId: string, mode:string, startXR:number, startYR:number, endXR:number, endYR:number, stroke:string, lineWidth:number)=>{
const gs = this.props as GlobalState
const message={
action: 'sendmessage',
data: JSON.stringify({
cmd : MessageType.Drawing,
targetId : targetId,
startTime : Date.now(),
mode : mode,
startXR : startXR,
startYR : startYR,
endXR : endXR,
endYR : endYR,
stroke : stroke,
lineWidth : lineWidth
})
}
gs.meetingSession?.audioVideo.realtimeSendDataMessage(MessageType.Drawing.toString(), JSON.stringify(message))
}
การสาธิต
ไวท์บอร์ด
นี่คือการทำงานของฟังก์ชันไวท์บอร์ดที่คุณสร้างขึ้น การสาธิตนี้จะเป็นกระดานไวท์บอร์ดจำลองในห้องเรียน คุณจะเห็นว่าสิ่งที่คุณวาดทางด้านขวาจะสะท้อนให้เห็นทางด้านซ้ายของหน้าจอ
ไวท์บอร์ดพร้อม SharedDisplay
คุณยังสามารถสร้างไวท์บอร์ดนี้เป็นโอเวอร์เลย์เพื่อให้ใช้กับคุณสมบัติการแชร์หน้าจอของ Amazon Chime SDK เพื่อนำเสนองานได้
รหัส
ฟีเจอร์ที่อธิบายในบทความนี้มีอยู่แล้วในตัวทดสอบฟีเจอร์ใหม่ๆ ที่ใช้การประชุมทางวิดีโอ
หากคุณสนใจ โปรดไปที่พื้นที่เก็บข้อมูลต่อไปนี้
ในที่สุด
ครั้งนี้ ฉันพยายามสร้างไวท์บอร์ดโดยใช้คุณสมบัติล่าสุดของ Amazon Chime SDK
ในญี่ปุ่น มีการประกาศเมื่อเร็ว ๆ นี้ว่าสถานการณ์ฉุกเฉินได้ถูกยกเลิกแล้ว อย่างไรก็ตาม ดูเหมือนว่าจะยังเป็นเรื่องยากที่จะมีคนจำนวนมากในห้องเรียนมาสอนบทเรียน นอกจากนี้ การบริการลูกค้าแบบเห็นหน้ากันก็อาจมีความเสี่ยงและทำได้ยากในลักษณะเดียวกัน ฉันคิดว่าการประชุมทางวิดีโอและไวท์บอร์ดที่ใช้ร่วมกันอาจเป็นตัวเลือกในการแก้ไขปัญหาเหล่านี้
