<!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. Linux环境下tomcat如何热部署

    1.修改tomcat配置文件 1.1第一步修改tomcat-users.xml <role rolename="manager-gui" /> <role rol ...

  2. flutter开发之配置环境以及一些问题的处理方案~

        今天flutter1.0已经发布了,有没有一点小小的兴奋,为了纪念这个令人激动的日子,我决定发一篇flutter的基本环境搭建的教程送给大家:) 由于这是一篇关于flutter配置环境的教程, ...

  3. 吐血分享：QQ群霸屏技术教程2017（问题篇）

    霸屏技术,问题篇后,暂时搁置,尔望后续. 这里针对操作中,经常遇到的问题,做个简单整理. 回忆下,排名流程. 1.建群,品牌产品群,做任何关键词都是品牌产品群,皆因其有独特的优势. 2.拉人,填充群人 ...

  4. 21.1 XMLHttpRequest 对象【JavaScript高级程序设计第三版】

    IE5 是第一款引入XHR 对象的浏览器.在IE5 中,XHR 对象是通过MSXML 库中的一个ActiveX对象实现的.因此,在IE 中可能会遇到三种不同版本的XHR 对象,即MSXML2.XMLH ...

  5. 消费滚动滴log日志文件(flume监听,kafka消费,zookeeper协同)

    第一步:数据源 手写程序实现自动生成如下格式的日志文件: 15837312345,13737312345,2017-01-09 08:09:10,0360 打包放到服务器,使用如下命令执行,模拟持续不 ...

  6. 解决如下出错：DeprecationWarning: Passing 1d arrays as data is deprecated in 0.17 and willraise ValueError in 0.19.

    背景:在Spyder中写几行脚本,目的是应用sklearn自带的svm(支持向量机)算法,来对其自带的digits(手写体数字)数据集进行分类,过程包括训练阶段和预测阶段.将手写体数字数据的特征数据d ...

  7. HBase import tsv,csv File

    一,HBase中创建table 表(liupeng:test)并创建 info ,contect 列簇 hbase(main):258:0> create "liupeng:Test& ...

  8. 洛谷P1090 合并果子

    合并果子 题目链接 这个只能用于结构体中 struct item { int val; friend bool operator < (item a,item b) { return a.val ...

  9. Python的re模块的常用方法

    一.re的match与search方法 1.re.match方法 re.match 尝试从字符串的起始位置匹配一个模式,匹配成功re.match方法返回一个匹配的对象,如果不是起始位置匹配成功的话,m ...

  10. Android: Requesting root access in your app

    package com.certusnet.videomonitor; import java.util.List; import java.io.IOException; import java.i ...