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

以下代码在笔记本电脑浏览器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. 2020年JAVA大厂笔经面经

    个人简介 ​ Java后台开发方向. 非计算机专业硕士,专业涉及到一些开发. 实验室项目主要是Java Web系统,挖掘小亮点. 无实习经验. 闲话唠嗑 ​ 回顾这几个月,宛若梦一场. 一开始心态不好 ...

  2. Kubernetes搭建过程中使用k8s.gcr.io、quay.io、docker.io的镜像加速

    前言 因为众所周知的原因,在使用Kubernetes和docker的时候会出现一些镜像无法拉取或者速度较慢的情况,错误信息类似以下: [ERROR ImagePull]: failed to pull ...

  3. 达拉草201771010105《面向对象程序设计（java）》第三周学习总结

    达拉草201771010105«面向对象程序设计(java)»第三周学习总结 第一部分:实验部分  1.实验目的与要求 (1)进一步掌握Eclipse集成开发环境下java程序开发基本步骤: (2)熟 ...

  4. python django 之 django自带的分页

    1. 例1: 基础的分页    1). vim app01/views.py        def users(request):            from django.core.pagina ...

  5. Linux命令学习神器！命令看不懂直接给你解释！

    大家都知道,Linux 系统有非常多的命令,而且每个命令又有非常多的用法,想要全部记住所有命令的所有用法,恐怕是一件不可能完成的任务. 一般情况下,我们学习一个命令时,要么直接百度去搜索它的用法,要么 ...

  6. Vmware安装的linux系统开机黑屏，关闭显示虚拟机忙怎么怎么解决？

    在vm虚拟机中,可能会遇到打开一台主机直接黑屏,而且无法关闭,关闭会显示虚拟机繁忙这种情况,如下图: 一般是因为没有正常关机或者操作不当导致的   对此,解决办法一般有两种 第一种方法: 1.重启电脑 ...

  7. Object-Oriented Programming Summary Ⅱ

    电梯作业总结博客 17373492 电梯,多线程学习中的 "HelloWorld",早在大一就有所耳闻,以至于在坐电梯的时候就思考过:电梯需要怎么写呢? 0. 前言: 偶然的机会, ...

  8. 简单谈谈HashMap

    概述 面试Java基础,HashMap可以说是一个绕不过去的基础容器,哪怕其他容器都不问,HashMap也是不能不问的. 除了HashMap,还有HashTable跟ConcurrentHashMap ...

  9. C# 简单地使用下 音频解码器Bass.Net

    在C#中有许多音频播放的方案,例如WinForm里调用系统自带MediaPlayer的COM组件和WPF的MediaPlayer(实质上还是WindowsMediaPlayer) 以及一堆API播放和 ...

  10. MySQL 【教程一】

    前言 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库. 每个数据库都有一个或多个不同的 API 用于创建,访问,管理,搜索和复制所保存的数据. 我们也可以将数据存 ...