阿哥论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 125|回复: 0

HTML5实现按键打开摄像头和拍照

[复制链接]

升级  50%

举人

Rank: 3Rank: 3

积分
350
 楼主| 发表于 2020-4-24 16:02:53 | 显示全部楼层 |阅读模式
步骤:
1、创建一个打开摄像头按钮的标签、video标签、拍照的按钮标签、画布
2、实现打开摄像头的功能
3、实现拍照功能

具体实现代码:

<!DOCTYPE html>
<html>
        <head>
                   <meta charset="UTF-8">
                   <title>takePhoto</title>
                   <script type="text/javascript">
                             window.addEventListener("DOMContentLoaded",function(){
                                     var drawing = document.getElementById("drawing");
                                       if(drawing.getContext)
                                      {
                                                context = drawing.getContext("2d");
                                      }
                                     var video = document.getElementById("video");
                                     var med = {video:true};
                                     var errBack = function(e)
                                     {
                                               alert("An error has occurred",e)
                                     }
                                     var onCamera = document.getElementById("onCamera");
                                     var takePhoto = document.getElementById("takePhoto")
                               
                                     //实现通过按钮打开摄像头的功能
                                     onCamera.addEventListener("click",function(){
                                             f(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
                                             {
                                                       navigator.mediaDevices.getUserMedia(med).then(function(stream){
                                                               video.src = window.URL.createObjectURL(stream);
                                                               video.play();
                                                     })
                                                    console.log(navigator.mediaDevices.getUserMedia(med))
                                            }
                                    },false);
                                    //实现将拍照功能
                                    takePhoto.addEventListener("click",function(stream){
                                            context.drawImage(video,0,0,640,480)
                                    },false);
                            },false)
                    </script>
          </head>
          <body>
                    <button id="onCamera">打开摄像头</button>
                    <video id="video" width="640" height="480"></video>
                    <button id="takePhoto">拍照</button>
                    <canvas id="drawing" width="640" height="480">A drawing of something</canvas>
        </body>
</html>
摘自:https://www.cnblogs.com/MyUniverse/p/10014231.html
该会员没有填写今日想说内容.
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则


快速回复 返回顶部 返回列表