ビデオ通話アプリのお話

by taminif

Slide 1

Slide 1 text

ϏσΦ௨࿩ΞϓϦͷ͓࿩ Cocoaษڧձؔ੢ #72 2017/04/22 େౡ ޫو@taminif

Slide 2

Slide 2 text

ࣗݾ঺հ • ΢ΣϒϦΦגࣜձࣾWEBΤϯδχΞ • ΞϓϦΤϯδχΞ  ʢࣗশʣ • ࠓ೔ͷͨΊʹ  ͍͖ͭͬ͞൅੾͖ͬͯ·ͨ͠ʂ

Slide 3

Slide 3 text

Weblio ͝ଘ஌Ͱ͔͢ʁ

Slide 4

Slide 4 text

http://ejje.weblio.jp/content/Cocoa?dictCode=WEJTY

Slide 5

Slide 5 text

ΦϯϥΠϯࣙॻΛఏڙ͢Δ WebαʔϏε

Slide 6

Slide 6 text

࣮͸ࣙॻҎ֎ʹ΋ ͜ΜͳαʔϏεΛ΍͍ͬͯ ·͢

Slide 7

Slide 7 text

https://eikaiwa.weblio.jp/

Slide 8

Slide 8 text

ΦϯϥΠϯӳձ࿩αʔϏε

Slide 9

Slide 9 text

Skypeӳձ࿩ͱݴ͑͹ ฉ͍ͨ͜ͱ͋Δํ΋ ଟ͍ͷͰ͸ͳ͍Ͱ͠ΐ͏͔

Slide 10

Slide 10 text

ͦΜͳWeblioӳձ࿩Ͱ͕͢

Slide 11

Slide 11 text

஫໨ʂ

Slide 12

Slide 12 text

3݄1೔ΑΓɺWebRTCΛ ࢖༻ͨ͠Ϩοεϯʹ Ҡߦ͠·ͨ͠ɻ

Slide 13

Slide 13 text

WebRTCͱ͸ • W3C͕ఏএ͢ΔP2PϦΞϧλΠϜίϛϡχέʔ γϣϯΛ࣮ݱ͢Δٕज़ • ϓϥάΠϯͳ͠Ͱϒϥ΢βؒͷ΍ΓͱΓ͕Մೳ • ຊ೔͸࢓૊Έʹ͍ͭͯ͸ৄ͘͠΍Γ·ͤΜʂ ->αʔό͕ඞཁͰ೉ͦ͠͏ʹݟ͑·͕͢  ͜ΕΒΛఏڙ͢ΔαʔϏε͕͋Γ·͢ʂ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

֤ϒϥ΢βରԠঢ়گʢPCʣ • Google Chrome • Firefox • Opera • Edge(Creators UpdateͰରԠ༧ఆ) • Safari(ରԠத) ※࠷৽όʔδϣϯΛର৅

Slide 16

Slide 16 text

֤ϒϥ΢βରԠঢ়گʢεϚϗʣ • Android  -> ChromeରԠࡁΈʢͦͷଞະݕূʣ • iOS  -> ඇରԠɾɾɾ

Slide 17

Slide 17 text

iPhone΍iPadͰ͸ Weblioӳձ࿩͕࢖͑ͳ͍

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

࿩͸มΘͬͯɺ Weblioӳձ࿩͸ֶߍ΍ اۀʹ΋ఏڙ͍ͯ͠·͢

Slide 20

Slide 20 text

·ͨɺֶߍͷதʹ͸ iPadΛतۀʹ࢖༻͢Δॴ΋ ૿͖͑ͯ·ͨ͠

Slide 21

Slide 21 text

ʮWeblioӳձ࿩ΛiPadͰ ࢖༻Ͱ͖ͳ͍ʁʯ

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

͔͜͜Β͕ຊ୊Ͱ͢

Slide 24

Slide 24 text

ʮiOSΞϓϦʹWebRTCΛ ࣮૷ͨ͠࿩ʯ

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

SkyWayΛ࢖ͬͯ ϏσΦΞϓϦΛ࣮૷ͨ͠ ஌ݟΛڞ༗͠·͢

Slide 28

Slide 28 text

1. ಋೖฤ

Slide 29

Slide 29 text

ωΠςΟϒΞϓϦ༻ͷ SDKΛ௥Ճ͠·͢

Slide 30

Slide 30 text

ެ͔ࣜΒϥΠϒϥϦ͕഑෍ https://webrtc.org/native-code/ios/

Slide 31

Slide 31 text

SkyWayͰ΋ϥΠϒϥϦ͕഑෍ ʢϥοϐϯάͨ͠ϥΠϒϥϦʣ https://nttcom.github.io/skyway/documentation.html

Slide 32

Slide 32 text

SkyWay iOS SDK • αΠτ͔Βμ΢ϯϩʔυ  or GithubͰclone  or CocoaPodsͰΠϯετʔϧ • Objective-CͰॻ͔Ε͍ͯΔͷͰ  Bridging-HeaderΛ௥Ճͯ͠ಡΈࠐΈ

Slide 33

Slide 33 text

ͦͷଞɺ͍͔ͭ͘ frameworkΛಡΈࠐΉඞཁ ͕͋Γ·ׂ͕͢Ѫ ʢެࣜͷυΩϡϝϯτࢀরʣ

Slide 34

Slide 34 text

2. νϟωϧฤ

Slide 35

Slide 35 text

ೋͭͷνϟωϧ • ϝσΟΞνϟωϧ  ө૾΍Ի੠ͷStreamΛ΍ΓͱΓ͢Δνϟωϧ • σʔλνϟωϧ  ςΩετ΍όΠφϦ౳σʔλΛ΍ΓͱΓ͢Δ νϟωϧ

Slide 36

Slide 36 text

SkyWayͰ͸ mediaConnectionΫϥεͱ dataConnectionΫϥε

Slide 37

Slide 37 text

Connectionʹ Stream΍σʔλΛ౉ͯ͠ ΍ΓͱΓ͠·͢

Slide 38

Slide 38 text

ϏσΦ௨࿩ʹ͸ϝσΟΞνϟ ωϧΛ࢖༻͠·͢

Slide 39

Slide 39 text

mediaConnection // ૬खͷϝσΟΞνϟωϧΛड͚औΔCALLBACKΛઃఆ peer?.on(SKWPeerEventEnum.PEER_EVENT_CALL, callback: {(obj) -> Void in let mediaConnection:SKWMediaConnection = obj as! SKWMediaConnection mediaConnection.answer(self.localMediaStream) }) ※্هҎ֎ʹ΋peer.callWithId(callId, localStream)Ͱ૬खʹͭͳ͙͜ͱ͕Ͱ͖Δ

Slide 40

Slide 40 text

mediaConnectionʹ localStreamΛ౉͠ remoteStreamΛ ड͚औΓ·͢

Slide 41

Slide 41 text

localStreamΛऔಘ // peerΠχγϟϥΠζ SKWNavigator.initialize(peer) // constraintsઃఆ let constraints:SKWMediaConstraints = SKWMediaConstraints.init() // ΧϝϥϞʔυઃఆ constraints.cameraMode = .CAMERA_MODE_ADJUSTABLE // ΧϝϥͷҐஔઃఆ constraints.cameraPosition = .CAMERA_POSITION_FRONT // localMediaStreamऔಘ localMediaStream = SKWNavigator.getUserMedia(constraints)

Slide 42

Slide 42 text

remoteStreamΛऔಘ // MediaConnectionͷCALLBACKΛઃఆ mediaConnection.on(SKWMediaConnectionEventEnum.MEDIACONNECTION_EVENT _STREAM, callback: {(obj) -> Void in self.remoteMediaStream = obj as? SKWMediaStream DispatchQueue.global(qos: .default).async { let remoteVideo:SKWVideo = self.view.viewWithTag(1002) as! SKWVideo remoteVideo.isUserInteractionEnabled = true remoteVideo.addSrc(self.remoteMediaStream, track: 0) } })

Slide 43

Slide 43 text

΍͓ͬͯ͘͜ͱ

Slide 44

Slide 44 text

ΧϝϥͱϚΠΫͷڐՄΛऔΔ • Info.plistʹઆ໌จΛ༻ҙ͢Δ • ༻ҙͨ͠จ͕σόΠεڐՄऔಘ࣌ʹදࣔ͞ΕΔ • NSCameraUsageDescription • NSMicrophoneUsageDescription • ΧϝϥͱϚΠΫͷڐՄΛऔΔ • AVCaptureDevice • Χϝϥ͕࢖༻ෆՄͩͱgetUserMedia͕ࣦഊ͢Δ͕ɺ  ϚΠΫ͕࢖༻ෆՄͰ΋getUserMedia͸ࣦഊ͠ͳ͍ • ϚΠΫσόΠεͷ੾Γସ͑͸Ͱ͖ͳ͍

Slide 45

Slide 45 text

σόΠεڐՄऔಘ let cameraStatus = AVCaptureDevice.authorizationStatus(forMediaType: AVMediaTypeVideo) switch (cameraStatus) { case .authorized: // ࢖༻Մೳ case .restricted, .notDetermined: // ࢖༻ڐՄ AVCaptureDevice.requestAccess(forMediaType: AVMediaTypeVideo, completionHandler: {(granted: Bool) in // OK or CancelͰgrantedͷBool͕มΘΔ }) break case .denied: // ࢖༻ෆՄ break }

Slide 46

Slide 46 text

3. ϋϚͬͨ͜ͱฤ

Slide 47

Slide 47 text

ϋϚͬͨ͜ͱ A. localMediaStream͕औΕͳ͍ B. remoteMediaStream͕өΒͳ͍ C. ϑϨʔϜϨʔτ͕มߋͰ͖ͳ͍

Slide 48

Slide 48 text

A. localMediaStream͕औΕͳ͍

Slide 49

Slide 49 text

localStream͕औΕͳ͍ // peerΠχγϟϥΠζ SKWNavigator.initialize(peer) // constraintsઃఆ let constraints:SKWMediaConstraints = SKWMediaConstraints.init() // ΧϝϥϞʔυઃఆ constraints.cameraMode = .CAMERA_MODE_ADJUSTABLE // ΧϝϥͷҐஔઃఆ constraints.cameraPosition = .CAMERA_POSITION_FRONT // localMediaStreamऔಘ localMediaStream = SKWNavigator.getUserMedia(constraints) 4USFBNܗࣜͰऔಘ͸Ͱ͖Δ͚Ͳ ࣗ෼ͷө૾͕දࣔ͞Εͳ͔ͬͨ ౰ॳ͜ͷ෦෼ͷهड़͕ൈ͚͍ͯͨ

Slide 50

Slide 50 text

Slide 51

Slide 51 text

B. remoteMediaStream͕өΒͳ͍

Slide 52

Slide 52 text

remoteMediaStream͕өΒͳ͍ // MediaConnectionͷCALLBACKΛઃఆ mediaConnection.on(SKWMediaConnectionEventEnum.MEDIACONNECTION_EVENT _STREAM, callback: {(obj) -> Void in self.remoteMediaStream = obj as? SKWMediaStream DispatchQueue.global(qos: .default).async { let remoteVideo:SKWVideo = self.view.viewWithTag(1002) as! SKWVideo remoteVideo.isUserInteractionEnabled = true remoteVideo.addSrc(self.remoteMediaStream, track: 0) } }) ૬ख͔ΒૹΒΕ͍ͯΔ͸ͣͷө ૾͕өΒͳ͔ͬͨ

Slide 53

Slide 53 text

Slide 54

Slide 54 text

C. ϑϨʔϜϨʔτ͕มߋͰ͖ͳ͍

Slide 55

Slide 55 text

ܦҢ • ϏσΦ௨࿩Λߦ͏ʹ͸ɺܭࢉ্ԼهͷଳҬ͕ ඞཁʢ1ΫϥΠΞϯτʣ  Ի੠ɿ500Kbps  ө૾ɿ2Mbps • ʢಛʹʣֶߍͩͱڞ༗ωοτϫʔΫͷͨΊɺ  1ΫϥεͰडߨ͢Δͱ஗Ԇ͕ଟ͘ൃੜͨ͠

Slide 56

Slide 56 text

ʮ࢖༻ଳҬΛݮΒͤͳ͍ʁʯ

Slide 57

Slide 57 text

ௐࠪ͢Δ΋ SkyWayͷυΩϡϝϯτʹ ͸هࡌͳ͠ɾɾɾ

Slide 58

Slide 58 text

͔͠͠ʂ

Slide 59

Slide 59 text

SKMediaConstraintsͷ ϓϩύςΟʹ maxFrameRate͕ ͋Γ·ͨ͠ʂ

Slide 60

Slide 60 text

࢖͑·ͤΜͰͨ͠

Slide 61

Slide 61 text

ެࣜͰඇରԠͱճ౴͞Ε͍ͯ·ͨ͠ https://support.skyway.io/hc/ja/community/posts/115000352647-ϑϨʔϜϨʔτͷมߋ͕൓ө͞Ε·ͤΜ

Slide 62

Slide 62 text

ϝδϟʔόʔδϣϯͰ ରԠ͞ΕΔ͜ͱΛ ظ଴͍ͨ͠Ͱ͢ʂ

Slide 63

Slide 63 text

·ͱΊ

Slide 64

Slide 64 text

·ͱΊ • iOSͰϏσΦ௨࿩ΞϓϦ͸ҙ֎ͱ؆୯ʹ࡞ΕΔ • ҙ֎ͱ͋ͬ͞Γ৹ࠪ΋௨Δ • ϒϥ΢β <-> ΞϓϦؒ΋࢖༻Մೳ • WebRTC͸ଟछଟ༷ͳ༻్͕͋Δʂ