More than 3 years have passed since last update.

Swift/Kotlin愛好会Advent Calendar 2019Day 19

AWS Kinesis Video StreamsでビデオストリーミングWebRTCを実施

Last updated at 2019-12-18Posted at 2019-12-18

こんにちは　フリーランスの永田です。

今年も仕事をしながら、技術を探求して、ARのライブラリー、ビデオ編集のライブラリー、背面前面同時撮影できるカメラのライブラリーなどを作成しました。　こちらに技術を公開しています

今回はSwift愛好会の2019年のアドベントカレンダーに参加させていただきました。

AWS Kinesis Video StreamsでビデオストリーミングWebRTCを実施します。

こちらの順序で展開させていただきます。


環境

サンプルソース

やり方

つまづきポイント

挙動

環境　

macOS Catalina 10.16.2

Xcode Version 11.2.1 (11B500)　

AWS マネジメントコンソールに入れること(AWSに登録済み)

AWS Kinesis Video Streamsでシグナリングチャンネルの作成

サンプルソース

このリンク先のアプリとAWS Kinesis Video Streamsを連携させてWebRTCを実現します。
https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-ios

やり方

サンプルソースのReadMeを確認願います。

Amazon Cognitoのユーザープール、IDプールの管理設定が必要になります。

Amazon Cognitoの作成方法、サンプルの確認手順はこのリンクに書いています。

AWSKinesisVideoWebRTCDemoApp.xcworkspaceをbuild&Run

buildが通らない場合、サンプルソースにbuildを通すコマンド操作を確認。

記載箇所にAmazon Cognitoで設定した項目を記載します。

Constants.swift

import Foundation
import AWSCognitoIdentityProvider
// 記入
let CognitoIdentityUserPoolRegion = AWSRegionType.APNortheast1
// 記入
let CognitoIdentityUserPoolId = "Amazon Cognitoのプール ID"
// 記入
let CognitoIdentityUserPoolAppClientId = "Amazon Cognitoのアプリクライアント ID"
// 記入
let CognitoIdentityUserPoolAppClientSecret = "Amazon Cognitoのアプリクライアントのシークレット"

let AWSCognitoUserPoolsSignInProviderKey = "UserPool"
// 記入
let CognitoIdentityPoolID = "ap-northeast-1:~~~~~~~~~~~~~ ID プールの管理から作成するID プールID"
// 記入
let AWSKinesisVideoEndpoint = "https://kinesisvideo.ap-northeast-1.amazonaws.com"
let AWSKinesisVideoKey = "kinesisvideo"

let VideoProtocols =  ["WSS", "HTTPS"]

let ConnectAsMaster = "connect-as-master"
let ConnectAsViewer = "connect-as-viewer"

let MasterRole = "MASTER"
let ViewerRole = "VIEWER"

let ClientID = "ConsumerViewer"

awsconfiguration.json

{
    "Version": "1.0",
    "CredentialsProvider": {
        "CognitoIdentity": {
            "Default": {
　　　　　　　　　　// 記入
                "PoolId": "ap-northeast-1:~~~~~~~~~~~~~ ID プールの管理から作成するID プールID",
　　　　　　　　　　// 記入
                "Region": "ap-northeast-1"
            }
        }
    },
    "IdentityManager": {
        "Default": {}
    },
    "CognitoUserPool": {
        "Default": {
　　　　　　　// 記入
            "AppClientSecret": "Amazon Cognitoのアプリクライアントのシークレット",
　　　　　　　// 記入
            "AppClientId": "Amazon Cognitoのアプリクライアント ID",
　　　　　　　// 記入
            "PoolId": "Amazon Cognitoのプール ID",
　　　　　　　// 記入
            "Region": "ap-northeast-1"
        }
    }
}

アプリ画面のサインアップ画面でユーザー登録
検証コードと新しいパスワードを登録

パスワードを再設定の際、Amazon Cognitoでメール、SMSからパスワードの再設定コードを受け取る必要があります。

サインインしてConnect画面に遷移

Kinesis Video Streamsのシグナリングチャンネルのチャンネル名
Amazon Cognitoのアプリクライアントのシークレット
リージョン名
を記入して、青い色Button(どちらでも良い)を押下で成功するとConnectedになり、RTC専用のカメラプレビュー画面に遷移します。AWSのライブラリーではカメラもライブラリー内で使用されていて、UIViewを渡す処理になっていますので、カメラの種類をカスタマイズは難しいようです。

モバイルで表示しているプログラムです。ライブラリーのRTCMTLVideoViewはUIViewになります。

    override func viewDidLoad() {
        super.viewDidLoad()

        #if arch(arm64)
        // Using metal (arm64 only)
        let localRenderer = RTCMTLVideoView(frame: localVideoView?.frame ?? CGRect.zero)
        let remoteRenderer = RTCMTLVideoView(frame: view.frame)
        localRenderer.videoContentMode = .scaleAspectFill
        remoteRenderer.videoContentMode = .scaleAspectFill
        #else
        // Using OpenGLES for the rest
        let localRenderer = RTCEAGLVideoView(frame: localVideoView?.frame ?? CGRect.zero)
        let remoteRenderer = RTCEAGLVideoView(frame: view.frame)
        #endif

        webRTCClient.startCaptureLocalVideo(renderer: localRenderer)
        webRTCClient.renderRemoteVideo(to: remoteRenderer)

        if let localVideoView = self.localVideoView {
            embedView(localRenderer, into: localVideoView)
        }
        embedView(remoteRenderer, into: view)
        view.sendSubviewToBack(remoteRenderer)
    }

つまづきポイント

ユーザーは管理画面から作成ではなく、アプリのサインアップから作成してください。
管理画面から作成すると、パスワードの再設定をしていない状態になってしまい、別途コマンド操作でパスワードの再設定が必要になりますがAWS CLIから操作する場合に、シークレットキーを外す対応が必要です。
今回のサンプルの手順ではAWS CLIから対応するより、アプリのAPIから対応した方が良さそうです。
https://qiita.com/noobar/items/6615501b035e47792227

issuesを投げたところ、デバッグでレスポンスの確認をしてくださいとの事で、確認しましたら、パスワードの再設定的なログがでたので、アプリ側から操作してパスワードを再設定したところ、アプリ認証が通りました。
https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-ios/issues/1

挙動

モバイル

シグナリングチャンネルのConnect画面

プレビュー画面

AWS Kinesis Video Streams シグナリングチャンネル画面
Chromeなどで開いて下さい。　
CloudWatch メトリクスなどで使用解析もできるので、価格プランなども検討できると思います。

複数端末での挙動

複数端末でのAWSRTCの配信技術 pic.twitter.com/1lIaz3U3WC
— DaisukeNagata (@dbank0208) December 12, 2019

アプリケーションを動作させる上で、合計工数は4時間ぐらいで確認できました。

リアルタイム配信が身近なものになったと思いますが、カメラ機能などカスタマイズ性を向上させるのはRTC側を自作する必要があり、Safariだとメディア再生ビューワーが開かなかったので、自作してSafariを開かせる必要が出てきそうです。

AWS Kinesis Video StreamsでビデオストリーミングWebRTCを実施

環境

サンプルソース

やり方

つまづきポイント

挙動

関連資料 JSのWeb画面でビデオストリーミングWebRTCを利用する場合

環境　