全てのブラウザがWebRTCに対応した今、アプリでWebRTCを実装する意味はあるのか

WebRTC Meetup Osaka #1の発表資料です。

Transcript

1. શͯͷϒϥ΢β͕WebRTCʹର Ԡͨ͠ࠓɺΞϓϦͰWebRTCΛ ࣮૷͢Δҙຯ͸͋Δͷ͔ WebRTC Meetup Osaka #1 2017/08/25 େౡ ޫو@sbntaminif
2. ࣗݾ঺հ • ΢ΣϒϦΦגࣜձࣾWEBΤϯδχΞ • ΞϓϦΤϯδχΞ
 ʢࣗশʣ • ීஈ͸ژ౎Ͱಇ͍͍ͯ·͢ • WebRTC Meetup Osaka։࠵Λ೤๬͠ɺӡӦͷ͓ ख఻͍Λ͍͍ͤͯͨͩͯ͞·͢ɻ
3. ͸͡Ίʹ
4. લճͷWebRTC MeetupͰ ൃද͍͖ͤͯͨͩ͞·ͨ͠ɻ https://speakerdeck.com/taminif/ weblioying-hui-hua-to-dong-zuo- tietukuturu-webrtckun ࣮αʔϏεʹಋೖͨ͠࿩΍ӡ༻ͷ࿩Λฉ͖͍ͨํ͸ ͥͻݟͯΈ͍ͯͩ͘͞ɻ(youtube΋͋ΔΑʂ)
5. ࠓճ͸ॳͷେࡕ։࠵Ͱ͢ͷͰɺ WebRTCͱ͸Կ͔ͱ͍͏࿩͔Β ਐΊ͍ͨͱࢥ͍·͢ʂ
6. WebRTCͱ͸ʁ
7. WebRTCͱ͸ • W3C͕ఏএ͢ΔP2PϦΞϧλΠϜίϛϡχ έʔγϣϯΛ࣮ݱ͢Δٕज़ • ϓϥάΠϯͳ͠Ͱϒϥ΢βؒͷ΍ΓͱΓ͕Մ ೳ • ςΩετ΍όΠφϦͳͲͷσʔλܗࣜ΍ө૾ ΍Ի੠ͳͲͷStreamܗࣜͷ΍ΓͱΓ͕Մೳ
8. ͜Ε͸ɺϒϥ΢βͰ ࣮૷͞Ε͍ͯΔٕज़
9. ͡Ό͋ɺݱ࣌఺Ͱͷ ରԠঢ়گ͸ʁ
10. ϒϥ΢βରԠঢ়گ • Chrome, FireFox, Opera͸ରԠࡁΈ • AndroidͷChromeͰ΋ಈ͖·͢ • Safari͸͜ͷळͷSafari11ͰରԠ༧ఆ • Edge͸य़ʹग़ͨCreators UpdateͰରԠ͞Ε ͍ͯΔʢͨͩ͠ಈ͖͸ඍົʣ IE?ରԠͯ͠ΔΘ͚ͳ͍΍Μ
11. શͯͷϒϥ΢β͕ WebRTCʹରԠͨ͠
12. ͦΕ·ͰɺiPhoneͰ WebRTCΛ࢖༻͢ΔͨΊʹ Ͳ͏͍͔ͯͨ͠
13. iOS༻ͷSDK͕ ഑෍͞Ε͍ͯͨ https://webrtc.org/native-code/ios/
14. SDKͰରԠ͢ΔҎ֎ͷ ํ๏͸͋Γ·ͤΜͰͨ͠
15. શͯͷϒϥ΢β͕WebRTC ʹରԠͨ͠(༧ఆ) = ΞϓϦͰ͸ͳ͘ϒϥ΢βͰ ରԠ͢Ε͹ྑ͍
16. ͡Ό͋͜Ε͔Β͸ΞϓϦͰ ࣮૷͢Δඞཁ͸ͳ͍ͷ͔ʁ
17. ͍΍ɺΞϓϦͰ͔͠ Ͱ͖ͳ͍͜ͱ͕͋ΔͷͰ͸ ͳ͍͔ʁ
18. ΞϓϦͰ͔͠Ͱ͖ͳ͍͜ͱΛ ߟ͑ͯΈΔ • Facebook MessengerͷΑ͏ͳΞϓϦؒ࿈ܞ • Χϝϥ΍ϚΠΫͳͲ֎෦σόΠεͱ௚઀࿈ܞ • ϩάΠϯ৘ใ΍ܾࡁ৘ใͷอ࣋
19. ͱ͍͏Θ͚Ͱࠓճ͸ • Facebook MessengerͷΑ͏ͳΞϓϦؒ࿈ܞ • Χϝϥ΍ϚΠΫͳͲ֎෦σόΠεͱ௚઀࿈ܞ • ϩάΠϯ৘ใ΍ܾࡁ৘ใͷอ࣋ ͜Εͷ࣮૷ྫΛ
    4LZ8BZΛ࢖ͬͯ΍Γ·͢ʂ
20. iPhoneͰࣸਅΛࡱӨ͠ɺ WebRTCΛ࢖ͬͯผϒϥ΢β ʹૹ৴͢ΔΞϓϦΛ ίʔυͱσϞͰ͓ݟͤ͠·͢
21. SkyWayͱ͸ʁ
22. WebRTCΛ؆୯ʹ࣮ݱ͢Δ αʔϏε ొ࿥͢Ε͹ແྉͰ࢖༻Մೳʂ https://nttcom.github.io/skyway/
23. SkyWayͱ͸ • NTT ίϛϡχέʔγϣϯζ͕ఏڙ͢ΔΫϥ΢ υαʔϏε • WebRTCʹඞཁͳSTUNαʔό΍γάφϦϯά αʔόΛఏڙ͍ͯ͠·͢
24. JS/iOS/AndroidͦΕͧΕͰ SDKΛఏڙ͍ͯ͠·͢
25. ΞϓϦ΋࡞੒ՄೳɺϦϦʔε ΋Ͱ͖·͢ https://itunes.apple.com/jp/app/weblio ๏ਓӳձ࿩/id1215209006?mt=8
26. ࣮૷ϑϩʔ
27. 1. ϥΠϒϥϦͷઃఆ
28. 1-1. cocoapodsͰΠϯετʔϧ https://cocoapods.org/pods/SkyWay-iOS-SDK
29. • pod 'SkyWay-iOS-SDK'
 ͰΠϯετʔϧՄೳ • Objective-cͷϥΠϒϥϦͳͷͰɺBridging- HeaderΛ࢖ͬͯಡΈࠐΉඞཁ͕͋Γ·͢ 1-1. cocoapodsͰΠϯετʔϧ
30. • ԼهΩϟϓνϟશͯͷϑϨʔϜϫʔΫΛಡΈ ࠐΉඞཁ͕͋Γ·͢ɻ 1-2. ϑϨʔϜϫʔΫͷಡΈࠐΈ
31. 2. API Keyͷൃߦ
32. API KeyΛ࢖༻ͯ͠Πϯελ ϯεΛ࡞੒͠·͢ let options: SKWPeerOption = SKWPeerOption.init() options.key = "79f76a5d-b1b9-4c4f-9e0d-d5713edd9e31" options.domain = "XXXX.XXXX.ne.jp" peer = SKWPeer.init(options: options) peer?.on(SKWPeerEventEnum.PEER_EVENT_OPEN, callback: {(obj) -> Void in if let ownId = obj as? String { self.ownId = ownId } else { print("error") } }) ͜ͷQFFSΦϒδΣΫτΛ ࢖ͬͯ$POOFDUJPOΛ࡞ Γ·͢ ಉҰͷ"1*
    ,FZͰ࡞੒͞ ΕͨQFFSΦϒδΣΫτؒ Ͱ௨৴͕Ͱ͖·͢ɻ
33. API Keyͷ࢖͍ํ͸JS/iOS/ Androidશͯಉ͡Ͱ͢ // Connect to PeerJS, have server assign an ID instead of providing one // Showing off some of the configs available with PeerJS :). var peer = new Peer({ // Set API key for cloud server (you don't need this if you're running your // own. key: '79f76a5d-b1b9-4c4f-9e0d-d5713edd9e31', // Set highest debug level (log everything!). debug: 3, // Set a logging function: logFunction: function() { var copy = Array.prototype.slice.call(arguments).join(' '); $('.log').append(copy + '<br>'); } }); // Show this peer's ID. peer.on('open', function(id){ $('#pid').text(id); }); (ྫ)JSͷ৔߹ʢαϯϓϧͦͷ··࢖༻ʣ
34. ͲͷσόΠε(ݴޠ)Ͱ࡞Δ࣌ ΋ߟ͑ํ͸ಉ͡Ͱ͢
35. WebRTCͰ௨৴͢Δ·Ͱ "1*
    ,FZΛ࢖༻ͯ͠QFFSΦϒδΣΫτੜ੒
    QFFSΦϒδΣΫτΛੜ੒͢ΔͨͼʹQFFS*%͕౉͞ΕΔ QFFS*%Λࢦఆͯ͠௨৴͢Δ૬खΛܾΊΔ
    σʔλܗ͔ࣜ4USFBNܗࣜͰ΍ΓͱΓ͢Δ͔Ͱ઀ଓํ๏ΛܾΊΔ ௨৴੒ޭ͢Δͱ
    ͋ͱ͸ͦΕͧΕͰ΍ΓͱΓ
36. 3. Connectionͷ؅ཧ
37. ࠓճ͸ը૾ͷ௨৴ͳͷͰ dataConnectionΛ࢖༻
38. WebRTCͱ͸ • W3C͕ఏএ͢ΔP2PϦΞϧλΠϜίϛϡχ έʔγϣϯΛ࣮ݱ͢Δٕज़ • ϓϥάΠϯͳ͠Ͱϒϥ΢βؒͷ΍ΓͱΓ͕Մ ೳ • ςΩετ΍όΠφϦͳͲͷσʔλܗࣜ΍ө૾ ΍Ի੠ͳͲͷStreamܗࣜͷ΍ΓͱΓ͕Մೳ EBUB$POOFDUJPOͱ͸
    ͜ͷσʔλΛ΍ΓऔΓ͢ΔͨΊͷΦϒδΣΫτ
39. dataConnectionͷੜ੒ peer?.on(SKWPeerEventEnum.PEER_EVENT_CONNECTION, callback: {(obj) -> Void in self.dataConnection = obj as? SKWDataConnection self.setDataConnection() }) let options: SKWConnectOption = SKWConnectOption.init() options.label = "file" self.dataConnection = peer.connect(withId: connectId, options: options) self.setDataConnection() ૬ख͔Βͷ઀ଓΛ଴ͭ৔߹ ࣗ෼͔Β઀ଓ͢Δ৔߹
40. dataConnectionͷΠϕϯτ؅ཧ dataConnection.on(SKWDataConnectionEventEnum.DATACONNECTION_EVENT_OP EN, callback: {(obj) -> Void in print(obj) }) dataConnection.on(SKWDataConnectionEventEnum.DATACONNECTION_EVENT_DA TA, callback: {(obj) -> Void in print(obj) }) dataConnection.on(SKWDataConnectionEventEnum.DATACONNECTION_EVENT_CL OSE, callback: {(obj) -> Void in print(obj) }) dataConnection.on(SKWDataConnectionEventEnum.DATACONNECTION_EVENT_ER ROR, callback: {(obj) -> Void in print(obj) }) ઀ଓཱ͕֬͞Εͨ࣌ σʔλΛड৴ͨ࣌͠ ઀ଓ͕ด͡ΒΕͨ࣌ Τϥʔ͕ൃੜͨ࣌͠
41. ΋ͪΖΜɺ͜͜΋ JS/iOS/Androidڞ௨Ͱ͢
42. ͓·͚. ࣸਅΛૹΔ෦෼
43. WebRTC͋·Γؔ܎ͳ͍ͷͰ ͞Βͬͱ func capture(_ captureOutput: AVCapturePhotoOutput, didFinishProcessingPhotoSampleBuffer photoSampleBuffer: CMSampleBuffer?, previewPhotoSampleBuffer: CMSampleBuffer?, resolvedSettings: AVCaptureResolvedPhotoSettings, bracketSettings: AVCaptureBracketedStillImageSettings?, error: Error?) { if let photoSampleBuffer = photoSampleBuffer { // JPEGܗࣜͰը૾σʔλΛऔಘ let photoData = AVCapturePhotoOutput.jpegPhotoDataRepresentation(forJPEGSampleBuffer: photoSampleBuffer, previewPhotoSampleBuffer: previewPhotoSampleBuffer) let image = UIImage(data: photoData!) let imageData = UIImageJPEGRepresentation(image!, 1) let result = self.dataConnection?.send(imageData as! NSObject) print(result) } else { print(error) } } σʔλΛૹ৴͢Δ࣌ͷॲཧ
    ΦϒδΣΫτܕʹ͢Δඞཁ͕͋Γ·͢
44. σϞ
46. ·ͱΊ
47. ·ͱΊ • WebRTC͜Ε͔ΒͲΜͲΜਐΈͦ͏ʂ • ΞϓϦͰରԠ͢Δඞཁ͸ͳ͍͔΋͠Εͳ͍ʂ • Ͱ΋ΞϓϦͰ͔͠Ͱ͖ͳ͍͜ͱ΋͋Δ(͸ͣʂ)
48. ࠓճ͸ΞϓϦͷ͓࿩Ͱͨ͠ ͕ɺ࣮ӡ༻͸Web͕΄ͱΜ ͲͰ͢ͷͰɺ࿩Λฉ͖͍ͨ ํ͕͍Βͬ͠Ό͍·ͨ͠Β ͓੠͕͚͍ͩ͘͞ʂ
49. ͋Γ͕ͱ͏͍͟͝·ͨ͠