メニュー

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

はじめましょう

目次

This guide provides you with an overview of the key objects you'll use in the Programmable Video API to build your video application with the Twilio Programmable Video iOS SDK.

Note: If you haven’t already done so, then take a look at the Twilio Video iOS QuickStart Application [Swift, Objective-C]. Once you've played with the QuickStart, come back to this guide for more detail on how to add video to your own app.

WebRTCをお使いいただいた経験があるなら、Programmable Videoは完成度の高いオーディオおよびビデオアプリケーションの構築を容易にするために、WebRTCの下位レベルAPIの単純なラッパーを提供していることに気づかれるでしょう。 依然としてより下位レベルのプリミティブにアクセスできますが、入門には必要ありません。

加えて、Programmable VideoはWebRTCを使用して洗練されたアプリケーションを構築するために必要な不足したピース: グローバルSTUN/TURNリレー、大規模な電話会議および録音用のメディアサービス、そしてシグナリングのためのインフラが全て含まれています。

Video API概要

まずは、Programmable Video APIの概要からはじめましょう:

  • Roomはリアルタイムのオーディオ、ビデオ、そして画面共有セッションを表し、これはProgrammable Videoアプリケーションにおける基本となる構成要素になります。
  • In a Peer-to-peer Room, media flows directly between participants. Supports up to 10 participants in a mesh topology.
  • In a Group Room, media is routed through Twilio's Media Servers. Supports up to 50 participants.
  • Participants は、Roomに接続され、他のクライアントとオーディオまたは(および)ビデオのメディアと共有しているクライアントアプリケーションを表します。
  • Tracks は、Roomと共有されているオーディオとビデオのストリームを表します。
  • LocalTracks represent the audio and video captured from the local microphone and camera.
  • RemoteTracks represent the audio and video tracks from other participants connected to the Room.

下記のコード例はルームとその参加者に関連して開発者たるあなたが行うべき共通のタスクを示しています。

前提条件

To start using the iOS Programmable Video SDK in your apps, you need to perform a few basic tasks first.

1. Get the Programmable Video iOS SDK

The Twilio Video iOS SDK dynamic framework can be installed using Carthage, CocoaPods or manually, as you prefer. The Twilio Video iOS SDK is also distributed as a static library which can be manually installed.

変更

You can add Programmable Video for iOS by adding the following line to your Cartfile:

github "twilio/twilio-video-ios"

続いて、carthage bootstrap を実行します。 (SDKを更新している場合は carthage update)

On your application targets’ General settings page, in the Linked Frameworks and Libraries section, drag and drop each framework you want to use from the Carthage/Build folder on disk.

On your application targets’ Build Phases settings tab, click the “+” icon and choose New Run Script Phase. Create a Run Script in which you specify your shell (ex: /bin/sh), add the following contents to the script area below the shell:

/usr/local/bin/carthage copy-frameworks

Add the paths to the frameworks you want to use under Input Files, e.g.:

$(SRCROOT)/Carthage/Build/iOS/TwilioVideo.framework
CocoaPod
source 'https://github.com/CocoaPods/Specs'

platform :ios, '10.0'

target 'TARGET_NAME' do
    pod 'TwilioVideo', '~> 3.0.0-beta1'
end

そして、pod install を実行してプロジェクトに依存関係をインストールします。

マニュアル

TwilioVideo.framework は既存のプロジェクトにドラッグ&ドロップできる動的なiOSフレームワークとして配布されています。

View all Video iOS Releases here or just download the latest Video dynamic framework here.

フレームワークをダウンロード、展開したら、XcodeプロジェクトのGeneral 設定ページに移動します。 Embedded Binariesセクションに、TwilioVideo.framework をドラッグ&ドロップします。 "Copy items if needed"にチェックが入っているかどうか確認し、Finishをクリックします。 これで、LibrariesセクションのEmbedded BinariesおよびLinked Frameworks双方に TwilioVideo.framework が追加されました。

Next, you will need to open your project's Linked Frameworks and Libraries configuration. You should see TwilioVideo.framework there already. Add the following frameworks to that list:

  • AudioToolbox.framework
  • VideoToolbox.framework
  • AVFoundation.framework
  • CoreTelephony.framework
  • GLKit.framework
  • CoreMedia.framework
  • SystemConfiguration.framework
  • libc++.tbd

In your Build Settings, you will also need to modify Other Linker Flags to include -ObjC.

Before distributing your app to the  App Store, you will need to strip the simulator binaries from the embedded framework. Navigate to your target's Build Phases screen and create a new Run Script Phase. Ensure that this new run script phase is after the Embed Frameworks phase. Paste the following command in the script text field:

/bin/bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/TwilioVideo.framework/remove_archs"
Manual static library integration

libTwilioVideo is distributed as a static iOS library that you can drag and drop into you existing projects.

View all Video iOS Releases here or just download the latest Video static library here.

Once you've downloaded and unpacked the static library, drag and drop the lib and headers folders into your project. Ensure that "Copy items if needed" is checked and press Finish. This will add libTwilioVideo.a to the Linked Frameworks and Libraries section.

Next, you will need to open your project's Linked Frameworks and Libraries configuration. You should see libTwilioVideo.a there already. Add the following frameworks to that list:

  • AudioToolbox.framework
  • VideoToolbox.framework
  • AVFoundation.framework
  • CoreTelephony.framework
  • GLKit.framework
  • CoreMedia.framework
  • SystemConfiguration.framework
  • libc++.tbd

In your Build Settings, you will also need to modify Other Linker Flags to include -ObjC.

Background Modes

To allow a connection to a Room to be persisted while an application is running in the background, you must select the Audio, AirPlay, and Picture in Picture background mode from the Capabilities project settings page.

サポートされるデバイス

The iOS SDK supports iOS 10.0 or higher. It is built for armv7, arm64, x86 and x86_64 architectures with Bitcode slices for armv7 and arm64 devices.

Supported Xcode versions and Bitcode

The TwilioVideo.framework is built with Xcode 10.1. The framework can successfully be consumed with previous versions of Xcode. However, re-compiling Bitcode when exporting for Ad Hoc or Enterprise distribution requires the use of Xcode 9.x.

2. Get an API Key

APIキーはTwilioAPIにアクセスするためのクレデンシャルを表します。2つの理由があります。

For the purposes of this guide, we will create our API Key from the Twilio Console.

  • Go to the API Keys section under Tools in the Twilio Console.
  • Click on “Create a New API Key”, add a friendly name and save your Key and Secret.

3. Generate an Access Token

To execute the code samples below, you can use the Testing Tools page in the Twilio Console to generate an Access Token. An Access Token is a short-lived credential used to authenticate your client-side application to Twilio.

In a production application, your back-end server will need to generate an Access Token for every user in your application. An Access Token is a short-lived credential used to authenticate your client-side application to Twilio. Visit the User Identity and Access Token guide to learn more.

ルームに接続する

Call TwilioVideo.connect() to connect to a Room from your iOS application. Once connected, you can send and receive audio and video streams with other Participants who are connected to the Room.

@IBAction func createARoom(sender: AnyObject) {
    let connectOptions = ConnectOptions(token: accessToken) { (builder) in
        builder.roomName = "my-room"
    }
    room = TwilioVideoSDK.connect(options: connectOptions, delegate: self)
}

// MARK: RoomDelegate

func roomDidConnect(room: Room) {
    print("Did connect to Room")
}

Roomへの接続時には、アクセストークンを渡すことが必要です。 またオプションで、下記を渡すこともできます:

  • Local audio, video or data tracks, to begin sharing pre-created local media with other Participants in the Room upon connecting.
  • ルーム名: 参加したいルームの名前を動的に指定できます。 (メモ: ルーム名をアクセストークンにエンコードできます。 こうすることでユーザーはトークンで指定されたRoomにのみ接続できます。)
  • ICEトランスポートポリシー: テスト用途として、強制的にTURNリレー経由で通話を行えるようになります。

Roomの名前には、参加したいRoomを指定します。 その名前のRoomがまだ存在していない場合、接続に先立って作成されます。 ルームがすでにアクティブな場合はルームに接続され、同じルームに接続されている他の参加者からの通知を受信します。 ルーム名はアカウント内で一意でなければなりません。

また、Rooms REST APIを使用してRoomに接続することも可能です。 さらなる詳細については、REST API Roomsリソースを参照してください。

Example: Create a Room called DailyStandup

 curl -XPOST 'https://video.twilio.com/v1/Rooms' \
 -u '{API Key SID}:{API Secret}' \
 -d 'UniqueName=DailyStandup'

注 : Type属性を指定しない場合、Twilioは既定でGroupルームを作成します。

既定のRoom設定

You can also set the room type from the Room Settings page in the Twilio Video Console. Twilio will use the room type set on Room Settings page, when you create a room from the client-side or the REST API.

メモ: Twilioは、Room設定ページの既定としてRoomタイプをGroupに設定します。

StatusCallback URLが設定されている場合、Roomが作成されると、Twilioはroom-created Webhookイベントを呼び出します。 クライアント側からRoomを作成したい場合、Room設定ページからStatusCallback URLを設定できます。 REST APIでRoomを作成する場合、Room作成時にStatusCallback URLを指定することが必要です。

 curl -XPOST 'https://video.twilio.com/v1/Rooms' \
 -u '{API Key SID}:{API Secret}' \
 -d 'UniqueName=DailyStandup' \
 -d 'StatusCallback=https://hooks.yoursite.com/room-events' \
 -d 'StatusCallbackMethod=POST' \
 -d 'Type=group'

Enabling Room Recordings

Recordings can be enabled only on Group Rooms. Set Recordings to Enabled to record participants when they connect to a Group Room. Recordings can also be enabled on Group Rooms through via the Rest API at Room creation time by setting the RecordParticipantsOnConnect property to true.

curl -XPOST 'https://video.twilio.com/v1/Rooms' \
-u 'SKXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX:your_api_key_secret' \
-d 'UniqueName=DailyStandup' \
-d 'Type=group' \
-d 'RecordParticipantsOnConnect=true' \
-d 'StatusCallback=http://example.org'

ルームに参加する

If you'd like to join a Room you know already exists, you handle that exactly the same way as creating a room: just pass the Room name to the connect method. Once in a Room, you'll receive a room:participantDidConnect: callback for each Participant that successfully joins. Querying the remoteParticipants getter will return any existing Participants who have already joined the Room.

@IBAction func joinRoom(sender: AnyObject) {
    let connectOptions = ConnectOptions(token: accessToken) { (builder) in
        builder.roomName = "existing-room"
    })
    room = TwilioVideoSDK.connect(options: connectOptions, delegate: self)
}

// MARK: RoomDelegate

func roomDidConnect(room: Room) {
    print("Did connect to room")
}

LocalMediaをセットアップする

下記の方法で、いろいろなプラットフォーム上のデバイスのマイク、カメラ、あるいは画面共有からローカルメディアを取り込むことができます:

iOSアプリケーションでは、TVILocalAudioTrackを作成することでオーディオの取り込みを開始し、TVIVideoCapturerと関連づけられたTVILocalVideoTrackを作成することでビデオの取り込みを開始します。 iOS Video SDKはカメラおよび画面共有の双方に対して、カスタマイズ可能なビデオ取り込みを提供します。

// Create an audio track
var localAudioTrack = LocalAudioTrack()

// Create a data track
var localDataTrack = LocalDataTrack()

// Create a CameraSource to provide content for the video track
var localVideoTrack : LocalVideoTrack?

// Create a video track with the capturer.
if let camera = CameraSource(delegate: self) {
    localVideoTrack = LocalVideoTrack(source: camera)
}

Specify tracks at connect time

When the client joins a Room, the client can specify which Tracks they wish to share with other Participants. Imagine we want to share the audio and video Tracks we created earlier.

let connectOptions = ConnectOptions(token: accessToken) { (builder) in
    builder.roomName = "my-room"

    if let audioTrack = localAudioTrack {
        builder.audioTracks = [ audioTrack ]
    }
    if let dataTrack = localDataTrack {
        builder.dataTracks = [ dataTrack ]
    }
    if let videoTrack = localVideoTrack {
        builder.videoTracks = [ videoTrack ]
    }
}

var room = TwilioVideoSDK.connect(options: connectOptions, delegate: self)

Connect as a publish-only Participant

For some use cases (such as a ReplayKit broadcast extension) you may wish to connect as a publish-only Participant that is not subscribed to any Tracks. If you are connecting to a Group Room, you may disable automatic subscription behavior via ConnectOptions.

let connectOptions = ConnectOptions(token: accessToken) { (builder) in
    builder.isAutomaticSubscriptionEnabled = false
    builder.roomName = "my-room"

    if let audioTrack = localAudioTrack {
        builder.audioTracks = [ audioTrack ]
    }
}

var room = TwilioVideo.connect(options: connectOptions, delegate: self)

リモート参加者を扱う

接続済みの参加者を処理する

When you join a Room, Participants may already be present. You can check for existing Participants in the roomDidConnect: callback by using the remoteParticipants getter.

room = TwilioVideo.connect(options: connectOptions, delegate: self)

// MARK: RoomDelegate

func roomDidConnect(room: Room) {
    // The Local Participant
    if let localParticipant = room.localParticipant {
        print("Local identity \(localParticipant.identity)")
    }

    // Connected participants
    let participants = room.remoteParticipants;
    print("Number of connected Participants \(participants.count)")
}

func participantDidConnect(room: Room, participant: RemoteParticipant) {
    print ("Participant \(participant.identity) has joined Room \(room.name)")
}

func participantDidDisconnect(room: Room, participant: RemoteParticipant) {
    print ("Participant \(participant.identity) has left Room \(room.name)")
}

参加者接続イベントを処理する

When Participants connect to or disconnect from a Room that you're connected to, you'll be notified via an event listener: Similar to Room Events, Twilio will fire Participant events if the StatusCallback webhook URL is set when the Room is created. These events help your application keep track of the participants who join or leave a Room.

// MARK: RoomDelegate

// First, we set a Participant Delegate when a Participant first connects:
func participantDidConnect(room: Room, participant: RemoteParticipant) {
    print("Participant connected: \(participant.identity)")
    participant.delegate = self
}

リモート参加者のビデオを表示する

リモートの参加者によって送信されたビデオ・トラックを見えるようにするには、それを画面にレンダリングする必要があります。

// MARK: RemoteParticipantDelegate

/* 
 * In the Participant Delegate, we can respond when the Participant adds a Video
 * Track by rendering it on screen.
 */
func didSubscribeToVideoTrack(videoTrack: RemoteVideoTrack,
                              publication: RemoteVideoTrackPublication,
                              participant: RemoteParticipant) {

    print("Participant \(participant.identity) added a video track.")

    if let remoteView = VideoView.init(frame: self.view.bounds,
                                       delegate:self) {

        videoTrack.addRenderer(remoteView)
        self.view.addSubview(remoteView)
        self.remoteView = remoteView
    }
}

// MARK: VideoViewDelegate

// Lastly, we can subscribe to important events on the VideoView
func videoViewDimensionsDidChange(view: VideoView, dimensions: CMVideoDimensions) {
    print("The dimensions of the video track changed to: \(dimensions.width)x\(dimensions.height)")
    self.view.setNeedsLayout()
}

ルームへの参加

カメラプレビューを表示する

Sometimes you need to make sure you're looking fantastic before entering a Room. We get it. The iOS SDK provides a means to render a local camera preview outside the context of an active Room:

// Use CameraSource to produce video from the device's front camera.

if let camera = CameraSource(delegate: self),
    let videoTrack = LocalVideoTrack(source: camera) {

    // VideoView is a VideoRenderer and can be added to any VideoTrack.
    let renderer = VideoView(frame: view.bounds)

if let camera = TVICameraCapturer(source: .frontCamera),
    let videoTrack = TVILocalVideoTrack(capturer: camera) {

    // TVIVideoView is a TVIVideoRenderer and can be added to any TVIVideoTrack.
    let renderer = TVIVideoView(frame: view.bounds)

    // Add renderer to the video track
    videoTrack.addRenderer(renderer)

    self.localVideoTrack = videoTrack
    self.camera = camera
    self.view.addSubview(renderer)
} else {
    print("Couldn't create CameraCapturer or LocalVideoTrack")
}

ルームから切断する

現在参加しているルームから切断できます。 他の参加者は participantDisconnected イベントを受信します。

// To disconnect from a Room, we call:
room?.disconnect()

// This results in a callback to RoomDelegate#roomDidDisconnect(room: Room, error: Error?)

// MARK: RoomDelegate

func roomDidDisconnect(room: Room, error: Error?) {
    print("Disconnected from room \(room.name)")
}

Room reconnection

The Video SDK will raise notifications when a Room is reconnecting due to a network disruption. A Room reconnection is triggered due to a signaling or media reconnection event. To capture when a reconnection is triggered or that it has reconnected:

// MARK: RoomDelegate

// Error will be either TwilioVideoSDK.Error.signalingConnectionError or TwilioVideoSDK.Error.mediaConnectionError
func roomIsReconnecting(room: Room, error: Error) {
    print("Reconnecting to room \(room.name), error = \(String(describing: error))")
}

func roomDidReconnect(room: Room) {
    print("Reconnected to room \(room.name)")
}

Reconnections in a Peer-to-Peer Room

In a Peer-to-Peer Room, each Participant has media connections to all the other Participants in the Room. If all media connections between the LocalParticipant and all other Participants are broken, then the LocalParticipant's Room will enter the reconnecting state until media connectivity with at least one Participant is re-established.

Reconnections and the UIApplication lifecycle

There are certain instances when an application is put into the background that both the signaling and media connection are closed, which will cause the reconnecting delegate method to be invoked:

  • When connected to a Peer-to-Peer Room with no Remote Participants.
  • When connected to a Peer-to-Peer Room with other Remote Participants and no shared audio tracks.
  • When connected to a Group Room with no shared audio tracks.

Server-side control

The Programmable Video REST API allows you to control your video applications from your back-end server via HTTP requests. To learn more check out the Programmable Video REST API docs.

Rate this page:

ヘルプが必要ですか?

誰しもが一度は考える「コーディングって難しい」。そんな時は、お問い合わせフォームから質問してください。 または、Stack Overflow でTwilioタグのついた情報から欲しいものを探してみましょう。