집 > 기사 > 웹 프론트엔드 > JS를 사용하여 로컬 카메라 기능을 호출하는 단계에 대한 자세한 설명

JS를 사용하여 로컬 카메라 기능을 호출하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-23 10:13:182586검색

이번에는 JS로 로컬 카메라 함수를 호출하는 단계에 대해 자세히 설명하겠습니다. JS로 로컬 카메라 함수를 호출할 때 주의사항은 무엇인가요?

오늘은 js를 사용하여 로컬 카메라를 호출하는 방법을 배웠습니다. 실제로 구현하는 것은 크게 어렵지 않습니다. 다음은 Tomcat 서버에 연결한 후 웹 페이지에서 열어서 확인하는 부분입니다. 효과. . 오셔서 즐거운 시간을 보내세요!

<!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>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!