1対1通話画面共有

1対1通話で画面共有を実装するサンプルコードです。

Note

0.8バージョンでは、画面共有のキャプチャー／送信はiOSのみ対応、画面共有の受信はAndroidとiOSに対応しています。ここでは、iOSアプリから画面共有を送信するフローを基に作成されたサンプルコードを提供します。

前提条件

画面共有を実装する前に、次の作業が必要です。

• アプリケーションで画面共有をキャプチャーするには、Broadcast Upload Extensionまたはそれに相当する機能を実装する必要があります。
  • Broadcast Upload Extensionを実装するには、Xcodeでプロジェクトに新しいTargetを追加し、「Broadcast Upload Extension」テンプレートを選択した後、この拡張機能を有効にしてください。
• 画面共有ストリームの転送に使用するポート番号、受信トークン、および送信トークンを定義してください。

1対1通話の画面共有フロー

1対1通話における画面共有のフローは、次のとおりです。

1. 送信側のアプリクライアントであらかじめ定義したポート番号、受信トークン、および送信トークンで構成されたScreenShareKeyを作成し、PlanetKitMakeCallParamBuilderまたはPlanetKitVerifyCallParamBuilderのsetScreenShareKey(key)に設定します。
2. ユーザーが画面共有をリクエストすると、送信側のアプリクライアントからNWConnectionまたはこれに相当する機能を使用してアプリとSDK間の接続を設定し、トークンと共に定義されたポートに画面共有ストリームを送ります。
3. ScreenShareKeyの情報がNWConnectionで受信した情報と一致すると、Flutter向けPlanetKitが自動的に画面共有を開始します。
4. 受信側のアプリクライアントでonPeerScreenShareStartedイベントを受信して画面共有が開始されたことが分かったら、ビューインスタンスを作成し、addPeerScreenShareView()を呼び出してPlanetKitに画面共有ビデオをレンダリングします。

PlanetKitに画面共有キー設定（送信側）

PlanetKitMakeCallParamBuilderのsetScreenShareKey()で画面共有キーを設定します。あらかじめ定義されたポート番号、送信トークン、受信トークンをsetScreenShareKey()に渡す必要があります。

var builder = PlanetKitMakeCallParamBuilder()
        .setMyUserId(myUserId)
        .setMyServiceId(serviceId)
        .setPeerUserId(peerId)
        .setPeerServiceId(serviceId)
        .setAccessToken(accessToken)
        .setScreenShareKey(ScreenShareKey(broadcastPort: PORT_NUMBER, broadcastPeerToken: "USER_DEFINED_TOKEN_EXT", broadcastMyToken: "USER_DEFINED_TOKEN_APP"));

Swiftで画面キャプチャーおよび送信モジュール実装（送信側）

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)
        }
    }
}

画面共有の視聴（受信側）

onPeerDidStartScreenShareイベントの変更を検出し、イベントが発生した時にピアの画面共有ビューを追加するためのコードを実装します。

final _eventHandler = PlanetKitCallEventHandler(
    onConnected: (_, __, ___) => {},
    onWaitConnected: (_) => {},
    onDisconnected: (_, __, ___, ____) => {},
    onVerified: (_, __) => {},
    onPeerScreenShareStarted: (call) => _addPeerScreenShareView,
    onPeerScreenShareStopped: (call) => _removePeerScreenShareView);

void _addPeerScreenShareView(PlanetKitCall call) {
  // show screen share view
}
void _removePeerScreenShareView(PlanetKitCall call) {
  // remove screen share view
}

ピアの画面共有をレンダリングするには、PlanetKitVideoViewBuilderを使用してPlanetKitVideoViewを作成し、PlanetKitCallに追加する必要があります。

ピアの画面共有に対するPlanetKitVideoViewを作成した後、addPeerScreenShareView(viewId)を呼び出してピアの画面共有ビューをPlanetKitCallに追加します。

class ScreenShareView extends StatelessWidget {
  const ScreenShareView({super.key, this.call});
  final PlanetKitCall? call;

  @override
  Widget build(BuildContext context) {
    final screenShareView = PlanetKitVideoViewBuilder.instance.create();

    screenShareView.onCreate.listen((id) {
      call?.addPeerScreenShareView(id);
    });

    screenShareView.onDispose.listen((id) {
      call?.removePeerScreenShareView(id);
    });

    return screenShareView;
  }
}

関連サンプルコード

• 1対1音声通話
• 1対1ビデオ通話

関連ドキュメント

• 1対1通話フロー
• プレゼンテーション - 画面共有