Home > Article > Web Front-end > Share an example tutorial on using h5 to call the camera to take pictures

Share an example tutorial on using h5 to call the camera to take pictures

零下一度Original: 2017-05-31 15:20:395737browse

Technology is advancing all the time. Our needs are also changing all the time. Recently, during development, I encountered the problem that users need a personal image when registering an account, and the website provides an automatic photo taking function. Also, after logging in to the computer, when logging in on the mobile phone, you only need to scan the QR code on the computer to log in. This is extremely difficult for a network. The advancement of technology has led us to HTML5The following simple and crude demonstration is to complete these functions directly by looking at the code:

 <！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>

[Related recommendations]

1. Detailed examples of implementing the camera function through H5

2. HTML5 sample code sharing for calling the camera

3. HTML5 Programming

4. HTML5 custom mask implementation code sharing

5. Detailed introduction to the details of pictures and texts using HTML5 camera in AngularJS

The above is the detailed content of Share an example tutorial on using h5 to call the camera to take pictures. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Share an example tutorial of localStorage in html5Next article：Share an example tutorial of localStorage in html5

See more

Share an example tutorial on using h5 to call the camera to take pictures

Related articles