网上找了些文章测试了下，到现在为止还是很多浏览器不支持，所以也没有什么实用价值啊。

以下代码在笔记本电脑浏览器chrome25,irefox19上测试通过（FF需要在地址栏输入about:config ，把media.navigator.enabled 值设置为 true）。

在安卓手机上用opera HD浏览器测试通过，安卓自带浏览器和QQ浏览器和360浏览器不成功。

网上找了些文章测试了下，到现在为止还是很多浏览器不支持，所以也没有什么实用价值啊。

以下代码在笔记本电脑浏览器chrome25,irefox19上测试通过（FF需要在地址栏输入about:config ，把media.navigator.enabled 值设置为 true）。

在安卓手机上用opera HD浏览器测试通过，安卓自带浏览器和QQ浏览器和360浏览器不成功。

[html] view plaincopy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>测试摄像头</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调用笔记本或手机摄像头的更多相关文章

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

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

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

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

  3. HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

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

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

  6. html5调用手机摄像头

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

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

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

  8. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

  9. html5调用摄像头实现拍照

    技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...

随机推荐

  1. Nginx 配置GeoIP2 禁止访问，并允许添加白名单过滤访问设置

    配置环境:Centos 7.6 + Tengine 2.3.2 GeoIP2 下载地址:https://dev.maxmind.com/geoip/geoip2/geolite2/ 1. Nginx  ...

  2. Nginx使用和配置

    概要: Nginx 简介 Nginx 架构说明 Nginx 基础配置与使用 Nginx 反向代理与负载均衡 Nginx 实现高速缓存 Nginx 性能参数调优 一.Nginx 简介与安装 Nginx ...

  3. 全差分运算放大器ADA4930的分析(2)

    前面解释了在ADA4930组成的单端转差分电路的输入电阻RIN的大小,可知当RF=RG=1KΩ的时候,RIN=1.33KΩ. 图1单端转差分电路 如图1所示,假设信号源为2V VPP的信号,信号源的内 ...

  4. ES6/JavaScript一些‘巧用’

    前言 第一次发表文章,如有不好的地方请见谅/ 在编写JavaScript代码的时候存在的一些方法和技巧,虽然有时候条条大路都通向罗马,但是也许总会有那么一条最短的路径可走.本文将一些都知道却不怎么用的 ...

  5. XML学习笔记--背诵版

    前言 一直想系统性的学XML,就没时间学,今晚抽出几个小时时间学完了XML.过几天再过来看看,背一背应该就差不多,记得东西较多,没什么难理解的. XML数据传输格式 第一章 XML概述 1.1 引入 ...

  6. 使用Blazor Server 线路处理程序 (circuit handler)跟踪打开的SignalR连接

    Blazor服务器允许定义线路处理程序(circuit handler)代码,该处理程序(handler)允许在更改用户线路状态时运行此代码. 线路处理程序(circuit handler)是通过从C ...

  7. Error : Failed to get convolution algorithm. This is probably because cuDNN failed to initialize

    记录一下: 报错:# Error : Failed to get convolution algorithm. This is probably because cuDNN failed to ini ...

  8. SpringBoot1.5.10.RELEASE整合druid时，在druid monitor界面出现(*) property for user to setup

    接上篇随笔,配置druid之后出现的错误,解决方法如下: @Bean(destroyMethod = "close",initMethod = "init") ...

  9. Educational Codeforces Round 83 (Rated for Div. 2)A--C

    题意:给出一个边数为n的等边多边形,问是否可以变成m的等边多边形.条件是同一个中心,共用原顶点. 解析:直接n%m==0即可,这样就是平分了.签到题没得说了. #include<iostream ...

  10. JavaScript实现树结构（二）

    JavaScript实现树结构(二) 一.二叉搜索树的封装 二叉树搜索树的基本属性: 如图所示:二叉搜索树有四个最基本的属性:指向节点的根(root),节点中的键(key).左指针(right).右指 ...