开发者社区> 问答> 正文

html5怎么调用系统相机

html5怎么调用系统相机?现在需要开发一个支付界面调用系统相机拍照上传图片到服务器,是否可行。

展开
收起
云栖技术 2016-06-06 17:31:52 2261 0
2 条回答
写回答
取消 提交回答
  • 可以用input标签实现,<input type='file'></input>

    2019-07-17 19:29:06
    赞同 展开评论 打赏
  • 社区爱好者,专为云栖社区服务!
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
     
    <head>
     
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
     
        <title>Document</title>
     
    </head>
     
    <body>
     
            <video id="video" autoplay=""style='width:640px;height:480px'></video>
     
            <button id="picture">photo</button> 
     
            <canvas id="canvas" width="640" height="480"></canvas>
     
    </body>
     
     <script type="text/javascript">
     
       var video = document.getElementById("video");
     
       var context = canvas.getContext("2d")
     
       var errocb = function () {
     
                              console.log('sth wrong!');
     
          }
     
          if (navigator.getUserMedia) { // 标准的API
     
                    navigator.getUserMedia({ "video": true }, function (stream) {
     
                        video.src = stream;
     
                        video.play();
     
                    }, errocb);
     
     } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API
     
                    navigator.webkitGetUserMedia({ "video": true }, function (stream) {
     
                        video.src = window.webkitURL.createObjectURL(stream);
     
                        video.play();
     
                    }, errocb);
     
      }
     
      document.getElementById("picture").addEventListener("click", function () {
     
                    context.drawImage(video, 0, 0, 640, 480);
     
     });
     
     </script>
     
    </html>
    2019-07-17 19:29:06
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
《零基础HTML入门教程》 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载