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

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

Video call API (Application Programming Interface) เป็นส่วนหนึ่งของซอฟต์แวร์ที่ให้ฟีเจอร์และอินเทอร์เฟซการเขียนโปรแกรมแอปพลิเคชัน (API) สำหรับการพัฒนาแอปพลิเคชันการสนทนาวิดีโอ API นี้ช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันการสื่อสารโต้ตอบสดได้ โดยอนุญาตให้ผู้ใช้เชื่อมต่อและโอนข้อมูลโดยตรงระหว่างอุปกรณ์ทางอินเทอร์เน็ต

Video call API ให้ฟีเจอร์ต่างๆ เช่น การสนทนาวิดีโอ, เสียง, การสนทนาข้อความ, และการแชร์หน้าจอ นอกจากนี้ยังรองรับฟีเจอร์ด้านความปลอดภัย เช่น การเข้ารหัสข้อมูล, การตรวจสอบสิทธิ์ผู้ใช้ และการตรวจสอบการโทร API สามารถรวมเข้ากับแอปพลิเคชันที่มีอยู่ได้ ช่วยให้นักพัฒนาสามารถพัฒนาแอปพลิเคชันสื่อโต้ตอบโดยตรงที่มีเวลาตอบสนองต่ำ

บทนำ

Stringee Call API เป็นเครื่องมือที่ทรงพลังและใช้งานง่ายสำหรับการสร้างแอปพลิเคชันการโทรวิดีโอบน iOS ด้วย Stringee Call API คุณสามารถสร้างแอปพลิเคชันการโทรวิดีโอที่ยืดหยุ่นซึ่งตอบสนองความต้องการของผู้ใช้ได้

ในบทความนี้ เราจะแสดงวิธีการใช้ Stringee Call API เพื่อสร้างแอปพลิเคชันการโทรวิดีโอบนแพลตฟอร์ม iOS เราจะพาคุณผ่านขั้นตอนที่จำเป็นในการใช้งาน API, ออกแบบอินเตอร์เฟซ และเขียนโค้ดเพื่อจัดการเหตุการณ์ระหว่างการโทรวิดีโอ

การเตรียมตัว

ก่อนใช้งาน Stringee Call API เป็นครั้งแรก คุณต้องมีบัญชี Stringee หากคุณยังไม่มีบัญชี Stringee กรุณาลงทะเบียนโดยตามลิงค์นี้: https://developer.stringee.com/account/register

สร้างโปรเจ็กต์บนแดชบอร์ด StringeeStringee create Project

การติดตั้ง Stringee SDK

เพื่อติดตั้ง Stringee SDK โดยใช้ CocoaPods คุณต้องทำตามขั้นตอนเหล่านี้:
1. เปิดไฟล์ Podfile ของโปรเจ็กต์และประกาศ Stringee: pod 'Stringee'
2. รันคำสั่งต่อไปนี้บน Terminal: pod install --repo-update
3. เพิ่มการตั้งค่าบางอย่างต่อไปนี้ใน Build Settings:
4. ตั้งค่าการอนุญาตให้ใช้กล้องและไมโครโฟนในไฟล์ Info.plist:

 

ออกแบบธีม

เริ่มต้น, เราต้องสร้างอินเตอร์เฟซสำหรับแอปพลิเคชันของเรา ในบทความนี้เราจะใช้ 3 ViewControllers ต่อไปนี้เพื่อทำการโทรวิดีโอ
1. หน้าจอ StringeeConnectViewController ที่จัดการสถานะของไคลเอนต์ (เชื่อมต่อ/ตัดการเชื่อมต่อ) ทำการโทรไปยังไคลเอนต์อื่น
2. หน้าต่างป๊อปอัพ IncomingCallViewController แจ้งเตือนเมื่อมีการโทรเข้าทำให้เกิดเหตุการณ์ตอบรับหรือปฏิเสธการโทร
3. หน้าจอ CallingViewController จัดการสถานะและดูแลตรรกะของการโทร

 

UI

การประมวลผลตามตรรกะ

1. ทำการเชื่อมต่อกับ StringeeServer

ในคลาสนี้เราจะเชื่อมต่อกับ Stringee Server

import UIKit
import Stringee
class StringeeConnectViewController: UIViewController {
    private let userToken = "PUSH-YOUR-TOKEN-HEARE"
    
    let client = StringeeClient()    
    
    private func setupStringee() {
        client.connect(withAccessToken: userToken)
    }
}

ใช้ StringeeConnectionDelegate เพื่อจัดการเหตุการณ์ที่เกี่ยวข้องกับการเชื่อมต่อกับ StringeeServer:

import UIKit
import Stringee
class StringeeConnectViewController: UIViewController {
    private let userToken = "PUSH-YOUR-TOKEN-HEARE"
    
    let client = StringeeClient()    
    
    private func setupStringee() {
        client.connectionDelegate = self
        client.connect(withAccessToken: userToken)
    }
}

extension StringeeConnectViewController: StringeeConnectionDelegate {
    func requestAccessToken(_ stringeeClient: StringeeClient!) {
        print("token exp")
    }
    func didConnect(_ stringeeClient: StringeeClient!, isReconnecting: Bool) {
        self.statusLbl.text = stringeeClient.userId
    }
    func didDisConnect(_ stringeeClient: StringeeClient!, isReconnecting: Bool) {
        self.statusLbl.text = "Disconnect"
    }
    func didFailWithError(_ stringeeClient: StringeeClient!, code: Int32, message: String!) {
        print("Connect Error ====> \(message ?? "")")
    }
}

2. จัดการเหตุการณ์เมื่อมีการโทรเข้า

ใช้ StringeeIncomingCallDelegate เพื่อจัดการเหตุการณ์เมื่อมีการโทรเข้า

import UIKit
import Stringee
class StringeeConnectViewController: UIViewController {
    private let userToken = "PUSH-YOUR-TOKEN-HEARE"
    
    let client = StringeeClient()

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if let vc = segue.destination  as? IncomingCallViewController,
           let call = sender as? StringeeCall2 {
               vc.call = call
               vc.ansAction = { [weak self] in
                   DispatchQueue.main.async {
                       guard let self = self else { return }
                        self.performSegue(withIdentifier: "showCallScreen", sender: call)
                    }
                }
        }
    }
    private func setupStringee() {
        client.connectionDelegate = self
        client.incomingCallDelegate = self
        client.connect(withAccessToken: userToken)
    }
}
extension StringeeConnectViewController: StringeeIncomingCallDelegate {
    func incomingCall(with stringeeClient: StringeeClient!, stringeeCall2: StringeeCall2!) {
        DispatchQueue.main.async {
            if stringeeCall2.signalingState != .busy || stringeeCall2.signalingState != .ended {
                self.performSegue(withIdentifier: "showCallScreen", sender: stringeeCall2)
            }
        }
    }
}

3. ทำการโทรวิดีโอ

เมื่อผู้ใช้ป้อน UserID ของผู้รับการโทรและกดปุ่มเริ่มการโทรวิดีโอ เราจะทำการโทรวิดีโอดังต่อไปนี้:

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if let vc = segue.destination as? CallingViewController,
        let call = sender as? StringeeCall2 {
            vc.call = call
        }
    }
    @IBAction func didTapCall(_sender: Any) {
        if let fromUser = client.userId, !fromUser.isEmpty,
           let toUser = self.userIdTf.text, toUser.isEmpty, client.hasConnected {
               let call = StringeeCall(stringeeClient: client,from: fromUser, to: toUser)
               call?.isVideoCall = true
               performSegue(withIdentifier: "showCallScreen", sender: call) 
           }
    }

4. ตอบรับ/ปฏิเสธการโทร

import UIKit
import Stringee

class  IncomingCallViewController: UIViewController {
    @IBOutlet weak var userIDLBL: UILabel!
    var call: StringeeCall2!
    var ansAction: (() -> Void)?
    override func  viewDidLoad() {
        super.viewDidLoad()
        self.userIDLBL.text = "Call from \(call.from ?? "stringee")"
    }

    @IBAction func didTapReject(_ sender: Any) {
        call.reject { [weak self] status, code, message in
            guard let self = self else { return }
            if status {
                self.dismiss(animated: true)
            }else {
                print("Reject call error ===> \(code) - \(message ?? "")")
            }
        }
    }
    @IBAction func didTapAnswer(_ sender: Any) {
        self.dismiss(animated: true) {
            self.ansAction?()
        }
    }
}

5. การจัดการเหตุการณ์และตรรกะในระหว่างการโทร

5.1. การตั้งค่าการโทร

การโทรจะมี 2 กรณี:

  • การโทรเข้า: เพื่อเริ่มการโทรนี้ เราจะเรียก call.initAnswer() ก่อนเรียกฟังก์ชัน call.answer {status, code, msg in } เพื่อเริ่มการโทร
  • การโทรออก: เพื่อเริ่มการโทรออก เราเรียกฟังก์ชัน call.make{ status, code, clientMsg, serverMsg in }
class CallingViewController: UIViewController {
    private func setupCall() {
        if call.isIncomingCall {
            call.initAnswer()
            call.answer { status, code,msg in } 
        } else {
            call.make { status, code, clientMsg, serverMsg in }
        }
    }
}

จากนั้นเราจะกำหนดตัวแทนให้กับ viewController เพื่อฟังเหตุการณ์ระหว่างการโทร

class CallingViewController: UIViewController {
    private func setupCall() {
        call.delegate = self
        if call.isIncomingCall {
            call.initAnswer()
            call.answer { status, code,msg in } 
        } else {
            call.make { status, code, clientMsg, serverMsg in }
        }
    }
} 
extension CallingViewController: StringeeCall2Delegate {
   func didChangeSignalingState2(_ stringeeCall2: StringeeCall2!, signalingState: SignalingState, reason: String!, sipCode: Int32, sipReason: String!) {
           DispatchQueue.main.async {
               switch signalingState {
                   case .calling:
                       self.status.text = "calling"
                   case .ringing:
                       self.status.text = "ringing"
                   case .answered:
                       self.status.text = "answered"
                   default:
                       self.navigationController?.popViewController(animated: true)
               }
           }
   }

   func didChangeMediaState2(_ stringeeCall2: StringeeCall2!, mediaState: MediaState) {
           DispatchQueue.main.async {
               self.status.text = mediaState == .connected ? "connnected" : "disconnect"
           }
   }
}

แสดงวิดีโอภาพตัวเองและวิดีโอภาพฝ่ายตรงข้าม:

 extension CallingViewController: StringeeCall2Delegate {
    func didReceiveLocalStream2(_ stringeeCall2: StringeeCall2!) {
        DispatchQueue.main.async { [weak self] in
            guard let self = self else { return }
            stringeeCall2.localVideoView.frame = CGRect(origin: .zero, size: self.localVideo.frame.size)
            self.localVideo.insertSubview(stringeeCall2.localVideoView, at: 0)
        }
    }
    func didReceiveRemoteStream2(_ stringeeCall2: StringeeCall2!) {
        DispatchQueue.main.async { [weak self] in
            guard let self = self else { return }
            stringeeCall2.remoteVideoView.frame = CGRect(origin: .zero, size: self.remoteVideo.frame.size)
            self.remoteVideo.insertSubview(stringeeCall2.remoteVideoView, at: 0)
        }
    }
 }

5.2. ฟังก์ชันอื่นๆ ในการโทรวิดีโอ

เปลี่ยนไปใช้กล้องหน้าและกล้องหลัง:

    @IBAction func didTapSwitchCamera(_sender: Any) {
        call.switchCamera()
    }

วางสาย:

    @IBAction func didTapHangup(_ sender: Any) {
        call.hangup { status, code, mess in
            if !status {
                print(mess ?? "")
            }
        }
    }

ไมโครโฟน ปิดเสียง/เปิดเสียง:

    @IBAction func didTapMute() {
        self.isMute = !self.isMute
        self.call.mute(self.isMute)
    }

เปิด/ปิดกล้อง

    @objc func didTapCameraBtn() {
        self.isEnableLocalVideo = !self.isEnableLocalVideo
        self.localVideo.isHidden = !self.isEnableLocalVideo
        self.call.enableLocalVideo(self.isEnableLocalVideo)
    }

สรุป

ในบทความนี้ เราได้เรียนรู้เกี่ยวกับ Stringee Call API - เทคโนโลยีที่ช่วยให้สามารถรวมฟังก์ชันการโทรวิดีโอและเสียงเข้ากับแอปพลิเคชันของคุณบนแพลตฟอร์ม iOS เราได้เรียนรู้วิธีการติดตั้ง Stringee SDK ผ่าน CocoaPods, ออกแบบอินเตอร์เฟซผู้ใช้สำหรับแอปพลิเคชันของเรา และเขียนโค้ดเพื่อรวม Stringee Call API
นอกจากนี้ บทความนี้ยังมีวิดีโอบทเรียนแบบละเอียดเกี่ยวกับวิธีการรวม Stringee Call API เข้ากับแอปพลิเคชันของคุณบนแพลตฟอร์ม iOS คุณสามารถรับชมวิดีโอนี้เพื่อเข้าใจวิธีการรวม Stringee Call API ได้ชัดเจนยิ่งขึ้น
สุดท้าย เพื่อให้คุณเริ่มต้นใช้งาน Stringee Call API ได้อย่างรวดเร็วและง่ายดาย เราได้สร้างโปรเจ็กต์ GitHub ตัวอย่าง คุณสามารถดาวน์โหลดและอ้างอิงโค้ดจากโปรเจ็กต์นี้เพื่อเริ่มต้นพัฒนาแอปพลิเคชันของคุณ
เราหวังว่าบทความนี้จะช่วยให้คุณเข้าใจ Stringee Call API ได้ดีขึ้นและรู้วิธีการรวมมันเข้ากับแอปบนแพลตฟอร์ม iOS หากคุณพบปัญหาใดๆ ระหว่างการรวม Stringee Call API กรุณา <a href = https://stringee.com/vi/contact-sales?utm_source=Blog&utm_medium=anchor_text&utm_campaign=huong-dan-viet-ung-dung-video-1-1-ios-stringee-call-api target = "_blank">ติดต่อเพื่อรับการสนับสนุน

 

<key>NSCameraUsageDescription</key>
  <string>$(PRODUCT_NAME) uses Camera</string> 
<key>NSMicrophoneUsageDescription</key>
  <string>$(PRODUCT_NAME) uses Microphone</string>

"Other linker flags" add "(inherited)"
"Enable bitcode" select "NO"