首页>前端>HTML> 文章正文

在HTML里加载摄像头的方法

来源: HTML 2021-05-10 22:10 阅读: 16
效果图:整体效果: 视频加载: 拍照: 第一步:创建HTML元素 首先,我们要创建一个HTML5的文档。

效果图:整体效果:

在HTML里加载摄像头的方法

视频加载:


在HTML里加载摄像头的方法


拍照:

在HTML里加载摄像头的方法

第一步:创建HTML元素

首先,我们要创建一个HTML5的文档。

<!doctypehtml>

<html>

<head>

<metacharset="utf-8">

<title>无标题文档</title>

</head>

<body>

</body>

</html>

然后在<body></body>插入以下代码:

<videoid="video"width="640"height="480"autoplay></video>

<buttonid="snap">截图</button>

<canvasid="canvas"width="640"height="480"></canvas>

第二步:创建JavaScript

首先,要在<head></head>里创建一个JavaScript:

<scriptlanguage="javascript">

//Grabelements,createsettings,etc.

varvideo=document.getElementById('video');

//Getaccesstothecamera!

if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){

//Notadding`{audio:true}`sinceweonlywantvideonow

navigator.mediaDevices.getUserMedia({video:true}).then(function(stream){

//video.src=window.URL.createObjectURL(stream);

video.srcObject=stream;

video.play();

});

}

/*Legacycodebelow:getUserMedia

elseif(navigator.getUserMedia){//Standard

navigator.getUserMedia({video:true},function(stream){

video.src=stream;

video.play();

},errBack);

}elseif(navigator.webkitGetUserMedia){//WebKit-prefixed

navigator.webkitGetUserMedia({video:true},function(stream){

video.src=window.webkitURL.createObjectURL(stream);

video.play();

},errBack);

}elseif(navigator.mozGetUserMedia){//Mozilla-prefixed

navigator.mozGetUserMedia({video:true},function(stream){

video.srcObject=stream;

video.play();

},errBack);

}

*/

</script>

随后,要在刚才创建的HTML元素的后面插入以下代码:

<scriptlanguage="javascript">

//Elementsfortakingthesnapshot

varcanvas=document.getElementById('canvas');

varcontext=canvas.getContext('2d');

varvideo=document.getElementById('video');

//Triggerphototake

document.getElementById("snap").addEventListener("click",function(){

context.drawImage(video,0,0,640,480);

});

</script>

现在,这个HTML就可以完成打开摄像头,和拍照的功能了!

到此这篇关于如何在HTML里加载摄像头的方法的文章就介绍到这了,更多相关html加载摄像头内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网!