SlideShare a Scribd company logo
1
WebRTC on Native App
Newphoria Corporation
Development Division
Yoshitake Hatada
2
本セッションでは….
WebRTCプラットフォームSkyWay SDK開発時にご協力した際の
知見、四方山をお話しさせていただきます。
3
プラットフォーム SDK故の難しさ
各OS { iOS | Android }から同様に使える必要がある。
→抽象度の均一化
→性能差の解消(端末ごとのベストエフォート)
→機能的には全方位対応
個別のアプリケーションを開発するよりも、ちょっと 結構厄介。
libjingle Platform 層
4
プラットフォーム SDK レイヤ構造
App 層
SDK 層
libjingle Platform 層
libjingle Core 層 OS 固有層
OS 層
libjingle Platform 層
5
libjingle – Google Talk Voice and P2P Interoperability Libiraty
• C/C++
• STL (but がっつりテンプレートではないのでちょっと安心)
• 2GB++
• Camel と Snake が混在  (かなり改善されたがそれでも…)
• 通信プロトコルは XMPP の拡張
• 基本UDPのみ (Pseudo TCPもあるでよ)
libjingle Platform 層
6
プラットフォーム SDK レイヤ構造
App 層
SDK 層
libjingle Platform 層
libjingle Core 層 OS 固有層
OS 層
(WebSocket/XHR Streamによるシグナリングサーバとの通信、
MessagePack仕様によるデータコネクション通信はlibjingleとは
別実装)
特定のプラットフォーム向けにビルドすることで
WebRTC Native APIsの共通APIを利用を実現する層libjingle Platform 層
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
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
:
:
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
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 です。
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
ローカルからの 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
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
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
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
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
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
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
まとめ
• libjingle の開発はとてもアグレッシブ。
• アグレッシブすぎて若干無政府状態、もう少し秩序を
• 世紀末救世主 急募。

More Related Content

PDF
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
PPTX
WebRTC NextVersion時代のJavaScript開発
PDF
色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用)
PPTX
Webrtc bootcamp handson
PPTX
2013 WebRTC node
PDF
WebRTCで動かす“テレイグジスタンス”ロボット
PDF
5分でわかるWebRTCの仕組み - html5minutes vol.01
PDF
WebRTCの技術解説 第二版 公開版 本編
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
WebRTC NextVersion時代のJavaScript開発
色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用)
Webrtc bootcamp handson
2013 WebRTC node
WebRTCで動かす“テレイグジスタンス”ロボット
5分でわかるWebRTCの仕組み - html5minutes vol.01
WebRTCの技術解説 第二版 公開版 本編

What's hot (15)

PDF
2013 WebRTC 概説 & ワークショップ
PDF
WebRTC入門+最新動向
PDF
スマホ(Android・iPhone)でWebRTC
PDF
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
PPTX
Webrtc最新動向
PDF
WebRTCの技術解説 公開版
PDF
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
PPTX
PeerConnectionリレーとMediaRecorder
PPTX
WebRTC SFU mediasoup sample
PDF
スマートフォンでの WebRTC活用
PPTX
Web of Thingsの現状とWebRTC活用の可能性
PDF
WebRTC/ORTCの最新動向まるわかり!
PDF
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
PPTX
2016 February - WebRTC Conference Japan - 日本語
PPTX
SkyWay Vision & Mission
2013 WebRTC 概説 & ワークショップ
WebRTC入門+最新動向
スマホ(Android・iPhone)でWebRTC
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
Webrtc最新動向
WebRTCの技術解説 公開版
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
PeerConnectionリレーとMediaRecorder
WebRTC SFU mediasoup sample
スマートフォンでの WebRTC活用
Web of Thingsの現状とWebRTC活用の可能性
WebRTC/ORTCの最新動向まるわかり!
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
2016 February - WebRTC Conference Japan - 日本語
SkyWay Vision & Mission
Ad

Similar to WebRTC on Native App (20)

PPTX
SaaS版 Qlik Sense向けPlatform SDKの使い方 TypeScript版とPython版でアプリにアクセス ~ Go言語とNode.j...
PPTX
WebRTC meetup Tokyo 1
PDF
Javaコードが速く実⾏される秘密 - JITコンパイラ⼊⾨(JJUG CCC 2020 Fall講演資料)
PDF
Container Storage Interface のすべて
ODP
130329 04
ODP
20130329 rtm4
PDF
OpenShiftでJBoss EAP構築
PDF
コンテナ未経験新人が学ぶコンテナ技術入門
PDF
JDK Mission Control: Where We Are, Where We Are Going [Groundbreakers APAC 20...
PPTX
Cloudstack user group meeting in osaka
PDF
Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】
PDF
実はアナタの身近にある!? Linux のチェックポイント/レストア機能 (NTT Tech Conference 2025 発表資料)
PDF
Node.jsアプリの開発をモダン化するために取り組んできたこと
ODP
"Up" with vagrant and docker
PDF
Let's begin WebRTC
PPTX
Introduction to Magnum (JP)
PDF
Kubernete Meetup Tokyo #18 - Kubebuilder/controller-runtime 入門
PDF
20130315 abc firefox_os
PPTX
AKS (k8s) Hands on Lab Contents
PDF
cocos2d-xとネイティブ間の連携
SaaS版 Qlik Sense向けPlatform SDKの使い方 TypeScript版とPython版でアプリにアクセス ~ Go言語とNode.j...
WebRTC meetup Tokyo 1
Javaコードが速く実⾏される秘密 - JITコンパイラ⼊⾨(JJUG CCC 2020 Fall講演資料)
Container Storage Interface のすべて
130329 04
20130329 rtm4
OpenShiftでJBoss EAP構築
コンテナ未経験新人が学ぶコンテナ技術入門
JDK Mission Control: Where We Are, Where We Are Going [Groundbreakers APAC 20...
Cloudstack user group meeting in osaka
Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】
実はアナタの身近にある!? Linux のチェックポイント/レストア機能 (NTT Tech Conference 2025 発表資料)
Node.jsアプリの開発をモダン化するために取り組んできたこと
"Up" with vagrant and docker
Let's begin WebRTC
Introduction to Magnum (JP)
Kubernete Meetup Tokyo #18 - Kubebuilder/controller-runtime 入門
20130315 abc firefox_os
AKS (k8s) Hands on Lab Contents
cocos2d-xとネイティブ間の連携
Ad

More from WebRTCConferenceJapan (17)

PDF
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(2)
PDF
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(1)
PDF
The missing signalling layer for WebRTC
PDF
WebRTCが深めるお客様と企業のコミュニケーション
PDF
Global Step Academy のWebRTC活用事例
PDF
WebRTCで実現するオンライン英会話の未来
PDF
WebRTCが切り拓く2020年のIoT
PDF
WebRTCとDialogicとの関わり
PDF
User Experience is Everything
PDF
HTML5 APIと組み合わせて作るWebRTCアプリ
PDF
HTML5 APIと組み合わせて作るWebRTCアプリ
PPT
WebRTC+オセロ
PPTX
大学生により使いやすいIT環境
PDF
WebRTC関連技術の標準化動向
PDF
GENBAND – KANDY Web-enabled Communications
PPTX
The WebRTC Continuum - The Next Wave
PDF
エンタープライズ環境におけるWebRTC活用のポイント
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(2)
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(1)
The missing signalling layer for WebRTC
WebRTCが深めるお客様と企業のコミュニケーション
Global Step Academy のWebRTC活用事例
WebRTCで実現するオンライン英会話の未来
WebRTCが切り拓く2020年のIoT
WebRTCとDialogicとの関わり
User Experience is Everything
HTML5 APIと組み合わせて作るWebRTCアプリ
HTML5 APIと組み合わせて作るWebRTCアプリ
WebRTC+オセロ
大学生により使いやすいIT環境
WebRTC関連技術の標準化動向
GENBAND – KANDY Web-enabled Communications
The WebRTC Continuum - The Next Wave
エンタープライズ環境におけるWebRTC活用のポイント

WebRTC on Native App

  • 1. 1 WebRTC on Native App Newphoria Corporation Development Division Yoshitake Hatada
  • 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 の開発はとてもアグレッシブ。 • アグレッシブすぎて若干無政府状態、もう少し秩序を • 世紀末救世主 急募。