HTML5 Canvas JS はコンピュータまたは携帯電話のカメラを制御します。instance_html5 チュートリアルのスキル

モバイル デバイスとデスクトップ コンピューター上のクライアント API は、初期状態では同期されていません。当初、特定の機能と対応する API は常にモバイル デバイスで利用できますが、徐々にこれらの API はデスクトップ コンピューターにも表示されるようになります。このようなアプリケーション インターフェイス テクノロジの 1 つは getUserMedia API で、アプリケーション開発者はこれを使用してユーザーのカメラまたは内蔵カメラにアクセスできます。ブラウザーからカメラにアクセスし、スクリーンショットを抽出する方法を説明します。

HTML コード

以下のコードにいくつかのコメントを書きました。読んでください:

コードをコピーします

コードは次のとおりです:

写真をスナップ

上記のタグを記述する前に、ユーザーのクライアントがカメラをサポートしているかどうかを判断する必要がありますが、トラブルを避けるために、これらの HTML タグはここで直接記述されています。ここで使用する長さと幅は 640×480 であることに注意してください。

JavaScript コード

HTML を手動で記述したため、次の JS コードは思っているよりもはるかに単純です。

コードをコピーします

コードは次のとおりです:

// イベントリスナーを配置します
window.addEventListener("DOMContentLoaded", function() {
// 要素の取得、設定の作成など
var Canvas = document.getElementById("canvas"),
context = Canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "ビデオ": true },
errBack = 関数(エラー) {
console.log("ビデオ キャプチャ エラー: ", error.code); };
// ビデオ リスナーを配置します
if(navigator.getUserMedia) { // 標準
navigator.getUserMedia(videoObj, function(stream) {
video.src = ストリーム;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit プレフィックス付き
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox プレフィックス付き
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);

ユーザーのブラウザが getUserMedia をサポートしていると判断したら、次の作業は非常に簡単です。video 要素の src をユーザーのカメラのライブ ビデオ接続に設定するだけです。ブラウザを使用してカメラにアクセスするために必要なのはこれだけです。
写真を撮る機能は少し複雑としか言えません。ボタンにリスナーを追加し、ビデオ画面をキャンバスに描画します。

コードをコピーしますコードは次のとおりです:

//写真アクションをトリガー
document.getElementById("スナップ")
.addEventListener("クリック", function() {
context.drawImage(ビデオ, 0, 0, 640, 480);
});

もちろん、写真にフィルター効果を追加することもできます…
以前は、ブラウザからユーザーのカメラにアクセスするにはサードパーティのプラグインを使用する必要があり、やや複雑でした。 HTML5 キャンバス テクノロジと JavaScript だけがあれば、ユーザーのカメラを簡単かつ迅速に操作できるようになります。カメラにアクセスできるだけでなく、HTML5 の強力なキャンバス テクノロジーにより、写真にさまざまな魅力的なフィルター効果を追加できます。さあ、ブラウザ上の自分のカメラで自分の写真を撮りましょう。