首頁 > 文章 > web前端 > 分享h5調用相機實現拍照的實例教程

分享h5調用相機實現拍照的實例教程

零下一度原創: 2017-05-31 15:20:395751瀏覽

技術時刻都在前進。我們的需求也是時時刻刻在改變著。最近在開發中遇到了用戶進行帳號註冊時需要個人圖像，網站提供自動拍照功能。還有登入了電腦之後，手機端登入時只需要掃描一下電腦上的二維碼就可以登入。這對一個網路來說難度是極大的。科技的進步使我們遇到了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 =&#39;width：640px; height：480px&#39;> </ 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>

【相關推薦】

#5. 詳細介紹AngularJS中使用HTML5攝影機拍照的圖文詳情

以上是分享h5調用相機實現拍照的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：分享html5中localStorage的實例教學下一篇：分享html5中localStorage的實例教學

看更多