WebRTC Conference Japan 2016 発表資料 2016/2/17 ニューフォリア 畠田喜丈さん

1. 1
WebRTC on Native App
Newphoria Corporation
Development Division
Yoshitake Hatada

2. 2
本セッションでは….
WebRTCプラットフォームSkyWay SDK開発時にご協力した際の
知見、四方山をお話しさせていただきます。

3. 3
プラットフォーム SDK故の難しさ
各OS { iOS | Android }から同様に使える必要がある。
→抽象度の均一化
→性能差の解消（端末ごとのベストエフォート）
→機能的には全方位対応
個別のアプリケーションを開発するよりも、ちょっと 結構厄介。

4. libjingle Platform 層
4
プラットフォーム SDK レイヤ構造
App 層
SDK 層
libjingle Platform 層
libjingle Core 層 OS 固有層
OS 層
libjingle Platform 層

5. 5
libjingle – Google Talk Voice and P2P Interoperability Libiraty
• C/C++
• STL (but がっつりテンプレートではないのでちょっと安心)
• 2GB++
• Camel と Snake が混在  (かなり改善されたがそれでも…)
• 通信プロトコルは XMPP の拡張
• 基本UDPのみ (Pseudo TCPもあるでよ)

6. libjingle Platform 層
6
プラットフォーム SDK レイヤ構造
App 層
SDK 層
libjingle Platform 層
libjingle Core 層 OS 固有層
OS 層
(WebSocket/XHR Streamによるシグナリングサーバとの通信、
MessagePack仕様によるデータコネクション通信はlibjingleとは
別実装)
特定のプラットフォーム向けにビルドすることで
WebRTC Native APIsの共通APIを利用を実現する層libjingle Platform 層

7. 7
libjingle Platform for iOS (Objective-C)
RTCAVFoundationVideoSource.h RTCI420Frame.h
RTCMediaStream.h RTCPeerConnectionDelegate.h
RTCStatsReport.hRTCAudioSource.h RTCICECandidate.h
RTCMediaStreamTrack.h RTCPeerConnectionFactory.h
RTCTypes.hRTCAudioTrack.h RTCICEServer.h
RTCNSGLVideoView.h RTCPeerConnectionInterface.h
RTCVideoCapturer.h RTCDataChannel.h
RTCLogging.h RTCOpenGLVideoRenderer.h
RTCSessionDescription.h RTCVideoRenderer.h
RTCEAGLVideoView.h RTCMediaConstraints.h
RTCPair.h RTCSessionDescriptionDelegate.h
RTCVideoSource.h RTCFileLogger.h
RTCMediaSource.h RTCPeerConnection.h
RTCStatsDelegate.h RTCVideoTrack.h

8. 8
libjingle Platform for Android (org.webrtc)
org.webrtc.AudioSource
org.webrtc.AudioTrack
org.webrtc.CameraEnumerationAndroid
org.webrtc.DataChannel
org.webrtc.EglBase
org.webrtc.Logging
org.webrtc.MediaConstraints
org.webrtc.MediaStream
org.webrtc.PeerConnection
org.webrtc.PeerConnectionFactory
org.webrtc.RendererCommon
org.webrtc.SurfaceViewRenderer
org.webrtc.VideoCapturerAndroid
org.webrtc.VideoRenderer
org.webrtc.VideoSource
org.webrtc.VideoTrack
org.webrtc.voiceengine.WebRtcAudioManager
:
:

9. libjingle Platform 層
9
プラットフォーム SDK レイヤ構造
App 層
SDK 層
libjingle Platform 層
libjingle Core 層 OS 固有層
OS 層
(WebSocket/XHR Streamによるシグナリングサーバとの通信、
MessagePack仕様によるデータコネクション通信はlibjingleとは
別実装)
特定のプラットフォーム向けにビルドすることで
WebRTC Native APIsの共通APIを利用を実現する層
WebRTCで利用する各機能を実現している層
libjingle Platform 層

10. 10
libjingle Core層
WebRTCで利用する各機能を実現しているそれぞれの機能層。
f.e.)
• ビデオコーデック (VP8、VP9、H.264…)
• オーディオコーデック (iSAC、opus、G722、iLIBC、PCMU、PCMA、CN、red、telephone-event…)
• RTP/RTCP
• STUN
• TURN
• SDP ICE
※ここで用意されているビデオコーデック、オーディオコーデックは Software Codec です。

11. libjingle Platform 層
11
プラットフォーム SDK レイヤ構造
App 層
SDK 層
libjingle Platform 層
libjingle Core 層 OS 固有層
OS 層
(WebSocket/XHR Streamによるシグナリングサーバとの通信、
MessagePack仕様によるデータコネクション通信はlibjingleとは
別実装)
特定のプラットフォーム向けにビルドすることで
WebRTC Native APIsの共通APIを利用を実現する層
WebRTCで利用する各機能を実現している層
libjingle Platform 層
各OS固有機能の層
Camera、MIC、映像描画、音声再生、ハードウェアコーデック
(Video Codec、DSP Extension…)

12. 12
ローカルからの OFFER までの大まかな流れ
1. PeerConnection を作成するための Factory オブジェクトの初期化
2. PeerConnectionFactory オブジェクトの生成
3. ローカルメディアストリームの生成 (Video, Audio)
4. PeerConnection オブジェクトを生成
5. PeerConnection オブジェクトに OFFER をリクエスト
6. OFFER の準備ができると SDP が生成されるので、OFFER 相手にシグナリングサーバ経由で送信。
7. 生成された ICE CANDIDATE を OFFER 相手にシグナリングサーバ経由で送信
8. 受信した相手側の ANSWER を PeerConnection の RemoteDescription として設定
9. 受信した相手側の ICE CANDIDATE を PeerConnection に追加
10. 映像と音声の通信開始

13. 13
Java
// PeerConnection や MediaStream を生成するための Factory を生成
{
Context context = getApplicationContext();
boolean useAudio = true;
boolean useVideo = true;
boolean useHWCodec = true;
PeerConnectionFactory.initializeAndroidGlobals(context, useAudio, useVideo, useHWCodec);
PeerConnectionFactory.Options option = new PeerConnectionFactory.Options();
PeerConnectionFactory factory = new PeerConnectionFactory(option);
}
// ローカルのメディアストリームを生成
{
MediaStream stream = factory.createLocalMediaStream("ARDAMS");
// カメラから映像トラックを生成
String nameOfCamera = CameraEnumerationAndroid.getNameOfFrontFacingDevice();
VideoCapturerAndroid capture = VideoCapturerAndroid.create(nameOfCamera, this, null);
MediaConstraints videoMediaConstraints = new MediaConstraints();
mediaConstraints.mandatory.add(new MediaConstraints.KeyValuePair("maxWidth", "640"));
mediaConstraints.mandatory.add(new MediaConstraints.KeyValuePair("maxHeight", "480"));
VideoSource videoSource = factory.createVideoSource(capture, videoMediaConstraints);
VideoTrack videoTrack = factory.createVideoTrack("ARDAMSv0", vidSrc);
stream.addVideoTrack(videoTrack);
// マイクから音声トラックを生成
MediaConstraints audioMediaConstraints = new MediaConstraints();
AudioSource audioSource = factory.createAudioSource(audioMediaConstraints);
AudioTrack audioTrack = factory.createAudioTrack("ARDAMSa0", audioSource);
stream.addAudioTrack(audioTrack);
}

14. 14
Java
// PeerConnection オブジェクトの生成
{
LinkedList<PeerConnection.IceServer> servers = new LinkedList<>();
PeerConnection.RTCConfiguration configuration = new PeerConnection.RTCConfiguration(servers);
MediaConstraints mediaConstraints = new MediaConstraints();
mediaConstraints.mandatory.add(new MediaConstraints.KeyValuePair("OfferToReceiveAudio", "true"));
mediaConstraints.mandatory.add(new MediaConstraints.KeyValuePair("OfferToReceiveVideo", "true"));
PeerConnection peerConnection = factory.createPeerConnection(configuration, mediaConstraints, observer);
// PeerConnection にメディアストリームを追加
peerConnection.addStream(stream);
}
// OFFER リクエスト
{
MediaConstraints mediaConstraints = new MediaConstraints();
...
peerConnection.createOffer(SdpObserver, mediaConstraints);
}
// ローカルセッションディスクリプション生成時のオーバーライドメソッド
{
@Override
public void onCreateSuccess(SessionDescription sessionDescription)
{
peerConnection.setLocalDescription(this, sessionDescription);
// このあと、シグナリングサーバに OFFER / ANSWER メッセージを送る
}
}
// リモートからのメッセージでリモートセッションディスクリプションを設定
{
// 受信したデータから SDP 部分を抽出
String sdp = (抽出処理)
SessionDescription desc = new SessionDescription(type, sdp);
peerConnection.setRemoteDescription(this, desc);
}

15. 15
Objective-C
// PeerConnection や MediaStream を生成するための Factory を生成
{
[RTCPeerConnectionFactory initializeSSL];
RTCPeerConnectionFactory factory = [[RTCPeerConnectionFactory alloc] init];
}
// ローカルのメディアストリームを生成
{
RTCMediaStream* stream = [factory mediaStreamWithLabel:@"ARDAMS"];
// カメラから映像トラックを生成
RTCMediaConstraints* videoConstraints = [[RTCMediaConstraints alloc] initWithMandatoryConstraints:aryMandatory optionalConstraints:nil];
RTCAVFoundationVideoSource* sourceVideo = [[RTCAVFoundationVideoSource alloc] initWithFactory:factory constraints:videoConstraints];
RTCVideoTrack* videoTrack = [factory videoTrackWithID:@"ARDAMSv0" source:sourceVideo];
[stream addVideoTrack:videoTrack];
// マイクから音声トラックを生成
RTCAudioTrack* audioTrack = [factory audioTrackWithID:@"ARDAMSa0"];
[stream addAudioTrack:audioTrack];
}
// PeerConnection オブジェクトの生成
{
RTCConfiguration* config = [[RTCConfiguration alloc] init];
[config setIceTransportsType:kRTCIceTransportsTypeAll];
[config setBundlePolicy:kRTCBundlePolicyBalanced];
[config setRtcpMuxPolicy:kRTCRtcpMuxPolicyNegotiate];
[config setTcpCandidatePolicy:kRTCTcpCandidatePolicyEnabled];
[config setIceServers:arServers];
[config setAudioJitterBufferMaxPackets:50];
[config setIceConnectionReceivingTimeout:-1];
RTCPair* pairVideoValue = [[RTCPair alloc] initWithKey:@"OfferToReceiveVideo" value:@"true"];
RTCPair* pairAudioValue = [[RTCPair alloc] initWithKey:@"OfferToReceiveAudio" value:@"true"];
NSArray* arrayConstraints = @[ pairVideoValue, pairAudioValue ];
RTCMediaConstraints* constraints = [[RTCMediaConstraints alloc] initWithMandatoryConstraints:arrayConstraints optionalConstraints:nil];
PeerConnection peerConnection = [factory peerConnectionWithConfiguration:config constraints:constraints delegate:Observer];
// PeerConnection にメディアストリームを追加
[peerConnection addStream:stream];
}

16. 16
Objective-C
// Offer リクエスト
{
NSArray* arrayConstraints = @[ ... ];
RTCMediaConstraints* constraints = [[RTCMediaConstraints alloc] initWithMandatoryConstraints:arrayConstraints optionalConstraints:nil];
[peerConnection createOfferWithDelegate:Observer constraints:constraints];
}
// ローカルセッションディスクリプション生成時の Delegate / RTCSessionDescriptionDelegate
{
- (void)peerConnection:(RTCPeerConnection *)peerConnection didCreateSessionDescription:(RTCSessionDescription *)sdp error:(NSError *)error
{
NSString* type = [sdp.type lowercaseString];
NSString* desc = [sdp description];
RTCSessionDescription* sd = [[RTCSessionDescription alloc] initWithType:type sdp:desc];
[peerConnection setLocalDescriptionWithDelegate:self sessionDescription:sd];
// このあと、シグナリングサーバに OFFER / ANSWER メッセージを送る
}
}
// リモートからのメッセージでリモートセッションディスクリプションを設定
{
// 受信したデータから TYPE 部分を抽出
NSString* type = (抽出処理)
// 受信したデータから SDP 部分を抽出
NSString* desc = (抽出処理)
// Set remote description
RTCSessionDescription* sd = [[RTCSessionDescription alloc] initWithType:type sdp:desc];
[self.peerConnection setRemoteDescriptionWithDelegate:self sessionDescription:sd];
}

17. 17
libjingle あるある
Libjingle自体は C/C++だが、追加でAndroid、iOS、Windows用のAPIが追加されている。
Python,ninjaによってそれぞれのプラットフォーム向けのネイティブライブラリが作成できる。
{Android | iOS | Windows} {実機 | シミュレータ} {32bit | 64bit }{Chip A| Chip B |Chinp C}
とっちらかる
一括ビルドスクリプト ( https://github.com/pristineio/webrtc-build-scripts )
libjingle 開発活動が活発
1日でmasterブランチのコミットが数十進むことも珍しくない。
もろもろの事情(OS依存性の問題)や新機能の追加、バグフィックスなどでコードの移動が多発。
→APIが変わったり、無くなったり、新しく追加されたり…
ライブラリ作成のスクリプト構造も追随して変えなければ…
一括ビルドスクリプトが追いつかない
やっぱり、とっちらかる

18. 18
iOS / Android
• iOS8.0から H.264だとハードウェア支援が受けられる！
• WebRTCでは V8 デフォルト。CPU負荷高い！(libjingle/iOSでもデフォルトでは H.264は使用できない)
• ビルド時に記述追加でH.264を有効化して対応。
• bitcodeはオプションとして存在しているが、動的に生成される .py に記述
• →どこにどう書いてあるか、ふたを開けなきゃわからない
• 新しいソースに切り替わるたびに手動で修正。
• とっちらかる
• Android では V8 のハードウェア支援の有無は Android OS API で検知可能。
libjingle APIでもハードウェア支援を行うオプションが提供。
• ハードウェア支援を行うと特定の機種でエラー発生。
• 結果、とっちらかる
• Android でも H.264を使用できる!
• 使用コーデックがVP8…
• iOSとはプロファイルが違うらしい….
• iOSデバイス同士、Androidデバイス同士ならば H.264でハードウェア支援をうけて楽々。
• iOSデバイスとAndroidデバイスだと VP8 になってしまう…
• やっぱり、とっちらかる

19. 19
まとめ
• libjingle の開発はとてもアグレッシブ。
• アグレッシブすぎて若干無政府状態、もう少し秩序を
• 世紀末救世主 急募。