Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Schritte zum Aufrufen der lokalen Kamerafunktion mithilfe von JS

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

php中世界最好的语言Original: 2018-05-23 10:13:182586Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zwei Lösungen für das Problem, dass Ajax ein neues Fenster öffnet und vom Browser abgefangen wirdNächster Artikel：Zwei Lösungen für das Problem, dass Ajax ein neues Fenster öffnet und vom Browser abgefangen wird

In Verbindung stehende Artikel

Mehr sehen