શͯͷϒϥ΢β͕WebRTCʹର Ԡͨ͠ࠓɺΞϓϦͰWebRTCΛ ࣮૷͢Δҙຯ͸͋Δͷ͔ WebRTC Meetup Osaka #1 2017/08/25 େౡ ޫو@sbntaminif

ࣗݾ঺հ • ΢ΣϒϦΦגࣜձࣾWEBΤϯδχΞ • ΞϓϦΤϯδχΞ
 ʢࣗশʣ • ීஈ͸ژ౎Ͱಇ͍͍ͯ·͢ • WebRTC Meetup Osaka։࠵Λ೤๬͠ɺӡӦͷ͓ ख఻͍Λ͍͍ͤͯͨͩͯ͞·͢ɻ

͸͡Ίʹ

લճͷWebRTC MeetupͰ ൃද͍͖ͤͯͨͩ͞·ͨ͠ɻ https://speakerdeck.com/taminif/ weblioying-hui-hua-to-dong-zuo- tietukuturu-webrtckun ࣮αʔϏεʹಋೖͨ͠࿩΍ӡ༻ͷ࿩Λฉ͖͍ͨํ͸ ͥͻݟͯΈ͍ͯͩ͘͞ɻ(youtube΋͋ΔΑʂ)

ࠓճ͸ॳͷେࡕ։࠵Ͱ͢ͷͰɺ WebRTCͱ͸Կ͔ͱ͍͏࿩͔Β ਐΊ͍ͨͱࢥ͍·͢ʂ

WebRTCͱ͸ʁ

WebRTCͱ͸ • W3C͕ఏএ͢ΔP2PϦΞϧλΠϜίϛϡχ έʔγϣϯΛ࣮ݱ͢Δٕज़ • ϓϥάΠϯͳ͠Ͱϒϥ΢βؒͷ΍ΓͱΓ͕Մ ೳ • ςΩετ΍όΠφϦͳͲͷσʔλܗࣜ΍ө૾ ΍Ի੠ͳͲͷStreamܗࣜͷ΍ΓͱΓ͕Մೳ

͜Ε͸ɺϒϥ΢βͰ ࣮૷͞Ε͍ͯΔٕज़

͡Ό͋ɺݱ࣌఺Ͱͷ ରԠঢ়گ͸ʁ

ϒϥ΢βରԠঢ়گ • Chrome, FireFox, Opera͸ରԠࡁΈ • AndroidͷChromeͰ΋ಈ͖·͢ • Safari͸͜ͷळͷSafari11ͰରԠ༧ఆ • Edge͸य़ʹग़ͨCreators UpdateͰରԠ͞Ε ͍ͯΔʢͨͩ͠ಈ͖͸ඍົʣ IE?ରԠͯ͠ΔΘ͚ͳ͍΍Μ

શͯͷϒϥ΢β͕ WebRTCʹରԠͨ͠

ͦΕ·ͰɺiPhoneͰ WebRTCΛ࢖༻͢ΔͨΊʹ Ͳ͏͍͔ͯͨ͠

iOS༻ͷSDK͕ ഑෍͞Ε͍ͯͨ https://webrtc.org/native-code/ios/

SDKͰରԠ͢ΔҎ֎ͷ ํ๏͸͋Γ·ͤΜͰͨ͠

શͯͷϒϥ΢β͕WebRTC ʹରԠͨ͠(༧ఆ) = ΞϓϦͰ͸ͳ͘ϒϥ΢βͰ ରԠ͢Ε͹ྑ͍

͡Ό͋͜Ε͔Β͸ΞϓϦͰ ࣮૷͢Δඞཁ͸ͳ͍ͷ͔ʁ

͍΍ɺΞϓϦͰ͔͠ Ͱ͖ͳ͍͜ͱ͕͋ΔͷͰ͸ ͳ͍͔ʁ

ΞϓϦͰ͔͠Ͱ͖ͳ͍͜ͱΛ ߟ͑ͯΈΔ • Facebook MessengerͷΑ͏ͳΞϓϦؒ࿈ܞ • Χϝϥ΍ϚΠΫͳͲ֎෦σόΠεͱ௚઀࿈ܞ • ϩάΠϯ৘ใ΍ܾࡁ৘ใͷอ࣋

ͱ͍͏Θ͚Ͱࠓճ͸ • Facebook MessengerͷΑ͏ͳΞϓϦؒ࿈ܞ • Χϝϥ΍ϚΠΫͳͲ֎෦σόΠεͱ௚઀࿈ܞ • ϩάΠϯ৘ใ΍ܾࡁ৘ใͷอ࣋ ͜Εͷ࣮૷ྫΛ 4LZ8BZΛ࢖ͬͯ΍Γ·͢ʂ

iPhoneͰࣸਅΛࡱӨ͠ɺ WebRTCΛ࢖ͬͯผϒϥ΢β ʹૹ৴͢ΔΞϓϦΛ ίʔυͱσϞͰ͓ݟͤ͠·͢

SkyWayͱ͸ʁ

WebRTCΛ؆୯ʹ࣮ݱ͢Δ αʔϏε ొ࿥͢Ε͹ແྉͰ࢖༻Մೳʂ https://nttcom.github.io/skyway/

SkyWayͱ͸ • NTT ίϛϡχέʔγϣϯζ͕ఏڙ͢ΔΫϥ΢ υαʔϏε • WebRTCʹඞཁͳSTUNαʔό΍γάφϦϯά αʔόΛఏڙ͍ͯ͠·͢

JS/iOS/AndroidͦΕͧΕͰ SDKΛఏڙ͍ͯ͠·͢

ΞϓϦ΋࡞੒ՄೳɺϦϦʔε ΋Ͱ͖·͢ https://itunes.apple.com/jp/app/weblio ๏ਓӳձ࿩/id1215209006?mt=8

࣮૷ϑϩʔ

1. ϥΠϒϥϦͷઃఆ

1-1. cocoapodsͰΠϯετʔϧ https://cocoapods.org/pods/SkyWay-iOS-SDK

• pod 'SkyWay-iOS-SDK'
 ͰΠϯετʔϧՄೳ • Objective-cͷϥΠϒϥϦͳͷͰɺBridging- HeaderΛ࢖ͬͯಡΈࠐΉඞཁ͕͋Γ·͢ 1-1. cocoapodsͰΠϯετʔϧ

• ԼهΩϟϓνϟશͯͷϑϨʔϜϫʔΫΛಡΈ ࠐΉඞཁ͕͋Γ·͢ɻ 1-2. ϑϨʔϜϫʔΫͷಡΈࠐΈ

2. API Keyͷൃߦ

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ΦϒδΣΫτؒ Ͱ௨৴͕Ͱ͖·͢ɻ

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 + '
'); } }); // Show this peer's ID. peer.on('open', function(id){ $('#pid').text(id); }); (ྫ)JSͷ৔߹ʢαϯϓϧͦͷ··࢖༻ʣ

ͲͷσόΠε(ݴޠ)Ͱ࡞Δ࣌ ΋ߟ͑ํ͸ಉ͡Ͱ͢

WebRTCͰ௨৴͢Δ·Ͱ "1*,FZΛ࢖༻ͯ͠QFFSΦϒδΣΫτੜ੒ QFFSΦϒδΣΫτΛੜ੒͢ΔͨͼʹQFFS*%͕౉͞ΕΔ QFFS*%Λࢦఆͯ͠௨৴͢Δ૬खΛܾΊΔ σʔλܗ͔ࣜ4USFBNܗࣜͰ΍ΓͱΓ͢Δ͔Ͱ઀ଓํ๏ΛܾΊΔ ௨৴੒ޭ͢Δͱ ͋ͱ͸ͦΕͧΕͰ΍ΓͱΓ

3. Connectionͷ؅ཧ

ࠓճ͸ը૾ͷ௨৴ͳͷͰ dataConnectionΛ࢖༻

WebRTCͱ͸ • W3C͕ఏএ͢ΔP2PϦΞϧλΠϜίϛϡχ έʔγϣϯΛ࣮ݱ͢Δٕज़ • ϓϥάΠϯͳ͠Ͱϒϥ΢βؒͷ΍ΓͱΓ͕Մ ೳ • ςΩετ΍όΠφϦͳͲͷσʔλܗࣜ΍ө૾ ΍Ի੠ͳͲͷStreamܗࣜͷ΍ΓͱΓ͕Մೳ EBUB$POOFDUJPOͱ͸ ͜ͷσʔλΛ΍ΓऔΓ͢ΔͨΊͷΦϒδΣΫτ

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() ૬ख͔Βͷ઀ଓΛ଴ͭ৔߹ ࣗ෼͔Β઀ଓ͢Δ৔߹

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) }) ઀ଓཱ͕֬͞Εͨ࣌ σʔλΛड৴ͨ࣌͠ ઀ଓ͕ด͡ΒΕͨ࣌ Τϥʔ͕ൃੜͨ࣌͠

΋ͪΖΜɺ͜͜΋ JS/iOS/Androidڞ௨Ͱ͢

͓·͚. ࣸਅΛૹΔ෦෼

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) } } σʔλΛૹ৴͢Δ࣌ͷॲཧ ΦϒδΣΫτܕʹ͢Δඞཁ͕͋Γ·͢

σϞ

No content

·ͱΊ

·ͱΊ • WebRTC͜Ε͔ΒͲΜͲΜਐΈͦ͏ʂ • ΞϓϦͰରԠ͢Δඞཁ͸ͳ͍͔΋͠Εͳ͍ʂ • Ͱ΋ΞϓϦͰ͔͠Ͱ͖ͳ͍͜ͱ΋͋Δ(͸ͣʂ)

ࠓճ͸ΞϓϦͷ͓࿩Ͱͨ͠ ͕ɺ࣮ӡ༻͸Web͕΄ͱΜ ͲͰ͢ͷͰɺ࿩Λฉ͖͍ͨ ํ͕͍Βͬ͠Ό͍·ͨ͠Β ͓੠͕͚͍ͩ͘͞ʂ

͋Γ͕ͱ͏͍͟͝·ͨ͠