コメント：モバイルデバイスとデスクトップコンピューターのクライアントAPIは、最初は同期されていませんでした。当初、最初にモバイルデバイスには常にいくつかの機能と対応するAPIがありますが、ゆっくりと、これらのAPIはデスクトップコンピューターに表示されます。アプリケーションインターフェイステクノロジーの1つは、GetUserMedia APIです。これにより、アプリケーション開発者はユーザーのカメラまたは組み込みカメラにアクセスできます。
モバイルデバイスとデスクトップコンピューターのクライアントAPIは、最初は同期されていませんでした。当初、最初にモバイルデバイスには常にいくつかの機能と対応するAPIがありますが、ゆっくりと、これらのAPIはデスクトップコンピューターに表示されます。アプリケーションインターフェイステクノロジーの1つは、GetUserMedia APIです。これにより、アプリケーション開発者はユーザーのカメラまたは組み込みカメラにアクセスできます。ブラウザを介してカメラにアクセスし、スクリーンショットを抽出する方法をお見せしましょう。
HTMLコード
次のコードにいくつかのコメントを書きました。
<！ -
理想的には、最初にお使いのデバイスがオンになっているかどうかを判断する必要があります
カメラやカメラがありますが、簡単にするために、私たちは直接ここにいます
JavaScriptを使用して最初に判断する代わりにHTMLタグを書きます
次に、これらのタグを動的に生成します
- >
<ビデオオートプレイ> </video>
<ボタン>スナップ写真</button>
<canvas> </canvas>
上記のタグを書く前に、ユーザーのクライアントがカメラサポートを持っているかどうかを判断する必要があります。ただし、それほど面倒ではないために、これらのHTMLタグはここで直接記載されています。ここで使用する長さと幅は640×480であることに注意してください。
JavaScriptコード
HTMLを手作業で書くため、次のJSコードはあなたが思っているよりもはるかに簡単になります。
//イベントリスナーを配置します
window.addeventlistener（ "domcontentloaded"、function（）{
//要素をつかむ、設定の作成など。
var canvas = document.getElementById（ "Canvas"）、
Context = canvas.getContext（ "2d"）、
ビデオ= document.getElementById（ "ビデオ"）、
videobj = {"video"：true}、
errback = function（error）{
console.log（ "ビデオキャプチャエラー："、error.code）;
};
//ビデオリスナーを配置します
if（navigator.getusermedia）{//標準
navigator.getusermedia（videobj、function（stream）{
video.src = stream;
video.play（）;
}、errback）;
} else if（navigator.webkitgetusermedia）{// webkit-prefixed
navigator.webkitgetusermedia（videobj、function（stream）{
video.src = window.webkiturl.createobjecturl（stream）;
video.play（）;
}、errback）;
}
else if（navigator.mozgetusermedia）{// firefox-prefixed
navigator.mozgetusermedia（videobj、function（stream）{
video.src = window.url.createobjecturl（stream）;
video.play（）;
}、errback）;
}
}、 間違い）;
ユーザーのブラウザがgetUsermediaをサポートしていると判断されると、以下は非常に簡単です。そのビデオ要素のSRCをユーザーのカメラライブビデオ接続に設定するだけです。ブラウザでカメラにアクセスするために必要なことはすべてです！
写真を撮る機能は、もう少し複雑であると言えます。ボタンにモニターを追加して、キャンバスにビデオを描画します。
//写真アクションをトリガーします
document.getElementById（ "Snap"）
.addeventlistener（ "click"、function（）{
context.drawimage（ビデオ、0、0、640、480）;
}）;
もちろん、写真にフィルター効果を追加することもできます...
過去には、サードパーティのプラグインを使用して、ブラウザからユーザーのカメラにアクセスする必要がありましたが、これは少し複雑でした。これで、ユーザーのカメラを簡単かつ迅速に操作するために、HTML5 CanvasテクノロジーとJavaScriptのみが必要です。カメラにアクセスするだけでなく、HTML5のCanvasテクノロジーが非常に強力であるため、さまざまな魅力的なフィルター効果を写真に追加できるからです。次に、自分のカメラを使用して、ブラウザで自分の写真を撮ってください！