在HTML里加载摄像头的方法

效果图： 整体效果:

视频加载：
 

拍照：

第一步：创建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();
    }
    );
}
/* Legacy code below: getUserMedia else if(navigator.getUserMedia) {
 // Standard    navigator.getUserMedia({
 video: true }
, function(stream) {
            video.src = stream;
            video.play();
    }
    , errBack);
}
 else if(navigator.webkitGetUserMedia) {
 // WebKit-PRefixed    navigator.webkitGetUserMedia({
 video: true }
, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
    }
    , errBack);
}
 else if(navigator.mozGetUserMedia) {
 // Mozilla-prefixed    navigator.mozGetUserMedia({
 video: true }
, function(stream){
            video.srcObject = stream;
            video.play();
    }
    , errBack);
}
    *//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加载摄像头内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！