画面共有のチュートリアル(iOS)

概要

このチュートリアルでは、OpenTok iOS SDK を使用して、デバイスの画面をストリームの映像ソースとして、画面共有動画を配信する方法について解説します。

プロジェクトの設定

このセクションのコードは 画面共有 のフォルダにある。 opentok-ios-sdk-samples GitHub上のプロジェクト。まだ行っていない場合は、リポジトリをローカルディレクトリにクローンする必要があります。これはコマンドラインから次のように実行できます:

git clone https://github.com/opentok/opentok-ios-sdk-samples.git

「画面共有」アプリケーションでは、カスタム動画キャプチャ機能を使用して画面(UIView)をキャプチャする方法について解説します。Xcodeでプロジェクトを開いて、手順に従って進めてください。

コードを詳しく見ていく

カスタムビデオキャプチャ機能「TBScreenCapture」は、まずディスプレイリンクオブジェクトを使用して初期化されます。このオブジェクトは、 captureView 30フレーム/秒でのメソッド。

.その createPixelBuffer そして createCGContextFromPixelBuffer ヘルパーメソッドは、メイン画面のスナップショットを保存するための準備を整えます。このバッファはその後、 videoCaptureConsumer での captureView メソッドを使用する。


- (instancetype)initWithView:(UIView *)view
{
    self = [super init];
    if (self) {
        _view = view;
        _queue = dispatch_queue_create("SCREEN_CAPTURE", NULL);
        _screenScale = [[UIScreen mainScreen] scale];
        _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(captureView)];
        _displayLink.preferredFramesPerSecond = 30.0;
        _capturingSemaphore = dispatch_semaphore_create(1);
        [self createPixelBuffer];
        [self createCGContextFromPixelBuffer];
    }
    return self;
}

-(void)captureView
{
    if (!(_capturing && self.videoCaptureConsumer)) {
        return;
    }

    // Wait until consumeImageBuffer is done.
    if (dispatch_semaphore_wait(_capturingSemaphore, DISPATCH_TIME_NOW) != 0) {
            return;
    }
    
    dispatch_async(dispatch_get_main_queue(), ^{
        [self.view.layer renderInContext:self->_bitmapContext]; 
        // Don't block the UI thread
        dispatch_async(self->_queue, ^{
            CMTime time = [self getTimeStamp];
            [self.videoCaptureConsumer consumeImageBuffer:self->_pixelBuffer
                orientation:OTVideoOrientationUp
                timestamp:time
                metadata:nil];
            // Signal for more frames
            dispatch_semaphore_signal(self->_capturingSemaphore);
        });
    });
}

スナップショットは、以下の方法を使用して取得されます。 [self.view.layer renderInContext:self->_bitmapContext].

このサンプルアプリでは、OTVideoCaptureのプロトコルメソッドを使用して、ディスプレイリンクオブジェクトと _capturing flag。その captureSettings このメソッドは、videoFormat を OTPixelFormatARGB.

- (int32_t)captureSettings:(OTVideoFormat*)videoFormat
    {
        videoFormat.pixelFormat = OTPixelFormatARGB;
        return 0;
    }

ViewController クラスは、セッションを作成し、サブスクライバーをインスタンス化し、パブリッシャーを設定します。

パブリッシャーはアプリの中心的な役割を担っており、そのプロパティやメソッドは―― videoType, audioFallbackEnabled, videoContentHintそして setVideoCapture — は、 doPublish メソッドを使用する:

- (void)doPublish
{
    ...

    [_publisher setVideoType:OTPublisherKitVideoTypeScreen];
    
    // This disables the audio fallback feature when using routed sessions.
    _publisher.audioFallbackEnabled = NO;

    // Finally, wire up the video source.
    TBScreenCapture* videoCapture =
    [[TBScreenCapture alloc] initWithView:self.view];
    [_publisher setVideoCapture:videoCapture];

    _publisher.videoCapture.videoContentHint = OTVideoContentHintText;

    ...
}

最後に、このアプリにはランニングタイマーのテキスト表示機能が追加されています。アプリはこの表示をキャプチャし、購読者に共有します:


dispatch_source_set_event_handler(_timer, ^{
    double timestamp = [[NSDate date] timeIntervalSince1970];
    int64_t timeInMilisInt64 = (int64_t)(timestamp*1000);
    
    NSString *mills = [NSString stringWithFormat:@"%lld", timeInMilisInt64];
    
    dispatch_sync(dispatch_get_main_queue(), ^{
        [self.timeDisplay setText:mills];
    });
});

おめでとうございます!iOSの画面共有チュートリアルを完了しました。
ここで作成したコードをさらに試したり調整したりすることもできますし、あるいは 次のステップ 以下をご覧ください。OpenTok での画面共有に関する詳細については、 iOS向け OpenTok 画面共有開発者ガイド.

次のステップ

ここでの作業が終わったら、以下の役立つリソースを活用して、OpenTokアプリケーションの構築と機能強化を続けてください: