HTML调用手机摄影头

转载 2016年12月12日 13:37:19
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Insert title here</title>  
  6. </head>  
  7. <body>  
  8. <video id="video" autoplay=""style='width:640px;height:480px'></video>  
  9. <div><button id='picture' style="width: 100%;">PICTURE</button></div>  
  10. <canvas id="canvas" width="640" height="480"></canvas>  
  11. <script type="text/javascript">  
  12. var video = document.getElementById("video");  
  13. var context = canvas.getContext("2d");  
  14. var errocb = function () {  
  15.     console.log('sth wrong!');  
  16. }  
  17.   
  18. if (navigator.getUserMedia) { // 标准的API  
  19.     navigator.getUserMedia({ "video": true }, function (stream) {  
  20.         video.src = stream;  
  21.         video.play();  
  22.     }, errocb);  
  23. } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API  
  24.     navigator.webkitGetUserMedia({ "video": true }, function (stream) {  
  25.         video.src = window.webkitURL.createObjectURL(stream);  
  26.         video.play();  
  27.     }, errocb);  
  28. }  
  29.   
  30. document.getElementById("picture").addEventListener("click", function () {  
  31.     context.drawImage(video, 0, 0, 640, 480);  
  32. });  
  33. </script>  
  34.   
  35. </body>  
  36. </html>  

Web调用安卓,苹果手机摄像头,本地图片和文件

由于要给一个客户做一个记账WAP,里面有调用手机拍照功能,这里记录一下,以供需要的朋友,下面是完整的一个HTML页面内容,放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,我测...
  • jwzhangjie
  • jwzhangjie
  • 2014年10月23日 09:40
  • 61336

HTML的头部信息里你不知道的事

HTML中我们一般把head部分称为网页的头部。头部部分的内容虽然不会在页面中显示,但它能影响到搜索引擎对网页的收录和排序,以及网页的各种全局设置,可以说是至关重要。 ▲知识点一——头部...
  • chongshangyunxiao321
  • chongshangyunxiao321
  • 2016年04月18日 09:56
  • 1636

手机摄影(1)

什么是构图?从本质上说,当取景时,你会选择如何安排镜头中的视觉元素,如线条、形状、颜色和光线等元素。由此产生的安排是你的构图。 构图不仅影响图像的动和静的视觉,也影响观察者的想法和感觉。举个例子,如...
  • bdss58
  • bdss58
  • 2016年05月12日 11:26
  • 304

HTML5 调用手机摄像头扫描二维码

最近有个项目需要使用H5调用手机摄像头扫描二维码斌且识别。(很奇葩的需求) 百度了下找到了这个api: 旧版:(目前只有UC浏览器支持,其他的手机浏览器一律没有反应) https://develope...
  • sas6216402fx
  • sas6216402fx
  • 2017年04月01日 13:32
  • 3913

html5调用手机相机并压缩、上传

近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传。 从功能上看,原生的实现应该是最好的。毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又...
  • qq_15602525
  • qq_15602525
  • 2016年09月21日 10:25
  • 730

html5 canvas画图手电筒效果

实现效果为鼠标移动,在鼠标的一定范围之内显示隐藏图片的一部分 body{ margin:0;padding:0;} this is a image ...
  • xiongqiangwin1314
  • xiongqiangwin1314
  • 2015年09月19日 10:54
  • 553

HTTP请求头部+响应码

本篇博文主要介绍HTTP请求-响应的系列过程,包括四个部分:一、当在浏览器输入一个网址后,实际会发生什么?二:TCP连接的3次握手和连接释放的4次握手;三:HTTP的头部信息;四、HTTP的状态码。...
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016年07月17日 21:26
  • 7719

HTML----常用HEAD头标

DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。 DTD(Do...
  • damys
  • damys
  • 2015年01月20日 20:46
  • 980

手机摄影(2)

在[上一篇]介绍了拍摄时候的构图要素,包括光纤、线条、颜色、空间以及反射阴影。本篇再介绍一下如何巧妙利用手机相机的局限性。1. 快门速度手机为了让更多的光线进入感光元件,会减小快门速度。这意味着,拍摄...
  • bdss58
  • bdss58
  • 2016年05月13日 11:19
  • 186

【转载】倾斜摄影当中模型精度和测绘当中的分辨率/比例尺是怎么回事?

原文地址:http://www.jianshu.com/p/817406466b3d 1序 倾斜摄影是最近比较火的一个话题,但也引出了一些问题,有些需要倾斜摄影数据的单位或者公...
  • wangq159
  • wangq159
  • 2017年03月07日 16:54
  • 701
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML调用手机摄影头
举报原因:
原因补充:

(最多只允许输入30个字)