ApsaraVideo Live：Implementasikan panggilan audio dan video di iOS

Langkah 3: Buat antarmuka pengguna

Buat antarmuka pengguna yang sesuai dengan skenario interaksi real-time Anda. Misalnya, dalam panggilan video multipihak, Anda dapat membuat ScrollView. Saat pengguna bergabung ke panggilan, tambahkan tampilan video ke kontainer ini. Saat pengguna keluar, hapus tampilan videonya dan perbarui tata letak.

class VideoCallMainVC: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Lakukan pengaturan tambahan setelah memuat tampilan.
        self.title = self.channelId
        
        self.setup()
        self.startPreview()
        self.joinChannel()
    }
    
    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        
        self.leaveAnddestroyEngine()
    }
    
    @IBOutlet weak var contentScrollView: UIScrollView!
    var videoViewList: [VideoView] = []

    // Buat tampilan render panggilan video dan tambahkan ke contentScrollView.
    func createVideoView(uid: String) -> VideoView {
        let view = VideoView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        view.uidLabel.text = uid
        
        self.contentScrollView.addSubview(view)
        self.videoViewList.append(view)
        self.updateVideoViewsLayout()
        return view
    }

    // Hapus tampilan render panggilan video dari contentScrollView.
    func removeVideoView(uid: String) {
        let videoView = self.videoViewList.first { $0.uidLabel.text == uid }
        if let videoView = videoView {
            videoView.removeFromSuperview()
            self.videoViewList.removeAll(where: { $0 == videoView})
            self.updateVideoViewsLayout()
        }
    }
    // Perbarui tata letak subview di contentScrollView.
    func updateVideoViewsLayout() {
        let margin = 24.0
        let width = (self.contentScrollView.bounds.width - margin * 3.0) / 2.0
        let height = width // width * 16.0 / 9.0
        let count = 2
        for i in 0..<self.videoViewList.count {
            let view = self.videoViewList[i]
            let x = Double(i % count) * (width + margin) + margin
            let y = Double(i / count) * (height + margin) + margin
            view.frame = CGRect(x: x, y: y, width: width, height: height)
        }
        self.contentScrollView.contentSize = CGSize(width: self.contentScrollView.bounds.width, height: margin + Double(self.videoViewList.count / count + 1) * height + margin)
    }
}

Bagian ini menjelaskan cara menggunakan ARTC SDK untuk membangun aplikasi audio dan video real-time dasar. Anda dapat menyalin contoh kode lengkap ke dalam proyek Anda untuk menguji fungsionalitasnya. Langkah-langkah di bawah ini menjelaskan pemanggilan API inti.

Diagram berikut menunjukkan alur kerja dasar untuk mengimplementasikan panggilan video:

1. Minta izin

Meskipun SDK memeriksa izin yang diperlukan saat Anda memulai panggilan, kami merekomendasikan memeriksa izin kamera dan mikrofon sebelum memulai panggilan untuk memastikan pengalaman pengguna yang lancar.

func checkMicrophonePermission(completion: @escaping (Bool) -> Void) {
    let status = AVCaptureDevice.authorizationStatus(for: .audio)
    
    switch status {
    case .notDetermined:
        AVCaptureDevice.requestAccess(for: .audio) { granted in
            completion(granted)
        }
    case .authorized:
        completion(true)
    default:
        completion(false)
    }
}

func checkCameraPermission(completion: @escaping (Bool) -> Void) {
    let status = AVCaptureDevice.authorizationStatus(for: .video)
    
    switch status {
    case .notDetermined:
        AVCaptureDevice.requestAccess(for: .video) { granted in
            completion(granted)
        }
    case .authorized:
        completion(true)
    default:
        completion(false)
    }
}

// Contoh penggunaan
checkMicrophonePermission { granted in
    if granted {
        print("Akses mikrofon diberikan.")
    } else {
        print("Akses mikrofon ditolak.")
    }
}

checkCameraPermission { granted in
    if granted {
        print("Akses kamera diberikan.")
    } else {
        print("Akses kamera ditolak.")
    }
}

2. Dapatkan token autentikasi

Bergabung ke channel ARTC memerlukan token autentikasi untuk memverifikasi identitas pengguna. Untuk informasi lebih lanjut tentang cara pembuatan token, lihat Autentikasi berbasis token. Token dapat dihasilkan menggunakan metode satu parameter atau multi-parameter. Metode yang Anda gunakan menentukan API joinChannel mana yang perlu Anda panggil.

Untuk lingkungan produksi:

Karena pembuatan token memerlukan AppKey Anda, hardcoding-nya di sisi client menimbulkan risiko keamanan. Di lingkungan produksi, kami sangat merekomendasikan menghasilkan token di server Anda dan mengirimkannya ke client.

Untuk pengembangan dan debugging:

Saat pengembangan, jika server bisnis Anda belum memiliki logika untuk menghasilkan token, Anda dapat sementara menggunakan logika pembuatan token dari APIExample untuk membuat token sementara. Kode referensinya sebagai berikut:

class ARTCTokenHelper: NSObject {

    /**
    * RTC AppId
    */
    public static let AppId = "<RTC AppId>"

    /**
    * RTC AppKey
    */
    public static let AppKey = "<RTC AppKey>"

    /**
    * Hasilkan token multi-parameter untuk bergabung ke channel berdasarkan channelId, userId, dan timestamp.
    */
    public func generateAuthInfoToken(appId: String = ARTCTokenHelper.AppId, appKey: String =  ARTCTokenHelper.AppKey, channelId: String, userId: String, timestamp: Int64) -> String {
        let stringBuilder = appId + appKey + channelId + userId + "\(timestamp)"
        let token = ARTCTokenHelper.GetSHA256(stringBuilder)
        return token
    }

    /**
    * Hasilkan token satu parameter untuk bergabung ke channel berdasarkan channelId, userId, dan nonce.
    */
    public func generateJoinToken(appId: String = ARTCTokenHelper.AppId, appKey: String =  ARTCTokenHelper.AppKey, channelId: String, userId: String, timestamp: Int64, nonce: String = "") -> String {
        let token = self.generateAuthInfoToken(appId: appId, appKey: appKey, channelId: channelId, userId: userId, timestamp: timestamp)

        let tokenJson: [String: Any] = [
            "appid": appId,
            "channelid": channelId,
            "userid": userId,
            "nonce": nonce,
            "timestamp": timestamp,
            "token": token
        ]

        if let jsonData = try? JSONSerialization.data(withJSONObject: tokenJson, options: []),
        let base64Token = jsonData.base64EncodedString() as String? {
            return base64Token
        }

        return ""
    }

    /**
    * Tanda tangani string menggunakan SHA256.
    */
    private static func GetSHA256(_ input: String) -> String {
        // Konversi string input ke data.
        let data = Data(input.utf8)

        // Buat buffer untuk menyimpan hasil hash.
        var hash = [UInt8](repeating: 0, count: Int(CC_SHA256_DIGEST_LENGTH))

        // Hitung hash SHA-256.
        data.withUnsafeBytes {
            _ = CC_SHA256($0.baseAddress, CC_LONG(data.count), &hash)
        }

        // Konversi hash ke string heksadesimal.
        return hash.map { String(format: "%02hhx", $0) }.joined()
    }

}

3. Impor komponen ARTC SDK

// Impor modul ARTC.
import AliVCSDK_ARTC

4. Buat dan inisialisasi engine

• Buat engine RTC

  Panggil metode <a baseurl="t2974573_v2_2_1.xdita" data-node="4087266" data-root="16090" data-tag="xref" href="t2309850.xdita#2db21d4f16s77" id="ec8b2fb525ugj">sharedInstance</a> untuk membuat instans AliRTCEngine.

  private var rtcEngine: AliRtcEngine? = nil
  
  // Buat engine dan atur delegate.
  let engine = AliRtcEngine.sharedInstance(self, extras:nil)
  ...
  self.rtcEngine = engine

• Inisialisasi engine

  • Panggil setChannelProfile untuk mengatur channel ke AliRTCInteractiveLive (mode interaktif).

    Bergantung pada kebutuhan bisnis Anda, Anda dapat memilih mode interaktif, yang cocok untuk skenario hiburan interaktif, atau mode komunikasi, yang cocok untuk panggilan satu lawan satu atau satu lawan banyak. Memilih mode yang tepat memastikan pengalaman pengguna yang lancar dan penggunaan sumber daya jaringan yang efisien.

    Mode	Penerbitan	Berlangganan	Deskripsi
    Mode interaktif	Dibatasi berdasarkan peran. Hanya pengguna dengan peran streamer yang dapat menerbitkan aliran. Partisipan dapat secara fleksibel mengubah peran sepanjang sesi.	Tidak ada batasan peran. Semua partisipan memiliki izin untuk berlangganan aliran.	Dalam mode interaktif, event seperti streamer bergabung atau meninggalkan channel, atau mulai menerbitkan aliran, diberitahukan kepada viewer secara real-time. Hal ini memastikan viewer mengetahui status streamer. Sebaliknya, aktivitas viewer tidak diberitahukan kepada streamer, sehingga memastikan aliran tidak terganggu. Dalam mode ini, streamer bertanggung jawab atas interaksi, sedangkan viewer terutama mengonsumsi konten dan biasanya tidak berpartisipasi dalam interaksi. Jika kebutuhan bisnis Anda mungkin berubah, pertimbangkan untuk menggunakan mode interaktif secara default. Fleksibilitasnya memungkinkan Anda beradaptasi dengan berbagai kebutuhan interaksi dengan menyesuaikan peran pengguna.
    Mode komunikasi	Tidak ada batasan peran. Semua partisipan memiliki izin untuk menerbitkan aliran.	Tidak ada batasan peran. Semua partisipan memiliki izin untuk berlangganan aliran.	Dalam mode komunikasi, partisipan saling mengetahui keberadaan satu sama lain. Meskipun mode ini tidak membedakan peran pengguna, secara fungsional setara dengan peran streamer dalam mode interaktif. Tujuannya adalah menyederhanakan operasi, sehingga pengguna dapat mencapai fungsionalitas yang diinginkan dengan lebih sedikit pemanggilan API.

  • Panggil setClientRole untuk mengatur peran pengguna menjadi AliRTCSdkInteractive (streamer) atau AliRTCSdkLive (viewer). Perhatikan bahwa peran streamer secara default menerbitkan dan berlangganan aliran, sedangkan peran viewer hanya berlangganan dengan pratinjau lokal dan penerbitan dinonaktifkan secara default.

    Catatan: Saat pengguna beralih dari streamer ke viewer, sistem menghentikan penerbitan aliran audio dan video lokal, tetapi langganan yang ada tidak terpengaruh. Saat pengguna beralih dari viewer ke streamer, sistem mulai menerbitkan aliran audio dan video lokal, dan langganan yang ada tidak terpengaruh.

    // Atur profil channel ke mode interaktif. Gunakan AliRtcInteractivelive untuk semua skenario RTC.
    engine.setChannelProfile(AliRtcChannelProfile.interactivelive)
    // Atur peran client. Gunakan AliRtcClientRoleInteractive untuk pengguna yang perlu menerbitkan dan berlangganan. Gunakan AliRtcClientRolelive untuk pengguna yang hanya berlangganan.
    engine.setClientRole(AliRtcClientRole.roleInteractive)

• Implementasikan callback umum

  Jika SDK mengalami masalah selama operasi, SDK pertama-tama mencoba memulihkan secara otomatis menggunakan mekanisme retry internalnya. Untuk kesalahan yang tidak dapat diselesaikan, SDK memberi tahu aplikasi Anda melalui antarmuka callback yang telah ditentukan.

  Berikut adalah callback utama untuk masalah yang tidak dapat ditangani SDK. Aplikasi Anda harus mendengarkan dan merespons callback ini:

  Penyebab pengecualian	Callback dan parameter	Solusi	Deskripsi
  Autentikasi gagal	result dalam onJoinChannelResult mengembalikan AliRtcErrJoinBadToken	Periksa apakah token benar.	Saat pengguna memanggil API, jika autentikasi gagal, callback API akan mengembalikan pesan kesalahan kegagalan autentikasi.
  Token akan segera kedaluwarsa	onAuthInfoWillExpire	Ambil token baru dan panggil refreshAuthInfo untuk memperbarui informasi.	Kesalahan kedaluwarsa token dapat terjadi baik saat API dipanggil maupun selama runtime. Kesalahan dilaporkan melalui callback API atau callback kesalahan terpisah.
  Token kedaluwarsa	onAuthInfoExpired	Bergabung kembali ke channel.	Kesalahan kedaluwarsa token dapat terjadi baik saat API dipanggil maupun selama runtime. Kesalahan dilaporkan melalui callback API atau callback kesalahan terpisah.
  Masalah koneksi jaringan	Callback onConnectionStatusChange mengembalikan AliRtcConnectionStatusFailed.	Bergabung kembali ke channel.	SDK dapat secara otomatis memulihkan diri dari gangguan jaringan singkat. Jika waktu gangguan melebihi ambang batas, akan terjadi timeout. Aplikasi harus memeriksa status jaringan dan memandu pengguna untuk bergabung kembali.
  Dikeluarkan dari channel	onBye	AliRtcOnByeUserReplaced: Periksa apakah pengguna lain telah bergabung dengan userId yang sama. AliRtcOnByeBeKickedOut: Pengguna dikeluarkan dari channel dan perlu bergabung kembali. AliRtcOnByeChannelTerminated: Channel dihentikan, dan pengguna perlu bergabung kembali.	Layanan RTC memungkinkan administrator menghapus partisipan.
  Pengecualian perangkat lokal	onLocalDeviceException	Periksa izin aplikasi dan apakah perangkat keras berfungsi dengan baik.	Saat terjadi pengecualian perangkat lokal yang tidak dapat diselesaikan SDK, SDK memberi tahu aplikasi melalui callback. Aplikasi kemudian harus melakukan intervensi untuk memeriksa status perangkat.

  extension VideoCallMainVC: AliRtcEngineDelegate {
  
      func onJoinChannelResult(_ result: Int32, channel: String, elapsed: Int32) {
          "onJoinChannelResult1 result: \(result)".printLog()
      }
  
      func onJoinChannelResult(_ result: Int32, channel: String, userId: String, elapsed: Int32) {
          "onJoinChannelResult2 result: \(result)".printLog()
      }
  
      func onRemoteUser(onLineNotify uid: String, elapsed: Int32) {
          // Pengguna remote online.
          "onRemoteUserOlineNotify uid: \(uid)".printLog()
      }
  
      func onRemoteUserOffLineNotify(_ uid: String, offlineReason reason: AliRtcUserOfflineReason) {
          // Pengguna remote offline.
          "onRemoteUserOffLineNotify uid: \(uid) reason: \(reason)".printLog()
      }
  
  
      func onRemoteTrackAvailableNotify(_ uid: String, audioTrack: AliRtcAudioTrack, videoTrack: AliRtcVideoTrack) {
          "onRemoteTrackAvailableNotify uid: \(uid) audioTrack: \(audioTrack)  videoTrack: \(videoTrack)".printLog()
      }
  
      func onAuthInfoWillExpire() {
          "onAuthInfoWillExpire".printLog()
  
          /* TODO: Harus ditangani. Token akan segera kedaluwarsa. Aplikasi Anda perlu mendapatkan token baru untuk channel dan pengguna saat ini, lalu panggil refreshAuthInfo. */
      }
  
      func onAuthInfoExpired() {
          "onAuthInfoExpired".printLog()
  
          /* TODO: Harus ditangani. Beri tahu pengguna bahwa token telah kedaluwarsa, lalu tinggalkan channel dan hapus engine. */
      }
  
      func onBye(_ code: Int32) {
          "onBye code: \(code)".printLog()
  
          /* TODO: Harus ditangani. Callback ini dipicu jika perangkat lain masuk dengan UserID yang sama, sehingga mengeluarkan perangkat saat ini dari channel. */
      }
  
      func onLocalDeviceException(_ deviceType: AliRtcLocalDeviceType, exceptionType: AliRtcLocalDeviceExceptionType, message msg: String?) {
          "onLocalDeviceException deviceType: \(deviceType)  exceptionType: \(exceptionType)".printLog()
  
          /* TODO: Harus ditangani. Kami merekomendasikan memberi tahu pengguna tentang kesalahan perangkat. Callback ini dipicu ketika strategi pemulihan internal SDK gagal. */
      }
  
      func onConnectionStatusChange(_ status: AliRtcConnectionStatus, reason: AliRtcConnectionStatusChangeReason) {
          "onConnectionStatusChange status: \(status)  reason: \(reason)".printLog()
  
          if status == .failed {
              /* TODO: Harus ditangani. Kami merekomendasikan memberi tahu pengguna. Callback ini dipicu ketika strategi pemulihan internal SDK gagal. */
          }
          else {
              /* TODO: Opsional. Anda dapat menambahkan logika bisnis di sini, biasanya untuk analitik atau pembaruan UI. */
          }
      }
  }

5. Atur properti audio dan video

• Atur properti audio

  Panggil setAudioProfile untuk mengatur mode pengkodean audio dan skenario.

  // Atur profil audio. Nilai default adalah mode kualitas tinggi (AliRtcEngineHighQualityMode) dan skenario musik (AliRtcSceneMusicMode).
  engine.setAudioProfile(AliRtcAudioProfile.engineHighQualityMode, audio_scene: AliRtcAudioScenario.sceneMusicMode)

• Atur properti video Tetapkan properti untuk aliran video yang diterbitkan, seperti resolusi, bitrate, dan laju frame.

  Anda dapat mengatur properti untuk aliran video yang diterbitkan, seperti resolusi, bitrate, dan laju frame.

  // Atur parameter pengkodean video.
  let config = AliRtcVideoEncoderConfiguration()
  config.dimensions = CGSize(width: 720, height: 1280)
  config.frameRate = 20
  config.bitrate = 1200
  config.keyFrameInterval = 2000
  config.orientationMode = AliRtcVideoEncoderOrientationMode.adaptive
  engine.setVideoEncoderConfiguration(config)
  engine.setCapturePipelineScaleMode(.post)

6. Atur properti penerbitan dan langganan

Konfigurasikan penerbitan aliran audio dan video serta atur perilaku default untuk berlangganan aliran semua pengguna:

• Panggil publishLocalAudioStream untuk menerbitkan aliran audio.

• Panggil publishLocalVideoStream untuk menerbitkan aliran video. Untuk panggilan hanya audio, Anda dapat mengatur nilai ini ke false.

// Secara default, SDK menerbitkan aliran video. Memanggil publishLocalVideoStream(true) bersifat opsional.
engine.publishLocalVideoStream(true)
// Secara default, SDK menerbitkan aliran audio. Untuk panggilan video, memanggil publishLocalAudioStream(true) bersifat opsional.
// Untuk panggilan hanya audio, panggil publishLocalVideoStream(false) untuk menghentikan penerbitan video.
engine.publishLocalAudioStream(true)

// Atur default untuk berlangganan aliran audio dan video remote.
engine.setDefaultSubscribeAllRemoteAudioStreams(true)
engine.subscribeAllRemoteAudioStreams(true)
engine.setDefaultSubscribeAllRemoteVideoStreams(true)
engine.subscribeAllRemoteVideoStreams(true)

7. Mulai pratinjau lokal

• Panggil setLocalViewConfig untuk mengatur tampilan render lokal dan mengonfigurasi properti tampilan video lokal.

• Panggil metode startPreview untuk memulai pratinjau video lokal.

let videoView = self.createVideoView(uid: self.userId)

let canvas = AliVideoCanvas()
canvas.view = videoView.canvasView
canvas.renderMode = .auto
canvas.mirrorMode = .onlyFrontCameraPreviewEnabled
canvas.rotationMode = ._0

self.rtcEngine?.setLocalViewConfig(canvas, for: AliRtcVideoTrack.camera)
self.rtcEngine?.startPreview()

8. Bergabung ke channel

Panggil joinChannel untuk bergabung ke channel. Kami merekomendasikan menggunakan metode satu parameter, yang memerlukan pemanggilan operasi joinChannel[3/3]. Setelah Anda memanggil joinChannel, periksa baik nilai kembali maupun hasil dalam callback onJoinChannelResult. Jika nilai kembali adalah 0 dan hasil dalam callback juga 0, pengguna telah berhasil bergabung ke channel. Jika tidak, verifikasi bahwa token valid.

let ret = self.rtcEngine?.joinChannel(joinToken, channelId: nil, userId: nil, name: nil) { [weak self] errCode, channelId, userId, elapsed in
    if errCode == 0 {
        // berhasil

    }
    else {
        // gagal
    }
    
    let resultMsg = "\(msg) \n CallbackErrorCode: \(errCode)"
    resultMsg.printLog()
    UIAlertController.showAlertWithMainThread(msg: resultMsg, vc: self!)
}

let resultMsg = "\(msg) \n ReturnErrorCode: \(ret ?? 0)"
resultMsg.printLog()
if ret != 0 {
    UIAlertController.showAlertWithMainThread(msg: resultMsg, vc: self)
}

9. Atur tampilan remote

Saat pengguna remote mulai atau berhenti menerbitkan aliran, callback onRemoteTrackAvailableNotify dipicu. Dalam callback ini, Anda dapat mengatur atau menghapus tampilan pengguna remote. Berikut adalah contoh kodenya:

func onRemoteTrackAvailableNotify(_ uid: String, audioTrack: AliRtcAudioTrack, videoTrack: AliRtcVideoTrack) {
    "onRemoteTrackAvailableNotify uid: \(uid) audioTrack: \(audioTrack)  videoTrack: \(videoTrack)".printLog()
    // Status aliran pengguna remote.
    if audioTrack != .no {
        let videoView = self.videoViewList.first { $0.uidLabel.text == uid }
        if videoView == nil {
            _ = self.createVideoView(uid: uid)
        }
    }
    if videoTrack != .no {
        var videoView = self.videoViewList.first { $0.uidLabel.text == uid }
        if videoView == nil {
            videoView = self.createVideoView(uid: uid)
        }
        
        let canvas = AliVideoCanvas()
        canvas.view = videoView!.canvasView
        canvas.renderMode = .auto
        canvas.mirrorMode = .onlyFrontCameraPreviewEnabled
        canvas.rotationMode = ._0
        self.rtcEngine?.setRemoteViewConfig(canvas, uid: uid, for: AliRtcVideoTrack.camera)
    }
    else {
        self.rtcEngine?.setRemoteViewConfig(nil, uid: uid, for: AliRtcVideoTrack.camera)
    }
    
    if audioTrack == .no && videoTrack == .no {
        self.removeVideoView(uid: uid)
        self.rtcEngine?.setRemoteViewConfig(nil, uid: uid, for: AliRtcVideoTrack.camera)
    }
}

10. Tinggalkan channel dan hapus engine

Saat sesi berakhir, tinggalkan channel dan hapus engine untuk melepaskan sumber daya:

1. Panggil stopPreview untuk menghentikan pratinjau video.

2. Panggil leaveChannel untuk meninggalkan channel.

3. Panggil destroy untuk menghapus engine dan melepaskan semua sumber daya terkait.

self.rtcEngine?.stopPreview()
self.rtcEngine?.leaveChannel()
AliRtcEngine.destroy()
self.rtcEngine = nil

11. Demo