利用HTML5 API接口实现调用摄像头拍照功能

小咪咪 2022-01-29 08:27 650阅读 0赞

想着研究下HTML5实现调用摄像头的一些方法。看了一下html5文档，主要是使用html5的*getUserMedia()*API，写一个例子来记录具体的使用方法。

<html>
    <body>
    
    <video id="video" autoplay style="width: 480px;height: 320px"></video>
    <div>
     <button id="capture" onclick="handleClickCapture()">拍照</button>
    </div>
    
    
    <canvas id="canvas" width="480" height="320"></canvas>
    
    <script>
     var video = document.getElementById('video');
     var capture = document.getElementById('capture');
     var ctx = document.getElementById('canvas').getContext('2d');
    
     /**
     * 调用用户媒体设备
     * @param constraints 配置信息
     * @param success 成功回调函数
     * @param error 失败回调函数
     */
     function getUserMediaToPhoto(constraints,success,error) {
     if(navigator.mediaDevices.getUserMedia){
     navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
     }else if (navigator.webkitGetUserMedia) {
     navigator.webkitGetUserMedia(constraints,success,error);
     }else if(navigator.mozGetUserMedia){
     navigator.mozGetUserMedia(constraints,success,error);
     }else if(navigator.getUserMedia){
     navigator.getUserMedia(constraints,success,error);
     }
     }
    
     /**
     * 成功回调函数
     * @param stream 视频流
     */
     function success(stream){
     var CompatibleURL = window.URL || window.webkitURL;
     try {
     video.src = CompatibleURL.createObjectURL(stream);
     } catch (e) {
     video.srcObject = stream;
     }
     video.play();
     }
    
     /**
     * 失败回调
     * @param error 错误对象
     */
     function error(error) {
     console.log('无法访问媒体设备', error);
     }
    
     if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
     getUserMediaToPhoto({video:{width:480,height:320}},success,error);
     }else{
     alert('不支持访问用户媒体设备');
     }
    
     /**
     * 拍照按钮点击事件
     */
     function handleClickCapture() {
     ctx.drawImage(video,0,0,480,320);
     }
    </script>
    </body>
    </html>

实现了基本的**HTML摄像头调用和拍照**，实现思路非常简单，基本上只是在调用api，唯一恶心的地方在于api版本比较多，不得不多做一些判断。具体的api介绍、使用和参数可以查看*MediaDevices.getUserMedia()*。

来自：[www.ruanally.com][]

[www.ruanally.com]: http://www.ruanally.com