30 นาทีจากนี้ คุณจะได้อะไร?

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

เราจะไม่ใช้ UIKit (หน้าจอสำเร็จรูป) ในคู่มือนี้ เพื่อให้เห็นว่าแต่ละส่วนทำงานอย่างไร ถ้าอยากได้หน้าจอพร้อมใช้ทันที ดูหัวข้อสุดท้าย

ต้องเตรียมอะไรก่อนเริ่ม?

• Flutter 3.x พร้อม Android Studio สำหรับ Android หรือ Xcode สำหรับ iOS และรันแอปตัวอย่างบนเครื่องได้แล้ว

• บัญชี Tencent RTC และ SDKAppID ขอบัญชีทดลองใช้ฟรีได้จาก ฟอร์มด้านล่าง ทีมจะส่งให้ภายใน 2 วันทำการ

• มือถือจริง 2 เครื่อง ต่ออินเทอร์เน็ตได้ จะเป็น Wi-Fi หรือ 4G ก็ได้

• ความรู้ Dart พื้นฐาน เช่น async/await และ StatefulWidget

ไม่ต้องมีความรู้ WebRTC หรือเซิร์ฟเวอร์วิดีโอ เพราะ TRTC จัดการการส่งภาพและเสียงให้ทั้งหมด

วิดีโอคอลบน TRTC ทำงานอย่างไร?

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

ข้อดีของการแบ่งแบบนี้คือคุณไม่ต้องดูแล Infrastructure (โครงสร้างระบบ) วิดีโอ ไม่ต้องรับมือกับเน็ตที่หลุดหรือช้าเอง และเซิร์ฟเวอร์ของคุณไม่ต้องรับภาระส่งวิดีโอเลย ช่วงทดสอบในคู่มือนี้ เราจะข้ามเซิร์ฟเวอร์ไปก่อนโดยคัดลอก UserSig จาก Console (หน้าจัดการบัญชี)

ลำดับเหตุการณ์ในหนึ่งคอลเป็นแบบนี้: ผู้ใช้ล็อกอินเข้าแอปตามปกติ แอปขอ UserSig จากเซิร์ฟเวอร์ของคุณ ผู้ใช้กดเริ่มคอล แอปขอสิทธิ์กล้องและไมค์ แล้วเรียก enterRoom พร้อม roomId ที่ตกลงกันไว้ เช่น เลขที่นัดหมาย เมื่ออีกฝ่ายเข้าห้องเดียวกัน TRTC จะแจ้งแอปผ่าน Listener (ตัวรับเหตุการณ์) แอปจึงเริ่มแสดงภาพของอีกฝ่าย เมื่อวางสาย แอปเรียก exitRoom และ TRTC หยุดนับนาที

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

ทำอย่างไรให้คอลแรกติดใน 6 ขั้น?

โค้ดทุกขั้นวางในไฟล์หน้าจอคอลไฟล์เดียวได้ เช่น call_page.dart

เริ่มจากเพิ่มแพ็กเกจ TRTC และแพ็กเกจจัดการสิทธิ์ลงในโปรเจกต์ Flutter ที่มีอยู่ ไม่ต้องสร้างโปรเจกต์ใหม่ เพิ่มสองบรรทัดใน pubspec.yaml แล้วรัน flutter pub get ฝั่ง iOS ให้เข้าโฟลเดอร์ ios แล้วรัน pod install ด้วย

ผลที่ควรเห็น: รัน flutter pub get แล้วไม่มี error และ import package:tencent_trtc_cloud/trtc_cloud.dart ได้

มือถือทุกเครื่องต้องได้รับอนุญาตจากผู้ใช้ก่อนเปิดกล้องและไมค์ ฝั่ง Android ประกาศสิทธิ์ใน AndroidManifest.xml ฝั่ง iOS ต้องใส่ข้อความอธิบายเป็นภาษาที่ผู้ใช้อ่านเข้าใจใน Info.plist จากนั้นขอสิทธิ์จริงในโค้ดก่อนเข้าห้อง

ผลที่ควรเห็น: กดเริ่มคอลครั้งแรกแล้วมีหน้าต่างถามสิทธิ์กล้องและไมค์ เป็นข้อความภาษาไทยที่คุณเขียนไว้

SDKAppID คือรหัสแอปของคุณบน Tencent RTC ส่วน UserSig ทำหน้าที่เหมือนบัตรผ่านเข้าห้องของผู้ใช้แต่ละคน ช่วงทดสอบคัดลอกทั้งสองค่าจาก Console ได้เลย พอขึ้น Production (ใช้งานจริง) ต้องย้ายการสร้าง UserSig ไปไว้บนเซิร์ฟเวอร์

ผลที่ควรเห็น: มีค่า SDKAppID และ UserSig ของผู้ใช้ทดสอบ 2 คน เช่น doctor_01 และ patient_01

ผู้ใช้ทุกคนที่ใช้ roomId เดียวกันจะอยู่ในคอลเดียวกัน ก่อนเข้าห้องให้ลงทะเบียน listener ไว้ เพื่อรู้ว่าเข้าห้องสำเร็จเมื่อไหร่และอีกฝ่ายเข้ามาเมื่อไหร่ จากนั้นเรียก enterRoom แล้วเปิดไมค์

ผลที่ควรเห็น: ใน log เห็นข้อความ "เข้าห้องแล้ว" จาก callback onEnterRoom ซึ่งส่งค่า result เป็นบวกเมื่อเข้าห้องสำเร็จ (คือเวลาที่ใช้เข้าห้องเป็นมิลลิวินาที) ถ้าได้ค่าติดลบคือรหัสข้อผิดพลาด

วางวิดีโอสองชั้นซ้อนกัน ภาพของอีกฝ่ายเต็มจอ ภาพของเราอยู่มุมล่างขวา เหมือนแอปวิดีโอคอลที่ผู้ใช้คุ้นเคย ภาพของอีกฝ่ายจะแสดงเมื่อ listener แจ้งว่ามีคนเข้าห้องแล้วเท่านั้น

ผลที่ควรเห็น: เห็นภาพตัวเองที่มุมจอทันที และเห็นภาพอีกฝ่ายเต็มจอเมื่อเขาเข้าห้อง

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

ผลที่ควรเห็น: กดวางสายแล้วไฟกล้องดับ และอีกฝ่ายเห็นว่าคุณออกจากห้องแล้ว

รู้ได้อย่างไรว่าคอลใช้งานได้จริง?

1. ติดตั้งแอปบนเครื่องแรกด้วย userId doctor_01 และเครื่องที่สองด้วย patient_01 พร้อม UserSig ของแต่ละคน

2. ใช้ roomId เดียวกัน เช่น 1234 แล้วกดเริ่มคอลทั้งสองเครื่อง

3. ลองพูดและขยับกล้อง แล้วลองปิด Wi-Fi บนเครื่องหนึ่งให้เหลือแต่ 4G เพื่อดูว่าคอลยังไปต่อได้

4. กดวางสายทั้งสองเครื่อง แล้วเช็กว่าไฟกล้องดับ

คอลไม่ติด จอดำ เสียงสะท้อน แก้อย่างไร?

เคล็ดลับ: ระหว่างพัฒนาให้พิมพ์ทุกเหตุการณ์จาก listener ลง log ไว้ก่อน เมื่อเกิดปัญหาจะเห็นทันทีว่าคอลติดอยู่ที่ขั้นไหน เช่น เข้าห้องสำเร็จแต่ไม่มีเหตุการณ์อีกฝ่ายเข้ามา แปลว่า roomId หรือ sdkAppId ไม่ตรงกัน

ถ้ายังแก้ไม่ได้ ส่ง log จาก listener และรุ่นมือถือมาให้ทีมเรา วิศวกรไทยของเราติดต่อกลับภายใน 2 วันทำการ

ก่อนขึ้น Production ต้องทำอะไรต่อ?

• สร้าง UserSig ฝั่งเซิร์ฟเวอร์ ขั้นที่สำคัญที่สุดก่อนขึ้นจริง คู่มือ UserSig

• ใช้ UIKit แทนการทำหน้าจอเอง ได้ปุ่มสลับกล้อง ปิดไมค์ และหน้าจอรอสายพร้อมใช้: TRTC

• เพิ่มแชทในคอลเดียวกัน ส่งข้อความและรูประหว่างคอล: Chat

• ดูตัวอย่างการใช้งานจริง แอปปรึกษาแพทย์ที่เปิดวิดีโอคอลใน 3 สัปดาห์: อ่าน case study