<!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的作用是检测服务器的状态,如果有一台web服务器宕机,或工作出现故障,Keepalived将检测到,并将有故障的服务器从系统中剔除,同时使用其他服务器代替该服务器的工作,当服 ...

  2. xpath技术解析xm文件（php）

    1.结合php dom技术的学习,得出一个结论:php dom技术可以跨层取出节点,但是不能保持层次关系,使用xpath可以很好地解决问题. *** xpath技术的核心思想:迅速简洁的定位你需要查找 ...

  3. 构建ExtJS 6.x程序

    构建ExtJS 6.x程序 ExtJS也有自己的打包工具 SenchaCmd,它用来生成构建ExtJS前端组织架构,最后打包发布生产,操控着前端整个开发生命周期,SenchaCmd依赖于JDK,所以要 ...

  4. [转]win7下修改C盘USERS文件下的名称

    Win7下C:\Users\Cortana以账户名称命名的系统文件夹用户名的修改   Win7下C:\Users\Cortana以账户名称命名的系统文件夹用户名的修改 Win7下C:\Users\Co ...

  5. STM32CubeMx配置SPI注意的一个问题

    这样配置SPI引脚 然后这样配置SPI参数 生成立这样的配置代码 /* SPI2 init function */static void MX_SPI2_Init(void){ /* SPI2 par ...

  6. JSOI2018 R1 & 九省联考2018 滚粗记

    在NOIP与PKUWC相继滚粗后,rp守恒定律似乎终于开始起作用了…… (尽管Day2依然滚粗?) Day1: 本着前40min不写代码的准则,先把三道题大致过了一遍,似乎都比较喜闻乐见? T1:对抗 ...

  7. 4368: [IOI2015]boxes纪念品盒

    4368: [IOI2015]boxes纪念品盒 链接 分析 链接 代码 #include<bits/stdc++.h> using namespace std; typedef long ...

  8. ORB-SLAM 代码笔记（三）tracking原理

    ORB视觉里程计主体在tracking线程中

  9. Spring研磨分析、Quartz任务调度、Hibernate深入浅出系列文章笔记汇总

    Spring研磨分析.Quartz任务调度.Hibernate深入浅出系列文章笔记汇总 置顶2017年04月27日 10:46:45 阅读数:1213 这系列文章主要是对Spring.Quartz.H ...

  10. centos redis 安装 php-redis扩展安装 及使用

    前提:centos7.php7 安装redis-server 1:yum install redis 编译安装php-redis 扩展 1:下载编译安装 wget https://codeload.g ...