效果图： 整体效果:
视频加载：
拍照：
第一步：创建HTML元素
首先，我们要创建一个HTML5的文档。
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body></body></html>然后在<body></body>插入以下代码：
<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：
<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 now navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) { //video.src = window.URL.createObjectURL(stream); video.srcObject = stream; video.play(); });}</script>随后，要在刚才创建的HTML元素的后面插入以下代码：
<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加载摄像头内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
最新文章
热门文章
猜你喜欢
