<!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. 实现高可用-Keepalived

    简介 Keepalived是HA Cluster(High Availability Cluster,高可用集群)的一个服务软件,用来防止单点故障. Keepalived采用VRRP(virtual ...

  2. npm install 报错

    今天准备在服务器上部署一下pm2,发现 npm install -g pm2   爆出了错误 error Unexpected end of JSON input while parsing near ...

  3. Angular2中使用Jsonp

    除了引入HttpModule模块,还要引入 JsonpModule 模块 import { HttpModule, JsonpModule } from '@angular/http'; Observ ...

  4. python函数（2017-8-2）

    1. def 函数名(形式参数) 函数体 return "123" 函数执行了return之后就不再执行下面的代码 2. 默认形参实参的位置一一对应 如果要调整位置,指定形参名字 ...

  5. Python3 列表，元组，字典，字符串知识小结

    一.知识概要 1. 列表,元组,字典,字符串的创建方式 2. 列表,元组,字典,字符串的方法调用 3. 列表,元组,字典,字符串的常规用法 二.列表 # 列 表 # 列表基础 list_1 = ['a ...

  6. ccf201703-2 STLlist

    题目:http://118.190.20.162/view.page?gpid=T56 问题描述 体育老师小明要将自己班上的学生按顺序排队.他首先让学生按学号从小到大的顺序排成一排,学号小的排在前面, ...

  7. C#中Equals和= =(等于号)的比较)（转载）

    C#中Equals和= =(等于号)的比较) 相信很多人都搞不清Equals和 = =的区别,只是零星的懂一点,现在就让我带大家来进行一些剖析 一.           值类型的比较 对于值类型来说  ...

  8. MySQL server has gone away 错误处理

    解决方案1: 这个是mysql自身的一个机制:     mysql连接的空闲时间超过8小时后 MySQL自动断开该连接解决办法有两个:     1.修改mysql 配置               增 ...

  9. CC3100BoosterPack和CC31XXEMUBOOST板子的测试

    1. 先测试右边的CC3100BoosterPack,测试发现LDO坏了,无法输出3.3V,所以只能用左边的板子供电. 2. 插上CC31XXEMUBOOST板子的J1,两个板子插在一起,等待驱动安装 ...

  10. 【实用】如何将sublime text 3 打造成实用的python IDE 环境

    前段时间写脚本,一直使用的是pycharm ,无奈机器不配置实在不怎么样,我记得之前用过subline text,这是我用过的最酷炫的文本编辑器,参考了一下网上的文章,自己走了一些弯路,将心得写在这里 ...