1대1 통화 화면 공유
1대1 통화에서 화면 공유를 구현하는 예제 코드입니다.
필수 조건(iOS에만 해당)
화면 공유를 구현하기 전에 다음 작업을 수행해야 합니다.
- 애플리케이션에서 화면 공유를 캡처하려면 Broadcast Upload Extension 또는 이에 상응하는 기능을 구현해야 합니다.
- Broadcast Upload Extension을 구현하려면 Xcode에서 프로젝트에 새 Target을 추가하고, "Broadcast Upload Extension" 템플릿을 선택한 다음 이 확장을 활성화하세요.
- 화면 공유 스트림 전송에 사용할 포트 번호, 수신 토큰 및 전송 토큰을 정의하세요.
송신 측 - 화면 공유 전송 시작
화면 공유를 시작하기 위한 코드 구현 방식은 iOS와 macOS가 서로 다릅니다.
iOS
PlanetKit에 화면 공유 키 설정
송신 측 앱 클라이언트에서 미리 정의한 포트 번호, 수신 토큰 및 전송 토큰을 발신자의 경우 PlanetKitMakeCallSettingBuilder
, 착신자의 경우 PlanetKitVerifyCallSettingBuilder
의 withEnableScreenShareKey(broadcastPort:broadcastPeerToken:broadcastMyToken:)
에 설정하세요.
// If the sender is a caller
var settingsBuilder = try! PlanetKitMakeCallSettingBuilder()
.withEnableScreenShareKey(broadcastPort: PORT_NUMBER, broadcastPeerToken: "USER_DEFINED_TOKEN_EXT", broadcastMyToken: "USER_DEFINED_TOKEN_APP")
// If the sender is a callee
var settingsBuilder = try! PlanetKitVerifyCallSettingBuilder()
.withEnableScreenShareKey(broadcastPort: PORT_NUMBER, broadcastPeerToken: "USER_DEFINED_TOKEN_EXT", broadcastMyToken: "USER_DEFINED_TOKEN_APP")
화면 캡처링 및 송신 모듈 구현
NWConnection
을 통해 앱과 SDK 간의 연결을 설정하는 화면 캡처링 모듈을 구현하세요.
class BroadcastSender {
private enum State {
case started
case handshaking
case connected
case failed
}
private let connection: NWConnection
private let queue = DispatchQueue(label: "BroadcastSender.Queue")
static func connection(broadcastPort : UInt16) throws -> NWConnection {
guard let port = NWEndpoint.Port(rawValue: broadcastPort) else {
throw Error.invalidPort
}
let options = NWProtocolTCP.Options()
options.noDelay = true
return NWConnection(host: .ipv4(.loopback), port: port, using: .init(tls: nil, tcp: options))
}
init(broadcastPort: UInt16, rxToken : String, txToken : String) throws {
self.delegate = delegate
self.rxToken = rxToken
self.txToken = txToken
connection = try BroadcastSender.connection(broadcastPort: broadcastPort)
connection.stateUpdateHandler = { [weak self] in
self?.handleConnection(newState: $0)
}
connection.start(queue: DispatchQueue(label: "BroadcastSender.NetworkQueue"))
}
func handShake() {
guard state == .started, let data = txToken.data(using: .utf8) else {
return
}
state = .handshaking
connection.send(content: data, completion: .contentProcessed({ (error) in
self.handShakeProcessed(error: error)
}))
}
func sendVideo(sampleBuffer: CMSampleBuffer) throws {
guard state == .connected,
!sending else {
return
}
try queue.sync {
let data: Data?
// create data with CMSampleBuffer
connection.send(data, completion: .contentProcessed({(error) in NSLog("data processed \(error)")}))
}
}
func handShakeProcessed(error: NWError?) {
queue.sync {
if let error = error {
didFail(error: error)
} else {
handShakeAck()
}
}
}
func handShakeAck() {
guard state == .handshaking, let token = rxToken.data(using: .utf8) else {
return
}
connection.receive(minimumIncompleteLength: token.count, maximumLength: token.count) { (data, context, final, error) in
self.handShakeAckProcessed(data: data, error: error)
}
}
func handShakeAckProcessed(data: Data?, error: NWError?) {
queue.sync {
guard state == .handshaking, let token = rxToken.data(using: .utf8) else {
return
}
if data == token {
state = .connected
} else {
didFail(error: .rejected)
}
}
}
func handleConnection(newState: NWConnection.State) {
queue.sync {
switch newState {
case .ready:
handShake()
case .waiting(let error), .failed(let error):
didFail(error: error)
default:
break
}
}
}
}
연결이 성공적으로 설정되면 생성된 NWConnection
에 화면 공유 스트림을 보내야 합니다. 캡처한 화면 공유 스트림을 보내기 위한 SampleHandler
클래스를 구현하세요.
class SampleHandler: RPBroadcastSampleHandler {
private var sender: BroadcastSender?
...
override func broadcastFinished() {
// User has requested to finish the broadcast.
sender?.cancel()
sender = nil
}
let rxToken : String = "USER_DEFINED_TOKEN_APP"
let txToken : String = "USER_DEFINED_TOKEN_EXT"
let broadcastPort : UInt16 = PORT_NUMBER
override func processSampleBuffer(_ sampleBuffer: CMSampleBuffer, with sampleBufferType: RPSampleBufferType) {
switch sampleBufferType {
case RPSampleBufferType.video:
do {
if let sender = sender {
try autoreleasepool {
try sender.sendVideo(sampleBuffer: sampleBuffer)
}
} else {
sender = try BroadcastSender(delegate: self, broadcastPort: broadcastPort, rxToken: rxToken, txToken: txToken)
}
} catch {
finish(error: error)
}
break
...
}
}
private func finish(error: Error) {
sender?.cancel()
sender = nil
if let description = (error as? LocalizedError)?.errorDescription {
self.finishBroadcastWithError(NSError(domain: "BroadcastSender.ErrorDomain", code: 0, userInfo: [NSLocalizedFailureReasonErrorKey: description]))
} else {
self.finishBroadcastWithError(error)
}
}
}
PlanetKit에서 화면 공유 시작
PlanetKitCallDelegate
의 didStartMyBroadcast()
를 구현하세요. 화면 공유 스트림 전송을 시작하려면 didStartMyBroadcast()
에서 startMyScreenShare()
를 호출하세요.
extension VideoCallViewController: PlanetKitCallDelegate {
...
func didStartMyBroadcast(_ call: PlanetKitCall) {
NSLog("Broadcast: start")
DispatchQueue.main.async {
call.startMyScreenShare() { success in
guard success else {
return
}
}
}
}
...
}
macOS
화면 캡처 장치를 모으고 그중 하나를 선택하세요.
func collectCaptureDevices() -> [PlanetKitScreenCaptureDevice] {
var captureDevices = [PlanetKitScreenCaptureDevice]()
autoreleasepool {
for display in PlanetKitScreen.shared.displays {
let name: String
if let screen = NSScreen.screens.first(where: { $0.displayID == display.displayID }) {
name = screen.localizedName
}
...
captureDevices.append(PlanetKitScreenCaptureDevice(display: display))
}
let windows = PlanetKitScreen.shared.windows.filter {
$0.sharingType != .none &&
$0.alpha > 0 &&
$0.level == kCGNormalWindowLevel
}
let myAppId = Bundle.main.bundleIdentifier
for window in windows {
guard let image = window.image, window.sharingType != .none, window.bundleId != nil else {
continue
}
if myAppId == window.bundleId {
continue
}
...
captureDevices.append(PlanetKitScreenCaptureDevice(window: window))
}
}
return captureDevices
}
화면 공유 전송을 시작하려면 startMyScreenShare()
를 호출하세요.
func startMyScreenShare(_ device: PlanetKitScreenCaptureDevice) {
...
call.startMyScreenShare(device: device) { success in
guard success else { return }
// UI code here if success
}
}
송신 측 - 화면 공유 전송 중지
화면 공유를 중지하기 위한 코드 구현 방식은 iOS와 macOS가 서로 다릅니다.
iOS
PlanetKitCallDelegate
의 didFinishMyBroadcast()
와 didErrorMyBroadcast()
를 구현하세요. 화면 공유를 중지하려면 didFinishMyBroadcast()
와 didErrorMyBroadcast()
에서 stopMyScreenShare()
를 호출하세요.
extension VideoCallViewController: PlanetKitCallDelegate {
...
func didFinishMyBroadcast(_ call: PlanetKitCall) {
NSLog("Broadcast: finish")
DispatchQueue.main.async {
self.call?.stopMyScreenShare() { success in
}
}
}
func didErrorMyBroadcast(_ call: PlanetKitCall, error: PlanetKitScreenShare.BroadcastError) {
NSLog("Broadcast: error \(error)")
DispatchQueue.main.async {
self.call?.stopMyScreenShare() { success in
}
}
}
}
macOS
화면 공유를 중지하려면 stopMyScreenShare()
를 호출하세요.
call.stopMyScreenShare() { success in
self.delegate?.screenShare(self, willDismiss: dismiss)
}
수신 측 - 화면 공유 업데이트 이벤트 수신
PlanetKitCallDelegate
의 peerDidStartScreenShare
또는 peerDidStopScreenShare
이벤트를 통해 피어의 화면 공유가 시작 혹은 중지됐는지 확인합니다.
extension VideoCallViewController: PlanetKitCallDelegate {
...
func peerDidStartScreenShare(_ call: PlanetKitCall) {
NSLog("peer screen share started")
// UI code here
DispatchQueue.main.async {
self.setPeerScreenShareEnabled(true)
}
}
func peerDidStopScreenShare(_ call: PlanetKitCall, reason: Int32) {
NSLog("peer screen share stopped")
// UI code here
DispatchQueue.main.async {
self.setPeerScreenShareEnabled(false)
}
}
}
수신 측 - 피어의 화면 공유 비디오 렌더링
peerDidStartScreenShare
이벤트가 발생한 후 화면 공유 뷰를 추가하여 공유 화면을 표시할 수 있습니다.
func setPeerScreenShareEnabled(_ enable: Bool) {
if enable {
let newView = PlanetKitMTKView(frame: view.bounds, device: nil)
view.addSubview(newView)
self.screenShareView = newView
call.addPeerScreenShareView(delegate: newView)
...
} else {
...
}
}
수신 측 - 피어의 화면 공유 비디오 제거
피어의 공유 화면을 렌더링하지 않으려면 PlanetKitCall
에서 화면 공유 뷰를 제거하세요.
func setPeerScreenShareEnabled(_ enable: Bool) {
if enable {
...
} else {
if let oldView = screenShareView {
oldView.removeFromSuperview()
screenShareView = nil
call.removePeerScreenShareView(delegate: oldView)
}
}
}