テレワークで日本を変える|Web会議・テレビ会議(TV会議)のブイキューブ

テレワークで日本を変える|テレビ会議(TV会議)・Web会議・電話会議のブイキューブ

agora.ioでコラボレーション配信の実装

  • Android
  • iOS
  • Agora.io

概要

instagram等でコラボ配信(複数拠点からの配信)をよくみかけるようになりました。
agora.ioのSDKを用いたコラボ配信については実績が多数あります。

コラボ配信の技術的問題点

  • ・コラボ配信において、視聴者は遅延が発生しても問題ありませんが、コラボしている人同士は遅延が発生したら会話が成立しない
  • ・コラボ配信による効果で視聴者が数千人に増えた場合、インフラの増強が必要になる

agora.ioで出来る事

  • ・コラボしている人同士の遅延:1s以内の遅延に抑えることができます。複雑なコードを書く必要はなく、配信者としての設定(APIをコール)をするだけです。
  • ・視聴者側は10万人まで対応している為、大規模な配信にも対応可能です。又、視聴者側の遅延は2s以内になっており、一般的なHLSよりも低遅延が可能です。

サンプルコード

SDKと共にサンプルコードが含まれています。配信者側で入室、視聴者側で入室という機能が含まれています。

ビルド方法(iOS)

SDKのダウンロード

ダウンロードページからVideoSDK iOSをダウンロードします。

(サンプルはSDKの参照も含まれた設定になっています。)

プロジェクトのオープン

ダウンロードしたファイルを展開するとSDK本体、ビデオ通話のサンプル、ライブ配信のサンプルに分かれています。
今回はライブ配信のサンプルを利用する為、OpenLive-iOSのプロジェクトをオープンします。

APP IDの設定

KeyCenter.swiftにagora.ioのAPP IDを設定します。
(簡易に動作検証をする場合はTokenは空でも大丈夫です)

実機での動作確認

ChannelNameを任意で入力し、入室します。配信側はBroadcasterを選択します。

・入室後画面

別の拠点も同じChannelNameを入力し、入室します。

・2拠点入室した場合の画面

実装の詳細(一部抜粋)

配信者か視聴者かを決めるAPIは以下になります。

LiveRoomViewController.swift
    rtcEngine.setClientRole(clientRole)

ローカル側の映像表示は以下のAPIをコールすることで描画できます。

LiveRoomViewController.swift
    rtcEngine.enableVideo()
    rtcEngine.startPreview()
    rtcEngine.setupLocalVideo(CANVAS)

リモート側の映像表示は以下のAPIをコールすることで描画できます。

LiveRoomViewController.swift
    func rtcEngine(_ engine: AgoraRtcEngineKit, didJoinedOfUid uid: UInt, elapsed: Int) {
        rtcEngine.setupRemoteVideo(CANVAS)
    }
Agora SDK イメージ
Agora SDK

大規模・安価・すぐに使える
ライブ配信・ビデオ通話・音声通話SDK

 

先頭へ戻る