1対1通話画面共有

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

Note

• バージョン1.2以降、画面共有のキャプチャーと送信はAndroidとiOSの両方でサポートされていますが、仕組みはプラットフォームごとに異なります。
  • Androidでは、PlanetKitが画面を直接キャプチャーします。アプリケーションがstartMyScreenShare()を呼び出すと、PlanetKitがシステムの画面キャプチャー同意を要求し、メディアプロジェクションのフォアグラウンドサービスでキャプチャーを実行します。
  • iOSでは、アプリケーションがBroadcast Upload Extensionを通じて画面をキャプチャーし、通話開始時に設定したScreenShareKeyを使ってNWConnection経由でPlanetKitにストリームを送信します。
• 相手の画面共有の受信は両プラットフォームでサポートされ、コードは同じです。

前提条件

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

Android

画面キャプチャーはPlanetKitが開始するフォアグラウンドサービス上で実行されますが、そのサービスと権限はアプリケーション側で宣言する必要があります。アプリのAndroidManifest.xmlに次を追加してください。

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />

<application ...>
    <service
        android:name="com.example.planet_kit_flutter.screenshare.PlanetKitScreenShareService"
        android:foregroundServiceType="mediaProjection"
        android:exported="false" />
</application>

PlanetKitが通知チャネルを作成し、進行中の「Screen sharing」通知を自動で表示するため、追加の通知設定は不要です。

Note

ポート番号やトークンを定義する必要はなく、setScreenShareKey()を呼び出す必要もありません。これらはiOSのBroadcast Extensionフローでのみ使用されます。

iOS

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

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

Android

1. ユーザーが画面共有をリクエストすると、アプリクライアントがPlanetKitCallのstartMyScreenShare()を呼び出します。
2. PlanetKitがシステムの画面キャプチャー同意ダイアログを表示します。
3. ユーザーが許可すると、PlanetKitはメディアプロジェクションのフォアグラウンドサービスを開始し、画面のキャプチャーと送信を始めます。startMyScreenShare()はtrueを返します。
4. 受信側のアプリクライアントでonPeerScreenShareStartedイベントを受信して画面共有が開始されたことがわかったら、ビューインスタンスを作成し、addPeerScreenShareView()を呼び出してPlanetKitに画面共有ビデオをレンダリングします。
5. 送信側の画面共有状態はPlanetKitMyMediaStatusHandler.onScreenShareStateUpdateを通じて報告されます。

startMyScreenShare()は、ユーザーが同意ダイアログを拒否した場合、別の画面共有リクエストが処理中の場合、またはPlanetKitが開始を拒否した場合にfalseを返します。iOSでは常にfalseを返します。以下で説明するBroadcast Extensionフローを使用してください。

iOS

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

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

画面の送信（送信側、Android）

Androidでは、PlanetKitが画面のキャプチャーと送信を行います。startMyScreenShare()で開始し、stopMyScreenShare()で停止します。ScreenShareKeyやBroadcast Extensionを実装する必要はありません。

画面共有はアプリケーションが要求していなくても停止する可能性があるため、startMyScreenShare()の戻り値だけでなくPlanetKitMyMediaStatusHandler.onScreenShareStateUpdateを通じて現在の状態を追跡してください。

class ScreenShareController {
  ScreenShareController({required this.call}) {
    call.myMediaStatus.setHandler(PlanetKitMyMediaStatusHandler(
      onMicMute: null,
      onMicUnmute: null,
      onAudioDescriptionUpdate: null,
      onVideoStatusUpdate: null,
      onScreenShareStateUpdate: (status, screenShareState) {
        isScreenSharing = screenShareState == PlanetKitScreenShareState.enabled;
        // update your UI here
      },
    ));
  }

  final PlanetKitCall call;
  bool isScreenSharing = false;

  Future<void> toggleScreenShare() async {
    if (isScreenSharing) {
      await call.stopMyScreenShare();
      return;
    }

    final started = await call.startMyScreenShare();
    if (!started) {
      // The user declined the consent dialog, another request was still pending,
      // or PlanetKit rejected the start.
    }
  }
}

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

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で画面キャプチャーおよび送信モジュール実装（送信側、iOS）

NWConnectionを通じてアプリとSDK間の接続を設定する画面キャプチャーモジュールを実装します。

class BroadcastSender {
    private enum State {
        case started
        case handshaking
        case connected
        case failed
    }

    weak var delegate: BroadcastSenderDelegate?

    private let broadcastPort: UInt16
    private let rxToken: String
    private let txToken: String

    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(delegate: BroadcastSenderDelegate?, 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通話フロー
• プレゼンテーション - 画面共有