Cloudinaryのライブストリーミング（ベータ版）を試してみる

Cloudinaryは、アップロード、ストレージ、管理、操作、最適化、配信など、画像と動画のエンドツーエンドのメディア管理を提供するクラウドベースのサービスですが、 アップロードされたメディアだけでなく、エンドツーエンドのライブビデオストリーミングソリューションも提供されています。 現在はベータ版となっていますが、実際にどんなものなのか試してみようと思います。

現在はJavaScriptライブラリ: cloudinary-js-streamingが提供されているようです。

• ビデオはユーザーのデバイスカメラからストリーミングされます。
• ビデオはCloudinaryを介してアップストリームされ（事前構成された変換とエフェクトを含む）、ストリーミングユーザーにCloudinaryパブリックIDとリソースURLを提供します。
• ストリームはそのURLを通じて公開され、ストリーミングがサポートされているビデオプレーヤーにフィードできます。

このような流れとなります。

セットアップ

ライブラリのインストール

任意のディレクトリで

npm install @cloudinary/js-streaming

を実行します。

npmを使わずにHTMLに直接ロードすることも可能です。

<script src="https://unpkg.com/@cloudinary/js-streaming/dist/js-streaming.js"></script>

をhtmlファイルに追加します。

今回はこの方法を使います。

新しいライブストリーミングアップロードプリセットを作成

Cloudinaryのコンソールにログインし、新しい署名されていないアップロードプリセットを作成します。

Settings->Uploadの Upload presetsセクションで行います。

Upload presetsの作成時、Storage and Accessの設定のLive broadcastをONにします・

プリセットの作成で以下のように表示されます。

Cloudinary構成パラメーターを設定

HTMLから読み込むjavascriptファイルを作成し、

const cloudName = "{your-cloud-name}";
const uploadPreset = "{your-upload-preset}";

を追加します。

cloudNameはCloudinaryのダッシュボードから確認できます。

uploadPresetは先ほど作ったプリセット名を設定します。

ライブストリーミングの初期化

initLiveStream(options)メソッドを使ってライブストリーミングを初期化します。

必須

オプション

例えば、以下のようなコードになります。

initLiveStream({
    cloudName: cloudName,
    uploadPreset: uploadPreset,
    debug: "all",
    hlsTarget: true,
    fileTarget: false,
    events: {
        start: function (args) {
            // user code
            console.log("start stream");
            liveStream.start("<public-id>")
        },
        stop: function (args) {
            // user code
            console.log("stop stream");
            liveStream.stop()
        },
        error: function(error){
            // user code
            console.log("err stream");
        },
        local_stream: function (stream) {
            // user code, typically attaching the stream to a video view:
            console.log("attaching the stream to a video view");
            liveStream.attach(document.getElementById("video"), stream);
        }
    }
}).then(result => {
    
})

initializeを実行したら、以下のような内容が返却されます

{
    "public_id": "zeotgizr0ywj9w8owms7",
    "version": 1579706079,
    "signature": "2f25a24948aaf35e9c357355893978f5aa880dda",
    "format": "live",
    "resource_type": "video",
    "created_at": "2020-01-22T15:14:39Z",
    "tags": [],
    "bytes": 87,
    "type": "upload",
    "placeholder": false,
    "url": "http://res.cloudinary.com/mycloudname/video/upload/v1579706079/zeotgizr0ywj9w8owms7.live",
    "secure_url": "https://res.cloudinary.com/mycloudname/video/upload/v1579706079/zeotgizr0ywj9w8owms7.live",
    "access_mode": "public",
    "original_filename": "blob"
}

events個々の内容

liveStream.attach(document.getElementById("video"), stream);

ライブストリームをビデオ要素に添付して、ストリーミングしているユーザーにローカルストリームを表示します。 配信映像を自分でも確認できます。

liveStream.start("<public-id>");

ライブストリーミングを開始する命令です。

<public-id>はinitLiveStreamを実行した時に帰ってくる値です。

liveStream.stop();

ライブストリーミングを停止する命令です。

カメラ制御

いくつかの便利なカメラ機能を利用して、ユーザーがライブストリームを初期化する前にデバイスのカメラをプレビューできるようにすることが可能です。

attachCamera(<video-element>, facingMode)

HTMLビデオ要素でカメラを表示.

detachCamera(<video-element>, stopStream)

HTMLビデオ要素からカメラを削除。

例えば、以下のようなコードになります

import {attachCamera, detachCamera} from '@cloudinary/js-streaming';
const video = document.getElementById("video");
const facingMode =  { exact: "user" };

// Show camera in an html <video> element
// facingMode is optional
attachCamera(video, facingMode).then(stream=>console.log(stream));

// Remove camera from an html <video> element
detachCamera(video).then(videoElement=>console.log(videoElement));

Streamerというカメラとライブストリーミングの両方の機能を使用できるようになるラッパーもあります。詳しくはドキュメントをご参照ください。

注意点

• ライブストリームの最大時間は1時間です。ストリーミングは1時間後に終了し、新しいライブストリームを初期化する必要があります
• ストリームのパブリックIDは自動的に割り当てられ、変更は不可
• ライブストリームからのビデオがCloudinaryのストレージ制限を超えた場合、そのビデオはアカウントに保存されない

動作確認

ドキュメントに書かれている実例のコードを使ってローカルPCのカメラからストリーミングができるか試してみます。

コードは

Working example を参照しました。

初期画面

カメラを起動してプレビュー

Show Cameraを押すと、PC内臓のカメラ映像が表示されます。

ストリーミングの初期化

Initialize streamを押すと、初期設定が行われ、PublicID、Stream url, File urlが返却されます。

ストリーミング開始

Start Streamを押すとストリーミングが開始されます。

別のプレイヤーで再生

Stream urlをストリーミング再生に対応したURLで再生できました。

終了後の録画ファイル

ストリーミングを終了すると、Cloudinary側でライブ映像の録画が保存されていました。

今回はビットレートや画質などの設定は行わずに試してみました。

カクカクしたり、止まったり、遅延は結構激しかったです。

Cloudinaryではストリーミングプロファイルということが設定できるので、 これを使ってコーデックやビットレートの調整が可能になっていますので、今後、メディア配信マスターの大前さんが色々と試してくれるはずです。