グループ通話画面共有
グループ通話（カンファレンス）で画面共有を実装するサンプルコードです。
前提条件
画面共有を実装する前に、次の作業が必要です。
- アプリケーションで画面共有をキャプチャーするには、Broadcast Upload Extensionまたはそれに相当する機能を実装する必要があります。
- Broadcast Upload Extensionを実装するには、Xcodeでプロジェクトに新しいTargetを追加し、「Broadcast Upload Extension」テンプレートを選択した後、この拡張機能を有効にしてください。
- 画面共有ストリームの転送に使用するポート番号、受信トークン、および送信トークンを定義してください。
送信側 - 画面共有の送信を開始する
画面共有を開始するためのコード実装方法は次のとおりです。
PlanetKitに画面共有キー設定
送信側のアプリクライアントであらかじめ定義したポート番号、受信トークン、および転送トークンをPlanetKitJoinConferenceSettingBuilderのwithEnableScreenShareKey(broadcastPort:broadcastPeerToken:broadcastMyToken:)に設定します。
var settingsBuilder = PlanetKitJoinConferenceSettingBuilder()
.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で画面共有開始
PlanetKitConferenceDelegateのdidStartMyBroadcast()を実装します。画面共有ストリームの送信を開始するには、didStartMyBroadcast()でstartMyScreenShare()を呼び出します。
subgroupNameパラメーターは、画面共有が転送される目的地を決定します。subgroupNameパラメーターがnilの場合、画面共有がメインルーム（main room）に転送されます。
extension VideoConferenceViewController: PlanetKitConferenceDelegate {
...
func didStartMyBroadcast(_ conference: PlanetKitConference) {
NSLog("Broadcast: start")
DispatchQueue.main.async {
conference.startMyScreenShare(subgroupName: nil) { success in
guard success else {
return
}
}
}
}
...
}
送信側 - 画面共有の目的地を変更する
画面共有の目的地は目的地のタイプによって、次のとおりで変更できます。
- メインルームではない、他のサブグループに目的地を変更するには、サブグループ名を引数として
changeMyScreenShareDestination()を呼び出します。 - メインルームに目的地を変更するには、
changeMyScreenShareDestinationToMainRoom()を呼び出します。
// Change the destination to a subgroup other than the main room
conference.changeMyScreenShareDestination(subgroupName: subgroupName) { success in
guard success else { return }
// UI code here if success
}
// Change the destination to the main room
conference.changeMyScreenShareDestinationToMainRoom() { success in
guard success else { return }
// UI code here if success
}
送信側 - 画面共有の送信を中止する
画面共有を中止するためのコード実装方法は次のとおりです。
PlanetKitConferenceDelegateのdidFinishMyBroadcast()とdidErrorMyBroadcast()を実装します。画面共有を中止するには、didFinishMyBroadcast()とdidErrorMyBroadcast()でstopMyScreenShare()を呼び出します。
extension VideoConferenceViewController: PlanetKitConferenceDelegate {
...
func didFinishMyBroadcast(_ conference: PlanetKitConference) {
NSLog("Broadcast: finish")
DispatchQueue.main.async {
self.conference?.stopMyScreenShare() { success in
}
}
}
func didErrorMyBroadcast(_ conference: PlanetKitConference, error: PlanetKitScreenShare.BroadcastError) {
NSLog("Broadcast: error \(error)")
DispatchQueue.main.async {
self.conference?.stopMyScreenShare() { success in
}
}
}
}
受信側 - 画面共有のアップデートイベントを受信する
PlanetKitConferenceDelegateのscreenShareDidUpdateイベントを通じて、ピアの画面共有が開始または中止されたかを確認します。
Note
すでにピアコントロールを作成した場合は、次の段階をスキップし、受信側 - ピアの画面共有ビデオの開始または中止段階でピアコントロールを使用してください。そうでない場合は、次の段階のとおり、ピアコントロールを作成してください。
extension VideoConferenceViewController: PlanetKitConferenceDelegate {
...
func screenShareDidUpdate(_ conference: PlanetKitConference, updated: PlanetKitConferenceScreenShareUpdateParam) {
if updated.state == .enabled {
NSLog("start screen share - \(updated.peerId) \(updated.subgroupName ?? "main")")
}
else {
NSLog("stop screen share - \(updated.peerId) \(updated.subgroupName ?? "main")")
}
// UI code here
DispatchQueue.main.async {
self.loadPage(self.currentPage)
}
}
}
受信側 - ピアコントロールの作成および登録する
ピアが通話に接続されたら、ピアに対するピアコントロールを作成し、登録します。
extension VideoConferenceViewController {
...
var peers: [PlanetKitConferencePeer]
var peerViews: [ScreenPeerVideoView]
func loadPage(_ page: Int) {
...
peerViews[index].setupPeerControl(conference: conference, peer: peers[index])
}
}
#if os(macOS)
typealias UIView = NSView
#endif
class ScreenPeerVideoView: UIView {
...
var peerControl: PlanetKitPeerControl!
func setupPeerControl(conference: PlanetKitConference, peer: PlanetKitConferencePeer) {
guard let peerControl = conference.createPeerControl(peer: peer) else {
// Error code here
return
}
peerControl.register(self) { success in
// UI code here
self.setScreenShareEnabled(peer.screenShareState == .enabled)
}
self.peerControl = peerControl
}
func finalPeerControl() {
peerControl.unregister() { success in
// UI code here
}
}
}
受信側 - ピアの画面共有ビデオの開始または中止
PlanetKitPeerControlDelegateのdidUpdateScreenShareイベントを通じて、ピアの画面共有が開始または中止されたかを確認します。
- ピアの画面共有が開始されたら、ピアの画面共有ビューを追加し、
PlanetKitPeerControlのstartScreenShare()を呼び出します。 - ピアの画面共有が中止されたら、ピアの画面共有ビューを除去し、
PlanetKitPeerControlのstopScreenShare()を呼び出します。
#if os(macOS)
typealias UIView = NSView
#endif
class ScreenPeerVideoView: UIView {
...
var peerControl: PlanetKitPeerControl!
var peerScreenShareView: PlanetKitMTKView!
func setScreenShareEnabled(_ enabled: Bool) {
if enabled {
peerScreenShareView = PlanetKitMTKView(frame: view.bounds, device: nil)
view.addSubview(peerScreenShareView)
let subgroupName = peerControl.peer.currentScreenShareSubgroupName
peerControl.startScreenShare(delegate: peerScreenShareView, subgroupName: subgroupName) { success in
// UI code here
}
}
else {
peerScreenShareView.removeFromSuperview()
peerControl.stopScreenShare() { success in
// UI code here
}
}
}
}
extension ScreenPeerVideoView: PlanetKitPeerControlDelegate {
...
func didUpdateScreenShare(_ peerControl: PlanetKitPeerControl, subgroup: PlanetKitSubgroup, status: PlanetKitScreenShareStatus) {
DispatchQueue.main.async {
self.setScreenShareEnabled((status.state == .enabled))
}
}
}