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

以下代码在笔记本电脑浏览器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. 微信小程序采坑之scroll-view

    当设置了scroll-y为true之后,纵向是没有问题的,会出现滚动条. Android上一切都是那么的祥和, ios上你会发现如果你scroll-view里面的东西超过横向的宽度时,就会隐藏了. 也 ...

  2. datatables异步获取数据、简单实用

    IKC项目总结 一.认证难题管理模块 1. 如何使用datatables进行获取数据内容 datatables简介:Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何H ...

  3. JavaScript常见的六种继承方式

    前言 面向对象编程很重要的一个方面,就是对象的继承.A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 大部分面向对象的编程语言,都是通过"类 ...

  4. Yuchuan_linux_C 编程之八 文件操作相关函数

    一.整体大纲 st_mode整体介绍: st_mode详细介绍: 二. Linux文件操作相关函数 1. stat 作用:获得文件信息,也可以获取文件大小. 头文件 #include <sys/ ...

  5. 开源字体不香吗？五款 GitHub 上的爆红字体任君选

    作者:HelloGitHub-ChungZH 在编程时,用一个你喜欢的字体可以大大提高效率,越看越舒服.这篇文章就推荐 5 个在 GitHub 上优秀的字体供大家选择吧! 1. Iosevka 网站: ...

  6. JavaScript的类数组

    类数组对象啊,被人问到它跟真正的数组对象有什么差别啊?说不上来就老埋汰了,只知道函数的arguments对象是个类数组对象,也有length属性,其他呢?干货奉上: 首先先说说数组吧: 1,当有新的元 ...

  7. Go组件学习：如何读取ini配置文件

    代码示例全部保存在,欢迎star:https://github.com/EnochZg/golang-examples 安装组件 go get gopkg.in/ini.v1 使用 先创建ini后缀的 ...

  8. ASP.net MVC 构建layui管理后台(整体效果)

    登录页: 首页 模块管理 角色管理,角色分配 用户管理

  9. 关于WDK开发内核签名之WHQL签名认证流程简介

    WHQL简介: WHQL全称Windows Hardware Quality Labs testing(Windows硬件质量实验室测试)它是对所涉及的第三方硬件或软件进行一系列测试,然后提交测试的日 ...

  10. Flask wtforms 表单验证使用

    目录 wtforms 使用1(简单版): 使用2(复杂版): wtforms 安装:pip3 install wtforms 使用1(简单版): from flask import Flask, re ...