ブラウザ上で画像処理

Android, iOS, Windowsなどのデバイスに依存せずにウェブブラウザ上で画像処理をやってみたいなと思って、少しやってみた。
画像処理はやっぱり慣れ親しんでいるOpenCVを使いたいので、OpenCVを利用する。実現するためには、OpenCV.jsというOpenCVのJavascript版を利用すると良いよう。ただ、OpenCV.jsのビルドは色々と面倒なようなので、今回は以下のような感じでダウンロードしたものを利用した。
curl https://docs.opencv.org/4.3.0/opencv.js -o opencv.js
OpenCV.jsのサンプルについては、OpenCVの以下のディレクトリにいくつかあるので、これを参考にすればよさそう。
\opencv\doc\js_tutorials

今回は、動画ファイルを読み込んでグレースケールに変換する処理を試してみた。
ソースは以下の通り。このhtmlフィアルとその他の必要なファイル（utils.js, cup.mp4(入力動画), opencv.js, js_example_style.css）をサーバ上にアップするとスマホのウェブブラウザ上で入力の動画ファイルがグレースケールに変換されて出力されるのが確認できた。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gray Scale</title>
<link href="js_example_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Gray Scale</h2>

<div>
<div class="control"><button id="startAndStop" disabled>Start</button></div>
</textarea>
</div>
<p class="err" id="errorMessage"></p>
<div>
    <table cellpadding="0" cellspacing="0" width="0" border="0">
    <tr>
        <td>
            <video id="Color Video" width="320" height="240" muted></video>
        </td>
        <td>
            <canvas id="Gray Video" width="320" height="240" ></canvas>
        </td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <div class="caption">videoInput</div>
        </td>
        <td>
            <div class="caption">canvasOutput</div>
        </td>
        <td></td>
        <td></td>
    </tr>
    </table>
</div>
<script src="https://webrtc.github.io/adapter/adapter-5.0.4.js" type="text/javascript"></script>
<script src="utils.js" type="text/javascript"></script>

<script type="text/javascript">
let utils = new Utils('errorMessage');

function executeProcess() {
        let video = document.getElementById('Color Video');
        let cap = new cv.VideoCapture(video);
        let frame = new cv.Mat(video.height, video.width, cv.CV_8UC4);
        let frameGray = new cv.Mat(video.height, video.width, cv.CV_8UC4);
        const FPS = 30;
        function processVideo() {
            try {
                if (!streaming) {
                    // clean and stop.
                    return;
                }
                let begin = Date.now();

                // start processing.
                cap.read(frame);
                cv.cvtColor(frame, frameGray, cv.COLOR_RGBA2GRAY);
                cv.imshow('Gray Video', frameGray);

                // schedule the next one.
                let delay = 1000 / FPS - (Date.now() - begin);
                setTimeout(processVideo, delay);
            } catch (err) {
                utils.printError(err);
            }
        };

        // schedule the first one.
        setTimeout(processVideo, 0);
    }
let streaming = false;
let videoInput = document.getElementById('Color Video');
let startAndStop = document.getElementById('startAndStop');

startAndStop.addEventListener('click', () => {
    if (!streaming) {
        utils.clearError();
        videoInput.play().then(() => {
            onVideoStarted();
        });
    } else {
        videoInput.pause();
        videoInput.currentTime = 0;
        onVideoStopped();
    }
});

function onVideoStarted() {
    streaming = true;
    startAndStop.innerText = 'Stop';
    videoInput.height = videoInput.width * (videoInput.videoHeight / videoInput.videoWidth);
    executeProcess();
}

function onVideoStopped() {
    streaming = false;
    startAndStop.innerText = 'Start';
}

videoInput.addEventListener('ended', () => {
    onVideoStopped();
});

utils.loadOpenCv(() => {
    videoInput.addEventListener('canplay', () => {
        startAndStop.removeAttribute('disabled');
    });
    videoInput.src = 'cup.mp4';
});
</script>
</body>
</html>

コメント

コメントを投稿

このブログの人気の投稿

COLMAPでキャリブレーション済みのデータを使う

イメージ
COLMAPで三次元復元を行う際に既知のカメラパラメータを利用する方法についてメモしておく。多くの場合、SfMでカメラパラメータも含めて推定することで十分だが、例えばCMUの Panoptic dataset のようにカメラキャリブレーション結果が提供されているようなものに対して、COLMAPを適用してみたい場合は提供されているカメラパラメータを利用する方が良い場合がある。実際に、Panoptic datasetでCOLMAPを実行するとマッチングが上手くいかず推定に失敗する場合が多くある。 既知のカメラパラメータを利用する方法については、COLMAPのFAQの中で回答があるので、ここにある通りにcamera.txt, images.txt, point3D.txtを準備すると良い。 Reconstruct sparse/dense model from known camera poses https://colmap.github.io/faq.html#reconstruct-sparse-dense-model-from-known-camera-poses 以下はCOLAMPで画像群を読み込み、特徴点の対応関係の取得まで終わっている（マッチング結果のデータベースhogehoge.dbがある）ことを前提としている。 camera.txtの生成 camera.txtには各カメラのカメラモデルおよびカメラ内部パラメータを記載する。フォーマットは以下の通り。 カメラID カメラモデル 解像度x 解像度y fx fy cx cy 歪パラメータ 内部パラメータの表現については利用するカメラモデルに依存するので、以下のURLを参照しながら必要に応じて使い分ける。 Camera Models https://colmap.github.io/cameras.html camera_models.h https://colmap.github.io/cameras.html image.txtの生成 image.txtには各画像に対応するカメラ外部パラメータを記載する。フォーマットは以下の通り。 画像ID qw qx qy qz tx ty tz カメラID　画像ファイル名 ここで(qw, qx, qy, qz)は3次元回転のクウォータニオン表現で(tx, ty, tz)は
続きを読む

5点アルゴリズムによるカメラ位置・姿勢の推定

2枚の画像間のカメラ位置・姿勢を推定する際に、それぞれの画像を撮影したカメラの内部パラメータが既知の場合には5点アルゴリズムが利用できる。OpenCVにも5点アルゴリズムでカメラ位置・姿勢を推定するための関数 cv::findEssentialMat が用意されている。 使い方は、対応点の座標を以下のように指定するだけ。 cv::Mat essentialMat = cv::findEssentialMat(p1, p2); ただし、デフォルトでは焦点距離1.0、画像中心座標(0, 0)で計算するようになっているので、下記のコードのように内部パラメータ行列を用いて座標変換を行うか焦点距離、画像中心座標を指定する必要がある。座標変換を行わずに利用したい場合は、焦点距離、画像中心座標を第3,4引数に設定すれば良い。 推定したEssential Matrixからカメラの並進と回転を求めるためには、 cv::recoverPose で並進ベクトルと回転ベクトルに分解することができる。 以下のように、2枚の画像から対応点を求めて、5点アルゴリズムでカメラ位置・姿勢を推定することができる。 #include <iostream> #include <vector> #include <opencv2/opencv.hpp> #include <opencv2/nonfree.hpp> int main(int argc, char** argv) {   cv::initModule_nonfree(); //モジュールの初期化   //カメラパラメータの読み込みとレンズ歪の除去   cv::Mat img1; //入力画像1   cv::Mat img2; //入力画像2   cv::Mat K;   cv::Mat distCoeffs;   cv::FileStorage fs("camera.xml", CV_STORAGE_READ);   fs["intrinsicMat"] >> K;   fs["distCoeffs"] >> distCoeffs;   cv::undistort(cv::imrea
続きを読む

2D-3D対応からのカメラ位置・姿勢の推定

画像からの三次元復元処理や拡張現実感のための位置合わせ処理において、画像を撮影したカメラの位置・姿勢が必要になることがある。ここでは、カメラの内部パラメータ（焦点距離、画像中心座標、アスペクト比など）は既知とし、カメラの外部パラメータ（並進と回転）を求める方法を紹介する。 カメラの位置・姿勢は、三次元位置が既知の点Pとその画像上での観測座標pの複数の対応から求めることが出来る。このような問題はPerspective-n-Pont Problem（PnP問題）として知られている。OpenCVにはPnP問題を解くための関数cv::SolvePnPが用意されている。この関数の入力は三次元位置が既知の点の配列(objectPoints)とその画像上での観測座標の配列(imagePoints)、カメラの内部パラメータ行列、歪係数を入力とし、カメラの外部パラメータ（回転ベクトル、並進ベクトル）を推定する。 対応点の組み合わせに誤対応が含まれている場合は、cv::SolvePnPRansacを用いることでロバスト推定手法であるRANSACを用いた誤対応の排除が可能である。 また、推定手法としてLevenberg-Marquardt法による最適化(cv::ITERATIVE)や高速な推定手法であるEPnP(cv::EPNP)を選択することができる。経験的にはcv::ITERATIVEの方が安定した推定を実現できるように思う。 さらに、回転ベクトル、並進ベクトルの初期値が得られている場合には、第7引数をtrueにし、出力用のrvec, tvecに値を設定しておくことで、最適化の際の初期値として使用することができる。拡張現実感などの場合には、直前のフレームでの推定結果などを初期値として用いることで推定結果の安定性を向上させることができる。 #include <iostream> #include <vector> #include <opencv2/opencv.hpp> void genRT(cv::Mat& rvect, cv::Mat& tvect); void getCorrespondingPairs(cv::Mat K, cv::Mat d, cv::Mat rvec, cv::Mat tvec, std:
続きを読む