在HTML里加载摄像头的方法

时间：2021-05-08

效果图： 整体效果:

视频加载：


拍照：

第一步：创建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加载摄像头内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章