您的位置:果粉114 > 分享h5调用摄像头实现拍照的实例教程

分享h5调用摄像头实现拍照的实例教程

2023-08-24 16:10

 分享h5调用摄像头实现拍照的实例教程

技术时刻都在前进着。我们的需求也是时刻在改变着。最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能。还有在登录了电脑之后,手机端进行登录时只需要扫描一下电脑上的二维码就可以登录。这对一个网络来说难度是极大的。技术的进步使我们遇到了HTML5下面这个简单粗暴的演示就是来完成这些功能的直接看代码:

 <!DOCTYPE html>  
    <HTML>  
    <HEAD>  
        <TITLE> HTML5调用摄像头实现拍照</ TITLE>  
        <meta charset =“utf-8”>  
        <meta name =“viewport”content =“width = device-width,initial-scale = 1”>  
    </ HEAD>  
    <BODY>  
    <video id =“video”autoplay =“”style ='width:640px; height:480px'> </ video>  
    <button id =“paizhao”>拍照</ button>   
    <canvas id =“canvas”width =“640”height =“480”> </ canvas>  
    <script type =“text / javascript”>  
        var video = document.getElementById(“video”);  
        var context = canvas.getContext(“2d”);  
        var errocb = function(){  
            console.log(“sth srong”);  
        }  
        如果(navigator.getUserMedia){  
            navigator.getUserMedia({ “视频”:真},函数(流){  
                video.src =流;  
                video.play();  
            },errocb);  
        } else if(navigator.webkitGetUserMedia){  
            navigator.webkitGetUserMedia({ “视频”:真},函数(流){  
                video.src = window.webkitURL.createObjectURL(流);  
                video.play();  
            },errocb);  
        }  
        的document.getElementById( “paizhao”)的addEventListener( “点击”,函数(){  
            context.drawImage(视频,0,0,640,480);  
        });  
    </ SCRIPT>  
    </ BODY>  
    </ HTML>

【相关推荐】

1. 通过H5实现拍照功能的实例详解

2. HTML5调用摄像头的示例代码分享

3. HTML5 程序设计

4. html5自定义遮罩的实现代码分享

5. 详细介绍AngularJS中使用HTML5摄像头拍照的图文详情

作者:零下一度

阅读全文
以上是果粉114为你收集整理的 分享h5调用摄像头实现拍照的实例教程全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 果粉114 gf114.com 版权所有 联系我们
桂ICP备19012293号-33 Powered by CMS