Programmable Video Fundamentals

2. Programmable Video Fundamentals 1. Video Apps & WebRTC 2. Programmable Video 3. Basic Multiparty Video Chat 4. Access Tokens & Room Security 5. REST API & Status Callbacks 6. Production Check-list © 2017 TWILIO, INC. ALL RIGHTS RESERVED.

13. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS WebRTC • Specification for real-time communication • WebRTC’s core API is the RTCPeerConnection © 2017 TWILIO, INC. ALL RIGHTS RESERVED.

15. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS WebRTC • Specification for real-time communication • WebRTC’s core API is the RTCPeerConnection • But not just browsers—mobile, desktop, embedded, etc. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.

17. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS WebRTC • Twilio built its Programmable Voice SDKs in part using WebRTC. • Twilio’s Programmable Video SDKs also make use of WebRTC. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.

18. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS WebRTC • Twilio built its Programmable Voice SDKs in part using WebRTC. • Twilio’s Programmable Video SDKs also make use of WebRTC. • 6.2 billion WebRTC-enabled devices forecasted by end of 2018 © 2017 TWILIO, INC. ALL RIGHTS RESERVED.

64. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. • sid • name • connect() • disconnect() • participants • “participantConnected” • “participantDisconnected” • sid • identity • tracks • addTrack() • removeTrack() • “trackAdded” • “trackRemoved” • sid • kind • isEnabled • enable() • disable() • “trackEnabled” • “trackDisabled” Room Participant Track

89. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. JAVASCRIPT

90. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. const { connect, createLocalTracks } = require(‘twilio-video’) JAVASCRIPT

91. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. const { connect, createLocalTracks } = require(‘twilio-video’) // 1. Acquire LocalTracks const tracks = await createLocalTracks({ audio: true, video: true }) JAVASCRIPT

93. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. const { connect, createLocalTracks } = require(‘twilio-video’) // 1. Acquire LocalTracks const tracks = await createLocalTracks({ audio: { deviceId: ‘xxx’ }, video: true }) JAVASCRIPT

94. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. const { connect, createLocalTracks } = require(‘twilio-video’) // 1. Acquire LocalTracks const tracks = await createLocalTracks({ audio: { deviceId: ‘xxx’ }, video: { width: 640, height: 480, frameRate: 60 } }) JAVASCRIPT

96. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. const { connect, createLocalTracks } = require(‘twilio-video’) // 1. Acquire LocalTracks const tracks = await createLocalTracks({ audio: true, video: true }) // 2. Connect to a Room JAVASCRIPT

97. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. const { connect, createLocalTracks } = require(‘twilio-video’) // 1. Acquire LocalTracks const tracks = await createLocalTracks({ audio: true, video: true }) // 2. Connect to a Room const room = await connect(token, { tracks }) JAVASCRIPT

98. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. const { connect, createLocalTracks } = require(‘twilio-video’) // 1. Acquire LocalTracks const tracks = await createLocalTracks({ audio: true, video: true }) // 2. Connect to a Room const room = await connect(token, { name: ‘My Cool Room’, tracks }) JAVASCRIPT

99. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. const { connect, createLocalTracks } = require(‘twilio-video’) // 1. Acquire LocalTracks const tracks = await createLocalTracks({ audio: true, video: true }) // 2. Connect to a Room const room = await connect(token, { name: ‘My Cool Room’, logLevel: ‘debug’, tracks }) JAVASCRIPT

100. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. const { connect, createLocalTracks } = require(‘twilio-video’) // 1. Acquire LocalTracks const tracks = await createLocalTracks({ audio: true, video: true }) // 2. Connect to a Room const room = await connect(token, { name: ‘My Cool Room’, logLevel: ‘debug’, iceServers: [ /* … */ ], tracks }) JAVASCRIPT

101. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. const { connect, createLocalTracks } = require(‘twilio-video’) // 1. Acquire LocalTracks const tracks = await createLocalTracks({ audio: true, video: true }) // 2. Connect to a Room const room = await connect(token, { tracks }) JAVASCRIPT

102. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. const { connect, createLocalTracks } = require(‘twilio-video’) // 1. Acquire LocalTracks const tracks = await createLocalTracks({ audio: true, video: true }) // 2. Connect to a Room const room = await connect(token, { tracks }) const { name, sid } = room JAVASCRIPT

103. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. const { connect, createLocalTracks } = require(‘twilio-video’) // 1. Acquire LocalTracks const tracks = await createLocalTracks({ audio: true, video: true }) // 2. Connect to a Room const room = await connect(token, { tracks }) const { name, sid } = room console.log(‘Connected to “%s” (%s)’, name, sid) JAVASCRIPT

104. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. const { connect, createLocalTracks } = require(‘twilio-video’) // 1. Acquire LocalTracks const tracks = await createLocalTracks({ audio: true, video: true }) // 2. Connect to a Room const room = await connect(token, { tracks }) const { name, sid } = room console.log(‘Connected to “%s” (%s)’, name, sid) addRoomView(room) JAVASCRIPT

105. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. // 3. Handle Participants room.participants.forEach(handleParticipant) room.on(‘participantConnected’, handleParticipant) function handleParticipant(participant) { const { identity } = participant console.log(‘%s connected’, identity) participant.on(‘disconnected’, () => { // Cleanup whatever UI component we created // for the Participant. console.log(‘%s disconnected’, identity) }) // … } JAVASCRIPT

111. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. // 3. Handle Participants room.participants.forEach(handleParticipant) room.on(‘participantConnected’, handleParticipant) function handleParticipant(participant) { } JAVASCRIPT

112. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. // 3. Handle Participants room.participants.forEach(handleParticipant) room.on(‘participantConnected’, handleParticipant) function handleParticipant(participant) { const { identity, sid } = participant } JAVASCRIPT

113. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. // 3. Handle Participants room.participants.forEach(handleParticipant) room.on(‘participantConnected’, handleParticipant) function handleParticipant(participant) { const { identity, sid } = participant console.log(‘%s (%s) connected’, identity, sid) } JAVASCRIPT

114. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. // 3. Handle Participants room.participants.forEach(handleParticipant) room.on(‘participantConnected’, handleParticipant) function handleParticipant(participant) { const { identity, sid } = participant console.log(‘%s (%s) connected’, identity, sid) addParticipantView(participant) } JAVASCRIPT

115. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. // 3. Handle Participants room.participants.forEach(handleParticipant) room.on(‘participantConnected’, handleParticipant) function handleParticipant(participant) { const { identity, sid } = participant console.log(‘%s (%s) connected’, identity, sid) addParticipantView(participant) participant.once(‘disconnected’, () => { console.log(‘%s disconnected’, identity) }) } JAVASCRIPT

116. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. // 3. Handle Participants room.participants.forEach(handleParticipant) room.on(‘participantConnected’, handleParticipant) function handleParticipant(participant) { const { identity, sid } = participant console.log(‘%s (%s) connected’, identity, sid) addParticipantView(participant) participant.once(‘disconnected’, () => { console.log(‘%s disconnected’, identity) }) } JAVASCRIPT

117. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. // 3. Handle Participants room.participants.forEach(handleParticipant) room.on(‘participantConnected’, handleParticipant) function handleParticipant(participant) { const { identity, sid } = participant console.log(‘%s (%s) connected’, identity, sid) addParticipantView(participant) participant.once(‘disconnected’, () => { console.log(‘%s disconnected’, identity) removeParticipantView(participant) }) } JAVASCRIPT

118. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. // 3. Handle Participants room.participants.forEach(handleParticipant) room.on(‘participantConnected’, handleParticipant) function handleParticipant(participant) { const { identity, sid } = participant console.log(‘%s (%s) connected’, identity, sid) addParticipantView(participant) participant.once(‘disconnected’, () => { console.log(‘%s disconnected’, identity) removeParticipantView(participant) }) // 4. Handle Participants’ Tracks } JAVASCRIPT

119. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. // 3. Handle Participants room.participants.forEach(handleParticipant) room.on(‘participantConnected’, handleParticipant) function handleParticipant(participant) { const { identity, sid } = participant console.log(‘%s (%s) connected’, identity, sid) addParticipantView(participant) participant.once(‘disconnected’, () => { console.log(‘%s disconnected’, identity) removeParticipantView(participant) }) // 4. Handle Participants’ Tracks participant.tracks.forEach(handleTrackAdded) } JAVASCRIPT

120. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. // 3. Handle Participants room.participants.forEach(handleParticipant) room.on(‘participantConnected’, handleParticipant) function handleParticipant(participant) { const { identity, sid } = participant console.log(‘%s (%s) connected’, identity, sid) addParticipantView(participant) participant.once(‘disconnected’, () => { console.log(‘%s disconnected’, identity) removeParticipantView(participant) }) // 4. Handle Participants’ Tracks participant.tracks.forEach(handleTrackAdded) participant.on(‘trackAdded’, handleTrackAdded) } JAVASCRIPT

121. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. // 3. Handle Participants room.participants.forEach(handleParticipant) room.on(‘participantConnected’, handleParticipant) function handleParticipant(participant) { // … // 4. Handle Participants’ Tracks participant.tracks.forEach(handleTrackAdded) participant.on(‘trackAdded’, handleTrackAdded) } JAVASCRIPT

122. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. // 3. Handle Participants room.participants.forEach(handleParticipant) room.on(‘participantConnected’, handleParticipant) function handleParticipant(participant) { // … // 4. Handle Participants’ Tracks participant.tracks.forEach(handleTrackAdded) participant.on(‘trackAdded’, handleTrackAdded) participant.on(‘trackRemoved’, handleTrackRemoved) } JAVASCRIPT

125. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. function handleTrackAdded(track) { const videoElement = track.attach(); videoElement.id = ‘track-‘ track.id; document.body.appendChild(videoElement); } function handleTrackRemoved(track) { const videoElements = track.detach(); videoElements.forEach(videoElement => { videoElement.remove(); });  } JAVASCRIPT

126. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. function handleTrackAdded(track) { const videoElement = track.attach() } function handleTrackRemoved(track) { const videoElements = track.detach(); videoElements.forEach(videoElement => { videoElement.remove(); });  } JAVASCRIPT

127. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. function handleTrackAdded(track) { const videoElement = track.attach() videoElement.id = ‘track-‘ track.id } function handleTrackRemoved(track) { const videoElements = track.detach(); videoElements.forEach(videoElement => { videoElement.remove(); });  } JAVASCRIPT

128. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. function handleTrackAdded(track) { const videoElement = track.attach() videoElement.id = ‘track-‘ track.id document.body.appendChild(videoElement) } function handleTrackRemoved(track) { const videoElements = track.detach(); videoElements.forEach(videoElement => { videoElement.remove(); });  } JAVASCRIPT

129. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. function handleTrackAdded(track) { const videoElement = track.attach() videoElement.id = ‘track-‘ track.id document.body.appendChild(videoElement) } function handleTrackRemoved(track) { const videoElements = track.detach(); videoElements.forEach(videoElement => { videoElement.remove(); });  } JAVASCRIPT

130. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. function handleTrackAdded(track) { const videoElement = track.attach() videoElement.id = ‘track-‘ track.id document.body.appendChild(videoElement) } function handleTrackRemoved(track) { const videoElements = track.detach() } JAVASCRIPT

131. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. function handleTrackAdded(track) { const videoElement = track.attach() videoElement.id = ‘track-‘ track.id document.body.appendChild(videoElement) } function handleTrackRemoved(track) { const videoElements = track.detach() videoElements.forEach(videoElement => { })  } JAVASCRIPT

132. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. function handleTrackAdded(track) { const videoElement = track.attach() videoElement.id = ‘track-‘ track.id document.body.appendChild(videoElement) } function handleTrackRemoved(track) { const videoElements = track.detach() videoElements.forEach(videoElement => { videoElement.remove() })  } JAVASCRIPT

133. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. function handleTrackAdded(track) { const videoElement = track.attach() videoElement.id = ‘track-‘ track.id document.body.appendChild(videoElement) } function handleTrackRemoved(track) { const videoElements = track.detach() videoElements.forEach(videoElement => { videoElement.remove() })  } // 5. Disconnect JAVASCRIPT

134. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. function handleTrackAdded(track) { const videoElement = track.attach() videoElement.id = ‘track-‘ track.id document.body.appendChild(videoElement) } function handleTrackRemoved(track) { const videoElements = track.detach() videoElements.forEach(videoElement => { videoElement.remove() })  } // 5. Disconnect room.disconnect() JAVASCRIPT

135. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. function handleTrackAdded(track) { const videoElement = track.attach() videoElement.id = ‘track-‘ track.id document.body.appendChild(videoElement) } function handleTrackRemoved(track) { const videoElements = track.detach() videoElements.forEach(videoElement => { videoElement.remove() })  } // 5. Disconnect room.disconnect() room.participants.forEach(removeParticipantView) JAVASCRIPT

136. 1. Acquire LocalTracks 2. Connect to a Room 3. Handle Participants 4. Handle Participants’ Tracks 5. Disconnect © 2017 TWILIO, INC. ALL RIGHTS RESERVED. MAIN CONTENT AND SUPPORTING TEXT PROGRAMMABLE VIDEO FUNDAMENTALS © 2017 TWILIO, INC. ALL RIGHTS RESERVED. function handleTrackAdded(track) { const videoElement = track.attach() videoElement.id = ‘track-‘ track.id document.body.appendChild(videoElement) } function handleTrackRemoved(track) { const videoElements = track.detach() videoElements.forEach(videoElement => { videoElement.remove() })  } // 5. Disconnect room.disconnect() room.participants.forEach(removeParticipantView) removeRoomView(room) JAVASCRIPT

144. © 2017 TWILIO, INC. ALL RIGHTS RESERVED. PROGRAMMABLE VIDEO FUNDAMENTALS • https://github.com/twilio/video-quickstart-android • https://github.com/twilio/video-quickstart-js • https://github.com/twilio/video-quickstart-objc • https://github.com/twilio/video-quickstart-swift

153. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. 1. Access Tokens grant your apps access to Twilio services 2. Used by Programmable Voice, Video, Chat, Sync, etc. 3. Encode client identity & product- specific capabilities

154. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. 1. Access Tokens grant your apps access to Twilio services 2. Used by Programmable Voice, Video, Chat, Sync, etc. 3. Encode client identity & product- specific capabilities 4. Mix-and-match capabilities from different products in the same Access Token

159. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. { "iss": "SK9eae711dc87feb56fdcfce9ef0b93354", "sub": "ACcd224d70006373d9b37eb3202c52df90", "exp": 1494914080, "grants": { "identity": "Alice", "video": { "room": "My Cool Room” } } } ACCESS TOKENS

160. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. { "iss": "SK9eae711dc87feb56fdcfce9ef0b93354", "sub": "ACcd224d70006373d9b37eb3202c52df90", "exp": 1494914080, "grants": { "identity": "Alice", "video": { "room": "My Cool Room” } } } 1. API Key SID ACCESS TOKENS

161. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. { "iss": "SK9eae711dc87feb56fdcfce9ef0b93354", "sub": "ACcd224d70006373d9b37eb3202c52df90", "exp": 1494914080, "grants": { "identity": "Alice", "video": { "room": "My Cool Room” } } } 1. API Key SID 2. Account SID ACCESS TOKENS

162. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. { "iss": "SK9eae711dc87feb56fdcfce9ef0b93354", "sub": "ACcd224d70006373d9b37eb3202c52df90", "exp": 1494914080, "grants": { "identity": "Alice", "video": { "room": "My Cool Room” } } } 1. API Key SID 2. Account SID 3. Expiration Date ACCESS TOKENS

163. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. { "iss": "SK9eae711dc87feb56fdcfce9ef0b93354", "sub": "ACcd224d70006373d9b37eb3202c52df90", "exp": 1494914080, "grants": { "identity": "Alice", "video": { "room": "My Cool Room” } } } 1. API Key SID 2. Account SID 3. Expiration Date 4. Client Identity ACCESS TOKENS

164. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. { "iss": "SK9eae711dc87feb56fdcfce9ef0b93354", "sub": "ACcd224d70006373d9b37eb3202c52df90", "exp": 1494914080, "grants": { "identity": “alice@twilio.com”, "video": { "room": "My Cool Room” } } } 1. API Key SID 2. Account SID 3. Expiration Date 4. Client Identity ACCESS TOKENS

165. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. { "iss": "SK9eae711dc87feb56fdcfce9ef0b93354", "sub": "ACcd224d70006373d9b37eb3202c52df90", "exp": 1494914080, "grants": { "identity": “1234567890”, "video": { "room": "My Cool Room” } } } 1. API Key SID 2. Account SID 3. Expiration Date 4. Client Identity ACCESS TOKENS

166. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. { "iss": "SK9eae711dc87feb56fdcfce9ef0b93354", "sub": "ACcd224d70006373d9b37eb3202c52df90", "exp": 1494914080, "grants": { "identity": "Alice", "video": { "room": "My Cool Room” } } } 1. API Key SID 2. Account SID 3. Expiration Date 4. Client Identity 5. Room Name (optional) ACCESS TOKENS

167. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. { "iss": "SK9eae711dc87feb56fdcfce9ef0b93354", "sub": "ACcd224d70006373d9b37eb3202c52df90", "exp": 1494914080, "grants": { "identity": "Alice", "video": {} } } 1. API Key SID 2. Account SID 3. Expiration Date 4. Client Identity 5. Room Name (optional) ACCESS TOKENS

169. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. 1. Create Access Tokens in the Twilio Console during development. 2. Vend Access Tokens from an application server in production.

170. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. 1. Create Access Tokens in the Twilio Console during development. 2. Vend Access Tokens from an application server in production. 3. Helper libraries for Node, PHP, Python, Java, C#, etc.

176. © 2017 TWILIO, INC. ALL RIGHTS RESERVED. PROGRAMMABLE VIDEO FUNDAMENTALS ALICE APP SERVER TWILIO BOB { identity: “Alice”, video: { room: “Foo” } } { identity: “Bob”, video: { room: “Foo” } } USER DATABASE

177. © 2017 TWILIO, INC. ALL RIGHTS RESERVED. PROGRAMMABLE VIDEO FUNDAMENTALS ALICE APP SERVER TWILIO BOB USER DATABASE Foo ROOM { identity: “Alice”, video: { room: “Foo” } } { identity: “Bob”, video: { room: “Foo” } }

178. © 2017 TWILIO, INC. ALL RIGHTS RESERVED. PROGRAMMABLE VIDEO FUNDAMENTALS ALICE APP SERVER TWILIO BOB USER DATABASE Foo ROOM { identity: “Alice”, video: { room: “Foo” } } { identity: “Bob”, video: { room: “Foo” } }

182. 1. Set the default Room type, either P2P or Group 2. Enable or disable TURN 3. Limit the maximum number of Participants in a Room 4. Allow or disallow application users to create ad-hoc Rooms © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. Account-level  Configuration

187. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. 1. GET /v1/Rooms  Get the list of Rooms created in your account. 2. GET /v1/Rooms/{RoomNameOrSid}  Get a particular Room by name or SID.

188. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. 1. GET /v1/Rooms  Get the list of Rooms created in your account. 2. GET /v1/Rooms/{RoomNameOrSid}  Get a particular Room by name or SID. 3. POST /v1/Rooms  Create a new Room.

191. © 2017 TWILIO, INC. ALL RIGHTS RESERVED. PROGRAMMABLE VIDEO FUNDAMENTALS ALICE APP SERVER TWILIO BOB { identity: “Alice”, video: { room: “Foo”  } } { identity: “Bob”, video: { room: “Foo”  } } Foo ROOM

192. © 2017 TWILIO, INC. ALL RIGHTS RESERVED. PROGRAMMABLE VIDEO FUNDAMENTALS ALICE APP SERVER TWILIO BOB { identity: “Alice”, video: { room: “Foo”  } } { identity: “Bob”, video: { room: “Foo”  } } Foo ROOM

193. © 2017 TWILIO, INC. ALL RIGHTS RESERVED. PROGRAMMABLE VIDEO FUNDAMENTALS ALICE APP SERVER TWILIO BOB Foo ROOM { identity: “Alice”, video: { room: “Foo”  } } { identity: “Bob”, video: { room: “Foo”  } }

199. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. • UniqueName  The name of the Room to create • EnableTurn  “true” or “false” • Type  “peer-to-peer” or “group” • MaxParticipants  Number of Participants that can connect to the Room at a time

201. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. • RecordParticipantsOnConnect  Whether or not to start recording Participants • StatusCallback  A URL that Twilio sends webhook requests to on Room events

228. © 2017 TWILIO, INC. ALL RIGHTS RESERVED.© 2017 TWILIO, INC. ALL RIGHTS RESERVED. Production Check-list 1. Room Type: P2P or Group? 2. Access Tokens & Room Security 3. Network Conditions 4. Capture Dimensions

230. © 2017 TWILIO, INC. ALL RIGHTS RESERVED. SPEAKER LINEUP HELLO, TWILIO Kat King 9:20 AM 9:50 AM 10:30 AM 11:00 AM 11:30 AM BREAK 1:00 PM 1:40 PM 2:20 PM 3:00 PM 3:40 PM 5:00 PM 5:15 PM CHAT FUNDAMENTALS Randy Beiter SYNC FUNDAMENTALS Andres Jaan Tack NOTIFY FUNDAMENTALS Ankita Bhosle VIDEO FUNDAMENTALS Mark Roberts SMS: BEYOND THE BASICS Kenny Hoxworth POWER UP WITH ADD-ONS Edward Kim & Hiral Patel CONTACT CENTER ARCHITECTURE Matthias Damm & Charles Oppenheimer TASKROUTER FUNDAMENTALS Jen Li & Justin Witz AUTHY FUNDAMENTALS Marcelo Jabali GROUP PHOTO (OUTSIDE) AWARD CEREMONY

Programmable Video Fundamentals

More Related Content

What's hot (20)

Similar to Programmable Video Fundamentals (20)

Recently uploaded (20)

Programmable Video Fundamentals