5分でウェブブラウザからカメラ・アクセスを実行する方法

The MediaDevices.getUserMedia() 唯一のAPIは、Webブラウザからカメラにアクセスするために使用されます.それは簡単ですが、完全なWebカメラのビューアを実装するには、まだ仕事がたくさんあります.Dynamsoftがリリースするまで、既存のJavaScriptカメラウィジェットはありませんでしたCamera Enhancer library 最近.今、すべてが容易になります.この記事は、Dynamsoftが提供する無料JavaScriptカメラライブラリを使用してWebカメラビューアを実装する手順を共有します.

カメラSDKをインストール
JavaScriptカメラSDKが公開されて以来npmjs.com , 次の行を含めるだけでインストールできますindex.html ファイル

<script src="https://unpkg.com/[email protected]/dist/dce.js"></script>

独自のWebサーバーにライブラリを配備するには、NPMパッケージをダウンロードできます.

npm i dynamsoft-camera-enhancer

Webブラウザからの開放カメラの実装
DynamsoftカメラエンハンサーJavaScript版では、Webカメラビューアを実装することは決して容易にすることはできません.2つの手順しかありません.

コンテナとしてHTML div要素を作成します

<div id="enhancerUIContainer" style="height: 100vh;"></div>

高さを設定する100vh カメラのビューアをフルスクリーンにする.

Dynamsoftカメラエンハンサーでコンテナを初期化します.

let enhancer = null;
(async () => {
    enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
    document.getElementById("enhancerUIContainer").appendChild(enhancer.getUIElement());
    await enhancer.open(true);
})();

簡単なWebカメラビューアが行われます.ビューアは3つの部分から成ります:カメラのソースリスト、カメラの解像度のリスト、およびカメラのプレビューは、ほとんどのWeb開発者によって必要な主要なコンポーネントです.
カメラのフレームを取得する方法を尋ねることがあります.あなたがカメラフレームで何かをしたいならば、あなたは電話することができますgetFrame() . 詳細についてはAPI documentation .
ここでフレームをキャプチャし、キャプチャされたフレームをポップアップウィンドウに表示するボタンを追加できます.

<button id="capture">Capture</button>
<script>
    document.getElementById('capture').onclick = () => {
        if (enhancer) {
            let frame = enhancer.getFrame();

            let width = screen.availWidth;
            let height = screen.availHeight;
            let popW = 640, popH = 640;
            let left = (width - popW) / 2;
            let top = (height - popH) / 2;

            popWindow = window.open('', 'popup', 'width=' + popW + ',height=' + popH +
                ',top=' + top + ',left=' + left + ', scrollbars=yes');

            popWindow.document.body.appendChild(frame.canvas);
        }
    };
</script>

注意:フレームはJavaScript BlobオブジェクトでもJavaScriptバッファーオブジェクトでもありません.それはDynamsoftによって定義されたタイプです.真のカメラフレームデータは、内蔵のキャンバスオブジェクトに格納されます.
バーコードスキャン、オブジェクトの検出、顔認識などのいくつかの画像処理を継続的に行う場合はtimer 呼ぶgetFrame() 数ミリ秒ごと.

展開と使用
最後に、プロジェクトを配備しましょう.Webカメラアクセスはhttpsを必要とするので、ローカルのWebサーバをngrokでhttpsに転送するか、githubページを使うことができます.
コードは完璧にiOS、Android、デスクトップのWebブラウザで動作することができます.複数のバックカメラの選択は、Android上でのみサポートされます.以下のスクリーンショットは、計算されたプロからです.


ソースコード
https://github.com/yushulx/web-browser-camera-access