在HTML里加载摄像头的方法

效果图: 整体效果:

在HTML里加载摄像头的方法

视频加载:
 

在HTML里加载摄像头的方法

拍照:

在HTML里加载摄像头的方法

第一步:创建html元素

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

12345678910<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head> <body></body></html>

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

123<video id="video" width="640" height="480" autoplay></video><button id="snap">截图</button><canvas id="canvas" width="640" height="480"></canvas>

第二步:创建JavaScript

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

1234567891011121314151617181920212223242526272829303132<script language="javascript">// Grab elements, create settings, etc.var video = document.getElementById('video'); // Get access to the camera!if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {// Not adding `{ audio: true }` since we only want video nownavigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {//video.src = window.URL.createObjectURL(stream);video.srcObject = stream;video.play();});}/* Legacy code below: getUserMedia else if(navigator.getUserMedia) { // Standardnavigator.getUserMedia({ video: true }, function(stream) {video.src = stream;video.play();}, errBack);} else if(navigator.webkitGetUserMedia) { // WebKit-prefixednavigator.webkitGetUserMedia({ video: true }, function(stream){video.src = window.webkitURL.createObjectURL(stream);video.play();}, errBack);} else if(navigator.mozGetUserMedia) { // Mozilla-prefixednavigator.mozGetUserMedia({ video: true }, function(stream){video.srcObject = stream;video.play();}, errBack);}*/</script>

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

1234567891011<script language="javascript">// Elements for taking the snapshotvar canvas = document.getElementById('canvas');var context = canvas.getContext('2d');var video = document.getElementById('video'); // Trigger photo takedocument.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 640, 480);});</script>

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

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

原创文章,作者:Zhu, Yuanyuan,如若转载,请注明出处:https://www.yidc.net/archives/12207