Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

͸͡Ίʹ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

WebRTCͱ͸ʁ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

SkyWayͱ͸ʁ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

࣮૷ϑϩʔ

Slide 27

Slide 27 text

1. ϥΠϒϥϦͷઃఆ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

2. API Keyͷൃߦ

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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ͷ৔߹ʢαϯϓϧͦͷ··࢖༻ʣ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

3. Connectionͷ؅ཧ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

͓·͚. ࣸਅΛૹΔ෦෼

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

σϞ

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

·ͱΊ

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

͋Γ͕ͱ͏͍͟͝·ͨ͠