Live Screen Broadcast with ReplayKit

70
#WWDC18 © 2018 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple. Alexander Subbotin, ReplayKit Engineering Live Screen Broadcast with ReplayKit

Transcript of Live Screen Broadcast with ReplayKit

Page 1: Live Screen Broadcast with ReplayKit

#WWDC18

© 2018 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

Alexander Subbotin, ReplayKit Engineering

•Live Screen Broadcast with ReplayKit

Page 2: Live Screen Broadcast with ReplayKit

ReplayKit

Capture • Screen visuals • App audio • Microphone input

Record and share

Broadcast live

Page 3: Live Screen Broadcast with ReplayKit

HD quality capture

Low latency

Low performance impact

Minimal power usage

Privacy safeguards

ReplayKit

Page 4: Live Screen Broadcast with ReplayKit

Agenda

•Live broadcast overview •System broadcast picker •Developing broadcast extensions •Protecting content

Page 5: Live Screen Broadcast with ReplayKit

•Live Broadcast Overview

Page 6: Live Screen Broadcast with ReplayKit

Broadcast live to third party broadcast services

Stream audio and visuals directly from device

Provide commentary with microphone and camera (iOS)

Content is secure and only accessible to the broadcast service

Live Broadcast

Page 7: Live Screen Broadcast with ReplayKit

Stream gameplay to Mobcrush or YouTube

Mirror screen on a WebEx call

Work with customer support via TeamViewerQS

Stream a drawing app to Facebook

Live Broadcast Usage examples

Page 8: Live Screen Broadcast with ReplayKit

Live Broadcast ReplayKit versus ReplayKit 2

ReplayKitAPI

YourApp Broadcaster “In-App Broadcast”

Start/ stop

A/Vsamples

Page 9: Live Screen Broadcast with ReplayKit

Live Broadcast ReplayKit versus ReplayKit 2

ReplayKitAPI

YourApp Broadcaster “In-App Broadcast”

Start/ stop

ControlCenter

ReplayKit 2 Session Broadcaster

A/VSamples

“iOS System Broadcast”Start/ stop

A/Vsamples

Page 10: Live Screen Broadcast with ReplayKit

In-App Broadcast

Your app or game • Provides the content—visuals and audio • Starts and stops the broadcast

Broadcaster app • Provides sign-in and upload extensions • Streams content to their network

Go Live with ReplayKit WWDC 2016

Page 11: Live Screen Broadcast with ReplayKit

iOS System Broadcast

Broadcasts all onscreen activity (and sounds)

Start and stop from Control Center

Systemwide, continuous session • Home screen • Moving app to app

Built-in to iOS 11 and above

Page 12: Live Screen Broadcast with ReplayKit
Page 13: Live Screen Broadcast with ReplayKit
Page 14: Live Screen Broadcast with ReplayKit
Page 15: Live Screen Broadcast with ReplayKit
Page 16: Live Screen Broadcast with ReplayKit
Page 17: Live Screen Broadcast with ReplayKit

Broadcastapplication

iOS System Broadcast

Add comment

AAmandaArcher Extraordinaire

N NathanCan’t wait to play, looks awesome👍!!!!

V Violet 😃😄😆😅😂!!!

Z Zach Always love your stuff, can’t wait to see what kind of sweet tricks you have for us

C Carlos🙂🙃😉!!!

P PaulaSo much fun!! ♥♥♥♥

Subscribe

Live92,364 Viewers

Page 18: Live Screen Broadcast with ReplayKit

iOS System Broadcast

Broadcastapplication

Add comment

AAmandaArcher Extraordinaire

N NathanCan’t wait to play, looks awesome👍!!!!

V Violet 😃😄😆😅😂!!!

Z Zach Always love your stuff, can’t wait to see what kind of sweet tricks you have for us

C Carlos🙂🙃😉!!!

P PaulaSo much fun!! ♥♥♥♥

Subscribe

Live92,364 Viewers

Page 19: Live Screen Broadcast with ReplayKit

iOS System Broadcast

Broadcastapplication

Add comment

AAmandaArcher Extraordinaire

N NathanCan’t wait to play, looks awesome👍!!!!

V Violet 😃😄😆😅😂!!!

Z Zach Always love your stuff, can’t wait to see what kind of sweet tricks you have for us

C Carlos🙂🙃😉!!!

P PaulaSo much fun!! ♥♥♥♥

Subscribe

Live92,364 Viewers

Page 20: Live Screen Broadcast with ReplayKit

iOS System Broadcast

Broadcastapplication

Add comment

AAmandaArcher Extraordinaire

N NathanCan’t wait to play, looks awesome👍!!!!

V Violet 😃😄😆😅😂!!!

Z Zach Always love your stuff, can’t wait to see what kind of sweet tricks you have for us

C Carlos🙂🙃😉!!!

P PaulaSo much fun!! ♥♥♥♥

Subscribe

Live92,364 Viewers

Page 21: Live Screen Broadcast with ReplayKit

iOS System Broadcast

Broadcastapplication

Add comment

AAmandaArcher Extraordinaire

N NathanCan’t wait to play, looks awesome👍!!!!

V Violet 😃😄😆😅😂!!!

Z Zach Always love your stuff, can’t wait to see what kind of sweet tricks you have for us

C Carlos🙂🙃😉!!!

P PaulaSo much fun!! ♥♥♥♥

Subscribe

Live92,364 Viewers

Page 22: Live Screen Broadcast with ReplayKit

•System Broadcast Picker

Page 23: Live Screen Broadcast with ReplayKit

ReplayKitAPI

YourApp Broadcaster “In-App Broadcast”

Start/ stop

ControlCenter

ReplayKit 2 Session Broadcaster

A/VSamples

“iOS System Broadcast”Start/ stop

A/Vsamples

Page 24: Live Screen Broadcast with ReplayKit

ControlCenter

Start/ stop

ReplayKitAPI Broadcaster “In-App Broadcast”

Start/ stop

A/VsamplesYour

App

ReplayKit 2 Session Broadcaster

A/VSamples

“iOS System Broadcast”

NEW

Page 25: Live Screen Broadcast with ReplayKit

Broadcast Picker

Your app can initiate an iOS system broadcast session

Simple one-button UI

No compromises for privacy

Secure architecture

New in iOS 12

NEW

Page 26: Live Screen Broadcast with ReplayKit

Fox 2

Page 27: Live Screen Broadcast with ReplayKit

Fox 2

Page 28: Live Screen Broadcast with ReplayKit
Page 29: Live Screen Broadcast with ReplayKit

Fox 2

Page 30: Live Screen Broadcast with ReplayKit

Broadcastapplication

Add comment

AAmandaArcher Extraordinaire

N NathanCan’t wait to play, looks awesome👍!!!!

V Violet 😃😄😆😅😂!!!

Z Zach Always love your stuff, can’t wait to see what kind of sweet tricks you have for us

C Carlos🙂🙃😉!!!

P PaulaSo much fun!! ♥♥♥♥

Subscribe

Live92,364 Viewers

Page 31: Live Screen Broadcast with ReplayKit

// RPSystemBroadcastPickerView

class RPSystemBroadcastPickerView: UIView { open var preferredExtension: String }

Page 32: Live Screen Broadcast with ReplayKit
Page 33: Live Screen Broadcast with ReplayKit
Page 34: Live Screen Broadcast with ReplayKit

import ReplayKit.broadcast

class ViewController: UIViewController { var broadcastPicker: RPSystemBroadcastPickerView?

override func viewDidLoad() { super.viewDidLoad() broadcastPicker = RPSystemBroadcastPickerView(frame: kPickerFrame) view.addSubview(broadcastPicker) } }

Page 35: Live Screen Broadcast with ReplayKit
Page 36: Live Screen Broadcast with ReplayKit

preferredExtension

Pairs broadcast picker to a particular extension

Assign bundle identifier of your extension

Initialize before view is presented

Page 37: Live Screen Broadcast with ReplayKit

import ReplayKit.broadcast

class ViewController: UIViewController { var broadcastPicker: RPSystemBroadcastPickerView?

override func viewDidLoad() { super.viewDidLoad() broadcastPicker = RPSystemBroadcastPickerView(frame: kPickerFrame) broadcastPicker.preferredExtension = “com.your-app.broadcast.extension”

view.addSubview(broadcastPicker) } }

Page 38: Live Screen Broadcast with ReplayKit

Brings up system broadcast picker

Allows to configure broadcast picker

Doesn’t own any state of the session

Broadcast application

RPSystemBroadcastPickerView

Session

Broadcastpicker

IPC

Status bar delegate

Screen recording control

Control Center Status bar

Controlling clients

RPSystemBroadcastPickerView

Page 39: Live Screen Broadcast with ReplayKit

•Developing Broadcast Extensions •For ReplayKit 2

Page 40: Live Screen Broadcast with ReplayKit

ControlCenter

Start/ stop ReplayKit 2

Session Broadcaster

A/Vsamples

“iOS System Broadcast”

Page 41: Live Screen Broadcast with ReplayKit

Broadcast App and Extension

Broadcast Application • Account sign-in, broadcast title

Broadcast Upload Extension • Encode samples, upload to service

Broadcastapplication

Login credentials, etc

Login credentials, etc

Upload extension Media

streamAudio and video

samples

Page 42: Live Screen Broadcast with ReplayKit

Broadcast Upload Extension

Receives audio and video samples

Encodes and uploads video stream

Handles device orientation changes

Annotates broadcast with app information

Upload extension Media

streamAudio and videosamples

V A A

Page 43: Live Screen Broadcast with ReplayKit

Broadcast Extension Template

Page 44: Live Screen Broadcast with ReplayKit

// SampleHandler created by Xcode templates for Upload Extension class SampleHandler: RPBroadcastSampleHandler { // User has requested to start the broadcast override func broadcastStarted(withSetupInfo setupInfo: [String : NSObject]?) // User has requested to finish the broadcast override func broadcastFinished() // Handle the sample buffer here override func processSampleBuffer(_ sampleBuffer: CMSampleBuffer, with sampleBufferType: RPSampleBufferType) // Use details of application to annotate the broadcast override func broadcastAnnotated(withApplicationInfo info: [String : NSObject]) }

Page 45: Live Screen Broadcast with ReplayKit

Broadcast Lifecycle

ExtensionApplication

Setup Initialized Started StoppedProcess Sample

Page 46: Live Screen Broadcast with ReplayKit

Handling Sign-In and Broadcast Setup Broadcast application

ExtensionApplication

Setup Initialized Started StoppedProcess Sample

Page 47: Live Screen Broadcast with ReplayKit

Initialization

ExtensionApplication

Setup Initialized Started StoppedProcess Sample

Page 48: Live Screen Broadcast with ReplayKit

// Override init to read login credentials from shared keychain class SampleHandler : RPBroadcastSampleHandler { override func init() { super.init() session = BroadcastSession.instance var credentials = KeychainAccess.getLoginCredentials() session.authentificate(credentials) } }

Page 49: Live Screen Broadcast with ReplayKit

Handling broadcastStarted

ExtensionApplication

Setup Initialized Started StoppedProcess Sample

Page 50: Live Screen Broadcast with ReplayKit

// Override broadcastStarted to prepare to receive media samples override func broadcastStarted(withSetupInfo setupInfo: [String : NSObject]?) { // Verify user is logged in if (session.userLoggedIn()) { session.createMediaEngine() } }

Page 51: Live Screen Broadcast with ReplayKit

ExtensionApplication

Processing Media Samples

Setup Initialized Started StoppedProcess Sample

Page 52: Live Screen Broadcast with ReplayKit

Broadcast Upload Extension processSampleBuffer

Upload extension

Video (screen)

Audio (app)

Audio (microphone)

VideoToolbox

Media stream

Page 53: Live Screen Broadcast with ReplayKit

// Both audio and video samples are handled by processSampleBuffer routine override func processSampleBuffer(_ sampleBuffer: CMSampleBuffer, with sampleBufferType: RPSampleBufferType) { switch sampleBufferType { case RPSampleBufferType.video: var imageBuffer:CVImageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer)! var pts = CMSampleBufferGetPresentationTimeStamp(sampleBuffer) as CMTime VTCompressionSessionEncodeFrame(session, imageBuffer, pts, kCMTimeInvalid, nil, nil, nil) break case RPSampleBufferType.audioApp: // Handle audio sample buffer for app audio break case RPSampleBufferType.audioMic: // Handle audio sample buffer for mic audio break } }

Page 54: Live Screen Broadcast with ReplayKit

ExtensionApplication

Setup Initialized Started StoppedProcess sample

Handling Application Information

Page 55: Live Screen Broadcast with ReplayKit

ExtensionApplication

Setup Initialized Started StoppedProcess sample

App information

Handling Application Information

Page 56: Live Screen Broadcast with ReplayKit
Page 57: Live Screen Broadcast with ReplayKit

Broadcast Upload Extension broadcastAnnotatedWithApplicationInfo

Home Screen Angry Birds 2 Second Application Third Application Fourth Application

Elapsed time

Upload extensionReplayKit

Media stream

Page 58: Live Screen Broadcast with ReplayKit

// Use application details to help users find your broadcast override func broadcastAnnotated(withApplicationInfo applicationInfo: [AnyHashable : Any]) { var bundleIdentifier = applicationInfo[RPApplicationInfoBundleIdentifierKey] if (bundleIdentifier != nil) { session.addMetadataWithApplicationInfo(bundleIdentifier) } }

Page 59: Live Screen Broadcast with ReplayKit

ExtensionApplication

Handling broadcastFinished

Setup Initialized Started StoppedProcess sample

App information

Page 60: Live Screen Broadcast with ReplayKit

ExtensionApplication

Handling Sign-In

Error alert

Setup Initialized Started StoppedProcess sample

App information

Page 61: Live Screen Broadcast with ReplayKit
Page 62: Live Screen Broadcast with ReplayKit
Page 63: Live Screen Broadcast with ReplayKit

// Override broadcastStarted to prepare to receive media samples override func broadcastStarted(withSetupInfo setupInfo: [String : NSObject]?) { // Verify user is logged in and there’s network connectivity if (session.userLoggedIn()) { session.createMediaEngine() } else { let userInfo = [NSLocalizedFailureReasonErrorKey : "Not Logged In"] let error = NSError(domain: "RPBroadcastErrorDomain", code: 401, userInfo: userInfo) finishBroadcastWithError(error) } }

Page 64: Live Screen Broadcast with ReplayKit

Implement sign-in and setup UI in your application

Finish the broadcast and send user to the app if something is missing

Encode and upload video stream to your service

Use information about app on the screen to help users find your broadcast

Developing Broadcast Extensions Summary

Page 65: Live Screen Broadcast with ReplayKit

•Protecting Content

Page 66: Live Screen Broadcast with ReplayKit

Protecting Content UIScreen.isCaptured

Prevent capturing of audio and video content of your app

Stop media playback or displaying sensitive content • Check value of UIScreen.captured • Register for UIScreenCapturedDidChangeNotification • Check UIScreen.screens.count to allow screen mirroring

Page 67: Live Screen Broadcast with ReplayKit

// Protecting content of your application from being captured

import UIKit

class func handleScreenCapturedChange() { let isScreenMirroring = UIScreen.screens.count > 1 if (UIScreen.isCaptured && !isScreenMirroring) { // stop audio playback and remove sensitive content from the screen } }

Page 68: Live Screen Broadcast with ReplayKit

Summary

Live screen broadcast

System broadcast picker

Developing broadcast extensions

Protecting content

Page 69: Live Screen Broadcast with ReplayKit

More Informationhttps://developer.apple.com/wwdc18/601

ReplayKit Lab Technology Lab 5 Tuesday 3:00PM

Page 70: Live Screen Broadcast with ReplayKit