Detaillierte Erläuterung der Schritte zum Aufrufen der lokalen Kamerafunktion mithilfe von JS-js-Tutorial-php.cn

Detaillierte Erläuterung der Schritte zum Aufrufen der lokalen Kamerafunktion mithilfe von JS

php中世界最好的语言

Freigeben： 2018-05-23 10:13:18

Original

2552 Leute haben es durchsucht

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zum Aufrufen der lokalen Kamerafunktion mit JS. Was sind die Vorsichtsmaßnahmen zum Aufrufen der lokalen Kamerafunktion mit JS? Schauen Sie mal rein.

Heute habe ich erfahren, dass die Implementierung einer lokalen Kamera nicht sehr schwierig ist. Stellen Sie eine Verbindung zum Tomcat-Server her und öffnen Sie ihn dann auf der Webseite die Wirkung. . Kommen Sie und haben Sie Spaß!

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<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>
</head>
<body>
<video width="640" height="480" id="myVideo"></video>
<canvas width="640" height="480" id="myCanvas"></canvas>
<button id="myButton">截图</button>
<button id="myButton2">预览</button>
<button id="myButton3">
<a download="video.png">另存为</a>
</button>
</body>
<script>
window.addEventListener('DOMContentLoaded',function(){
var cobj=document.getElementById('myCanvas').getContext('2d');
var vobj=document.getElementById('myVideo');
getUserMedia({video:true},function(stream){
vobj.src=stream;
vobj.play();
},function(){});
document.getElementById('myButton').addEventListener('click',function(){
cobj.drawImage(vobj,0,0,640,480);
document.getElementById('myButton3').children[0].href=cobj.canvas.toDataURL("image/png");
},false);
document.getElementById('myButton2').addEventListener('click',function(){
window.open(cobj.canvas.toDataURL("image/png"),'_blank');
},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>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ausführliche Erläuterung der Schritte der JS-Implementierung der Sortierung von JSON-Objektarrays nach Objekteigenschaften

Ausführlich Erläuterung der Schritte der JS-Implementierung der Kollisionserkennung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Aufrufen der lokalen Kamerafunktion mithilfe von JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!