So verwenden Sie JS zum Aufrufen einer lokalen Kamera-js-Tutorial-php.cn

So verwenden Sie JS zum Aufrufen einer lokalen Kamera

php中世界最好的语言

Freigeben： 2018-05-28 15:37:54

Original

3887 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie JS verwenden, um eine lokale Kamera anzurufen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von JS, um eine lokale Kamera anzurufen?

Heute habe ich gelernt, wie man eine lokale Kamera aufruft. Das Folgende ist der Codeteil, der auf der Webseite geöffnet wird 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:

Wie man vue.js bedient und die 3DES-Verschlüsselung verwendet

Wie man JS zur Implementierung von 3des verwendet +Base64-Verschlüsselungs- und Entschlüsselungsalgorithmus

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS zum Aufrufen einer lokalen Kamera. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!