<!doctype html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>HTML5调用手机摄像头,仅仅支持OPPOHD浏览器</title>

 <style>

 #video { border: 1px solid #ccc; display:inline-block; }

 #canvas { border: 1px solid #ccc; display:inline-block;}

 #take_photo{background-color:orange;width:100px;height:30px;border:0px;}

 </style>

 </head>

 <body>

 <video id="video" width="480" height="320" autoplay></video>

 <canvas id="canvas" width="480" height="320"></canvas>

 <input id="take_photo" name="take_photo" value="拍照" type="button" />

 </body>

 </html>  

 <script type="text/javascript">

     window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

     window.addEventListener("DOMContentLoaded", function () {

         var canvas = document.getElementById("canvas"), //画布容器

     context = canvas.getContext("2d"), //创建绘画对象

     video = document.getElementById("video"), //视频容器

     videoobj = { "video": true },

     errback = function (error) {

         console.log("error", error.code);

     };

         if (navigator.getUserMedia) {

             navigator.getUserMedia(videoobj, function (stream) {

                 video.src = stream;

             }, errback);

         } else if (navigator.webkitGetUserMedia) {//chrome

             navigator.webkitGetUserMedia(videoobj, function (stream) {

                 video.src = window.URL.createObjectURL(stream) || stream;

             }, errback)

         }

         else if (navigator.mozGetUserMedia) {//firefox

             navigator.mozGetUserMedia(videoobj, function (stream) {

                 video.src = window.URL.createObjectURL(stream) || stream;

             }, errback)

         }

         else if (navigator.msGetUserMedia) {//IE

             navigator.msGetUserMedia(videoobj, function (stream) {

                 video.src = window.URL.createObjectURL(stream) || stream;

             }, errback)

         }

         video.play();

         document.getElementById("take_photo").addEventListener("click", function () {

             context.drawImage(video, 0, 0, 480, 320); //视频截屏

         });

     }, false);

 </script>

HTML5调用手机摄像头,仅仅支持OPPOHD浏览器的更多相关文章

  1. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  2. html5调用手机摄像头，实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  3. 使用HTML5+调用手机摄像头和相册

    前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...

  4. html5调用手机摄像头

    <input type="file" accept="image/*" capture="camera"><input t ...

  5. getUserMedia API及HTML5 调用手机摄像头拍照

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  6. html5调用手机摄像头（图片可多选 限pc）

    html5自带的 input file=”” ,纯html5,并且不涉及到js ,就可以实现.代码如下: <input type="file" accept="im ...

  7. 亲测可用）html5 file调用手机摄像头

    在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...

  8. html5调取手机摄像头或相册

    html5调用手机摄像头或者相册 由于input的type=file 格式的文件的界面并不是我们所希望的界面,所以在此我隐藏input,自定义样式,这个样式就在<a>中自己定义,这里我就不 ...

  9. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

随机推荐

  1. lvs初体验

    一.简介 LVS是 Linux Virtual Server 的简称,也就是Linux虚拟服务器.这是一个由章文嵩博士发起的一个开源项目,它的官方网址是http://www.linuxvirtuals ...

  2. redis搭建

    redis 1.简介.安装 Remote Dictionary Server(Redis)是一个基于 key-value 键值对的持久化数据库存储系统.redis 和 Memcached 缓存服务很像 ...

  3. Jupyter Notebook里面使用Matplotlib画图 图表中文乱码问题

    可查看以下链接: https://blog.csdn.net/ccblogger/article/details/79613335

  4. HDOJ 1176 免费馅饼（完全背包）

    参考:https://blog.csdn.net/hhu1506010220/article/details/52369785 https://blog.csdn.net/enjoying_scien ...

  5. python, pycharm, virtualenv 的使用

    创建虚拟环境,一次安装多个库 pip freeze > requirements.txt (库的名字都在里面) 产生requirements.txt文件 在另一个环境下使用 pip instal ...

  6. WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法

    原文:WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法 问题描述 今天发现如果我想在一个TextBlock弄一个右键菜单,并且使用Command绑定,结果发 ...

  7. WPF中,如何将绑定源设置到单件实例

    原文:WPF中,如何将绑定源设置到单件实例  WPF中,如何将绑定源设置到单件实例                                       周银辉 大概两个月前,曾有位朋友问我:如 ...

  8. malloc分配失败的两个现象

    在实际代码中,malloc的反复分配释放,可能会导致某一次malloc分配失败,虽然上一次调用malloc分配成功(然后释放),下一次在相同地方调用malloc分配可能会失败,疑问在于,既然上一次分配 ...

  9. PADS9.5打开Altium designer09的原理图

    1. 打开PADS Logic原理图工具,文件---导入 2. 选择Protel DXP这个选项,找到相应的文件即可打开.

  10. SSM框架学习思维导图

    SSM框架学习思维导图 2017年08月11日 20:17:28 阅读数:1141 放上前段时间学习SSM框架以及Spring.SpringMVC.MyBatis的学习结果,输出思维导图一共四幅图.这 ...