JSを使ってローカルカメラ機能を呼び出す手順を詳しく解説

今回はJSでローカルカメラ関数を呼び出す手順を詳しく解説します。JSでローカルカメラ関数を呼び出す際の注意点を実際に見てみましょう。

今日は、js を使用してローカル カメラを呼び出す方法を学びました。実際、次のコード部分は Tomcat サーバーに接続し、Web ページで開きます。効果。 。ぜひ遊びに来てください！

nbsp;html>


<meta>
<title></title>
<style>
video {
 border: 1px solid #ccc;
 display: block;
 margin: 0 0 20px 0;
 float:left;
}
canvas {
 margin-top: 20px;
 border: 1px solid #ccc;
 display: block;
}
</style>


<video></video>
<canvas></canvas>
<button>截图</button>
<button>预览</button>
<button>
<a>另存为</a>
</button>

<script>
window.addEventListener(&#39;DOMContentLoaded&#39;,function(){
var cobj=document.getElementById(&#39;myCanvas&#39;).getContext(&#39;2d&#39;);
var vobj=document.getElementById(&#39;myVideo&#39;);
getUserMedia({video:true},function(stream){
vobj.src=stream;
vobj.play();
},function(){});
document.getElementById(&#39;myButton&#39;).addEventListener(&#39;click&#39;,function(){
cobj.drawImage(vobj,0,0,640,480);
document.getElementById(&#39;myButton3&#39;).children[0].href=cobj.canvas.toDataURL("image/png");
},false);
document.getElementById(&#39;myButton2&#39;).addEventListener(&#39;click&#39;,function(){
window.open(cobj.canvas.toDataURL("image/png"),&#39;_blank&#39;);
},false);
},false);
function getUserMedia(obj,success,error){
if(navigator.getUserMedia){
getUserMedia=function(obj,success,error){
navigator.getUserMedia(obj,function(stream){
success(stream);
},error);
}
}else if(navigator.webkitGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.webkitGetUserMedia(obj,function(stream){
var _URL=window.URL || window.webkitURL;
success(_URL.createObjectURL(stream));
},error);
}
}else if(navigator.mozGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.mozGetUserMedia(obj,function(stream){
success(window.URL.createObjectURL(stream));
},error);
}
}else{
return false;
}
return getUserMedia(obj,success,error);
}
</script>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS でオブジェクト プロパティによる json オブジェクト配列の並べ替えを実装する手順の詳細な説明

JS で衝突検出を実装する手順の詳細な説明

以上がJSを使ってローカルカメラ機能を呼び出す手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。