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

以下代码在笔记本电脑浏览器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. uploadifive如何动态传参

    直接上代码 关键:$('#file_upload').data('uploadifive').settings.formData = { 'ID': 'ceshi'}; //动态更改formData的 ...

  2. 从高知社区知乎变故事会，看论坛IP的夹缝生存

    ​​ ​ ​ "海贼-王路飞"疯狂饰演多个角色答题的事件,最终以其被封杀为结果:知乎官方账号发表<知乎小管家工作笔记:我们封禁了几个伪造身份的帐号>,内容为公布了新一批 ...

  3. 最通俗易懂的 Java 11 新特性讲解

    大多数开发者还是沉浸在 Java 8 中,而 Java 14 将要在 2020 年 3 月 17 日发布了,而我还在写着 Java 11 的新特性.Java 11 是 Java 8 之后的第一个 LT ...

  4. 全网最详细的一篇Flutter 尺寸限制类容器总结

    Flutter中尺寸限制类容器组件包括ConstrainedBox.UnconstrainedBox.SizedBox.AspectRatio.FractionallySizedBox.Limited ...

  5. 浏览器渲染流程&Composite（渲染层合并）简单总结

    梳理浏览器渲染流程 首先简单了解一下浏览器请求.加载.渲染一个页面的大致过程: DNS 查询 TCP 连接 HTTP 请求即响应 服务器响应 客户端渲染 这里主要将客户端渲染展开梳理一下,从浏览器器内 ...

  6. python装饰器之函数作用域

    1.函数作用域LEGB L:local函数内部作用域 E:enclosing函数内部与内嵌函数之间 G:global全局作用域 B:build-in内置作用域 passline = 60 def fu ...

  7. Python——工厂模式

    目录 前言 一.简单工厂 二.工厂方法 抽象工厂 结论 参考 前言 工厂模式,顾名思义就是我们可以通过一个指定的"工厂"获得需要的"产品". 在设计模式中主要用 ...

  8. Spring MVC系列-(1) Spring概述

    1. Spring概述 本章主要介绍Spring中的体系结构和常见概念,比如bean.控制反转(Inverse of Control,IoC)等. 1.1 体系结构 Spring 框架提供约 20 个 ...

  9. Js逆向-滑动验证码图片还原

    本文列举两个例子:某象和某验的滑动验证 一.某验:aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s 未还原图像: 还原后的图: ...

  10. IntelliJ IDEA神器使用技巧

    说明:详情请参考慕课网课程:IntelliJ IDEA神器使用技巧:http://www.imooc.com/learn/924(感谢课程作者:闪电侠) 推荐: 1. 课程老师(闪电侠)IDEA快捷键 ...