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

以下代码在笔记本电脑浏览器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. 安卓权威编程指南-笔记（第22章 深入学习intent和任务）

    本章,我们会使用隐式intent创建一个替换android默认启动器的应用.名为NerdLauncher. NerdLauncher应用能列出设备上的其他应用,点选任意列表项会启动相应应用. 1. 解 ...

  2. 你有哪些相见恨晚的Chrome 扩展？

    「Chrome 没插件,香味少一半」,本期我们就来一起盘点一下chrome上那些相见恨晚的扩展. 1 JSONView2 Adblock Plus3 Keylines4 彩云小译5 单词发现者6 鼠标 ...

  3. STL迭代器的使用、正向、逆向输出双向链表中的所有元素

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  4. C++扬帆远航——9（小学生算数程序）

    /* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:studentjishu.cpp * 作者:常轩 * 微信公众号 ...

  5. Cenots 7 安装mysql cluster 通过rpm 包

    环境:Cenots 7 MG:192.168.0.105 NDB:192.168.0.108 NDB:192.168.0.109 SQL:192.168.0.111 SQL:192.168.0.107 ...

  6. Filter过滤器Listener：监听器

    Filter过滤器 1. 概念 web中的过滤器:当访问服务器资源是,过滤器可以将请求拦截下来,完成一些特殊功能: 过滤器的作用 完成通用的操作:例如登录验证.统一编码处理.敏感字符过滤... 快速入 ...

  7. PhalApi 2.7 开发快速上手

    PhalApi是一款国人制作的PHP纯后端框架.它的开发相当简单,同时也具备文档生成等特色功能.下面,我通过简单的几点,让你可以快速入门使用该框架的开发. 建议使用PHPStorm作为IDE,代码提示 ...

  8. JAVA 中的反射（reflact）

    获取反射加载类(获取类的字节码)的3种方式: Class class1=Class.forName("lession_svc.lession_svc.reflact.Person" ...

  9. Vue+Axios+iview+vue-router实战管理系统项目

    项目实现登陆验证,iviewui组件使用,vue-router路由拦截,在删除登陆存储的token后,直接路由进登陆页面,实战数据请求,本地data.json,笔者也是初出茅庐,在项目运行后,会一直c ...

  10. CSS+DIV自适应布局

    CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...