アプリ内にカメラ映像をリアルタイム表示！ CanvasCameraPluginの紹介

スマートフォンのカメラ機能をより便利に使いこなそうと考えた際に思いつくのが、アプリの中に映像を埋め込む方法ではないでしょうか。その映像を取得できれば、より面白いアプリが作れそうです。

今回はそうしたアプリを作る際に必須となりそうなCanvasCameraPluginの使い方を解説します。

下の動画は、端末のカメラから取得した映像をアプリ内で表示しているところです。

プロジェクトのソースコードは、GitHubに配置しています。
https://github.com/monaca-samples/CanvasCameraPluginApp

CanvasCameraPluginのインストール

CanvasCameraPluginはMonaca IDEのCordovaプラグインの追加と削除よりインストールしてください。

https://github.com/VirtuoWorks/CanvasCameraPlugin.git

事前設定 (iOSのみ)

CanvasCameraPluginではカメラを使いますので、iOSの場合にはconfig.xmlを編集する必要があります。

<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
        <string>カメラの映像を利用します</string>
</edit-config>

HTMLについて

カメラの映像を投影するcanvasタグを用意します。

これは複数指定できます。今回はフルサイズ表示する #fullsize とサムネイル表示用の #thumbnail を用意しています。

<canvas class="raster" id="fullsize"></canvas>
<canvas class="raster" id="thumbnail"></canvas>

初期化

アプリが立ち上がったタイミングで初期化を行います。ここでHTMLのcanvasを指定します。

window.plugin.CanvasCamera.initialize({
    fullsize: document.querySelector("#fullsize"),
    thumbnail: document.querySelector("#thumbnail"),
});

カメラ映像の表示

映像を映し出す際には、次のように処理を実行します。

successCallback には随時データが流れてきます。一度だけではない点に注意してください。

window.plugin.CanvasCamera.start(options, errorCallback, successCallback);

オプションのパラメータ

options で映像の取得方法を指定できます。

例として、下記にのようになります。大事なポイントとして use: "data" があります。
file:// を指定した場合、パーミッション関係するエラーが発生します。

const options = {
    // canvasタグの大きさを指定
    canvas: {
        width: 320,
        height: 240,
    },

    // キャプチャする大きさを指定
    // canvasと同じ大きさにしておくのが良さそうです
    capture: {
        width: 320,
        height: 240,
    },

    // dataやfileなどが指定できます
    use: "data",
    // FPS
    fps: 30,
    // フラッシュを使う場合は true
    flashMode: false, // または true
    // サムネイルがある場合は true
    hasThumbnail: true,
    // サムネイルの大きさを指定
    thumbnailRatio: 1 / 6,
    // 利用するカメラの場所
    cameraFacing: 'back', // または front
};

受信するデータ

successCallbackに送られてくるデータは、次のようになります。

FPSに合わせて随時データが送られてきます。

{
    "preview": {
        "started": true
    },
    "message": "OK",
    "options": {
        "height": 288,
        "canvas": {
            "width": 320,
            "height": 240
        },
        "cameraFacing": "back",
        "thumbnailRatio": 0.16666666666666666,
        "width": 352,
        "fps": 30,
        "flashMode": false,
        "hasThumbnail": true,
        "capture": {
            "width": 352,
            "height": 288
        }
    },
    "output": {
        "images": {
            "thumbnail": {
                "rotation": 0,
                "data": "data:image/jpeg;base64,/9j/4AAQS.../9k=",
                "timestamp": 1658160100040.1157,
                "orientation": "landscape"
            },
            "fullsize": {
                "rotation": 0,
                "data": "data:image/jpeg;base64,/9j/...f/9k=",
                "timestamp": 1658160100040.105,
                "orientation": "landscape"
            }
        }
    }
}

ここまでの説明で、カメラ映像をアプリ内に投影ができます。

この後はプラグインにあるメソッドの使い方を紹介します。

フロントカメラを利用する

カメラを変更する場合には cameraPosition メソッドを使います。

window.plugin.CanvasCamera.cameraPosition(
    'front', // または back
    errorCallback,
    successCallback
);

停止

停止する場合は stop を使います。なおcanvasには最後のフレームの映像が残ります。

window.plugin.CanvasCamera.stop(errorCallback, successCallback);

カメラフラッシュON/OFF

フラッシュを点ける、または停止する際には flashMode メソッドを使います。

window.plugin.CanvasCamera.flashMode(
    true, // または false
    errorCallback,
    successCallback,
);

反転

反転させるフリップも用意されています。

いままでの操作より処理は複雑となっています。

// フリップ状態を管理する変数
const flip = {};

// フリップ済みかどうか
if (flip.flipped) {
    // フリップしている場合には元に戻す
    flip.scaleH = 1;
    flip.scaleV = 1;
    flip.flipped = false;
} else {
    // フリップ（反転）指定
    flip.scaleH = -1;
    flip.scaleV = -1;
    flip.flipped = true;
}

// レンダリング前に実行されるイベント
window.plugin.CanvasCamera.beforeFrameRendering(function (event, frame) {
    this.context.save();
    frame.dWidth = frame.dWidth * flip.scaleH;
    frame.dHeight = frame.dHeight * flip.scaleV;
    this.context.scale(flip.scaleH, flip.scaleV);
});

// レンダリング後に実行されるイベント
window.plugin.CanvasCamera.afterFrameRendering(function (event, frame) {
    this.context.restore();
});