<!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. 如何安全地跨窗体调用Timer控件 从一个窗体调用控制另外一个窗体的控件

    具体的情况是Form1中有一个Timer2时钟,Timer2时钟事件弹出Warning窗体,点击Warning窗体上面的按钮,重新激活一下Form1中的Timer2.从而实现了从一个窗体调用另外一个窗 ...

  2. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  3. Java小功能大杂烩

    生成UUID: import java.util.UUID; public class ProductUUID { // 随机返回前十位的UUID public static String getUU ...

  4. ruby 第三方模块unirest使用

    Creating Requests require 'unirest' response = Unirest.post 'http://httpbin.org/post', headers:{ Acc ...

  5. python入门——Anaconda安装

    初学Python,可以选择python原始的IDE,但原始的IDE在使用过程中需要自己安装各种包,个人觉得初学者不需要将时间花在这些上面,而是应该直接学习python程序,这些比较杂的事情可以在以后的 ...

  6. Python3 利用pip安装BeautifulSoup4模块(Windows版)

    一.找到Python3的安装文件夹 二.将路径复制 三.Windows10 打开Windows PowerShell(管理员).Windows 8.8.1.7使用cmd 切换到相应目录 四.此目录下的 ...

  7. R语言绘图：箱线图

    使用ggplot2绘制箱线图 ######*****绘制箱线图代码*****####### data1$学区房 <- factor(data1$school, levels = 0:1, lab ...

  8. java网络编程框架

    虽然写过一些网络编程方面的东西,但还没有深入研究过这方面的内容,直接摘录一些文章,后续整理 原文地址:http://blog.csdn.net/lwuit/article/details/730613 ...

  9. Maven初步接触

    最近随着搜资料,网上这样的字眼越来越多,我了解到这是构建项目的一种方式,于是准备简单看一下 首先粘几篇文章,作为学习的初步资料 Maven入门 http://blog.csdn.net/prstaxy ...

  10. 玩转Node.js（四）-搭建简单的聊天室

    玩转Node.js(四)-搭建简单的聊天室 Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一 ...