HTML调用PC摄像头【申明：来源于网络】 ———- 地址：http://www.oschina.net/code/snippet_2440934_55195

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML5调用电脑摄像头实例</title>

    <script type="text/javascript">

        window.addEventListener("DOMContentLoaded", function() {

            // Grab elements, create settings, etc.

            var canvas = document.getElementById("canvas"),

                context = canvas.getContext("2d"),

                video = document.getElementById("video"),

                videoObj = { "video": true },

                errBack = function(error) {

                    console.log("Video capture error: ", error.code);

                };  

            // Put video listeners into place

            if(navigator.getUserMedia) { // Standard

                //alert("支持navigator.getUserMedia");

                navigator.getUserMedia(videoObj, function(stream) {

                    video.src = stream;

                    video.play();

                }, errBack);

            } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed

                //alert("支持navigator.webkitGetUserMedia");

                navigator.webkitGetUserMedia(videoObj, function(stream){

                    video.src = window.webkitURL.createObjectURL(stream);

                    video.play();

                }, errBack);

            }

            else if(navigator.mozGetUserMedia) { // Firefox-prefixed

                //alert("支持navigator.mozGetUserMedia");

                navigator.mozGetUserMedia(videoObj, function(stream){

                    video.src = window.URL.createObjectURL(stream);

                    video.play();

                }, errBack);

            }

            // 触发拍照动作

            document.getElementById("snap").addEventListener("click", function() {

                context.drawImage(video, 0, 0, 640, 480);

            }); 

        }, false);

    </script>

</head>

<body>

    <video id="video" width="640" height="480" autoplay></video><br>

    <button id="snap" >点击拍照</button>  <br>

    <canvas id="canvas" width="640" height="480"></canvas>

</body>

</html>

HTML调用PC摄像头【申明：来源于网络】的更多相关文章

  1. myEclipse导入现成项目出现错误 【申明来源于网络】

    myEclipse导入现成项目出现错误 [申明来源于网络] 原地址:http://blog.sina.com.cn/s/blog_6d7703400100znh6.html file–>impo ...

  2. 微信小程序（微信应用号）组件讲解[申明:来源于网络]

    微信小程序(微信应用号)组件讲解[申明:来源于网络] 地址:http://www.cnblogs.com/muyixiaoguang/p/5902008.html

  3. AngularJS资源合集[备忘]【申明:来源于网络】

    AngularJS资源合集[备忘][申明:来源于网络] 地址:http://blog.csdn.net/allgis/article/details/44646597

  4. Unity调用PC摄像头

    转载于Unity3d圣典里面,具体哪位大侠写的我忘咯. using UnityEngine; using System.Collections; public class CameraTest : M ...

  5. Android基础总结+SQlite数据库【申明：来源于网络】

    Android基础总结+SQlite数据库[申明:来源于网络] 基础总结篇之一:Activity生命周期:http://blog.csdn.net/liuhe688/article/details/6 ...

  6. Hibernate 的hql查询简介【申明：来源于网络】

    Hibernate 的hql查询简介[申明:来源于网络] Hibernate 的hql查询简介:http://blog.csdn.net/leaf_130/article/details/539329 ...

  7. 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明：来源于网络]

    第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...

  8. Maven的安装、配置及使用入门+maven安装报错：JAVA_HOME【申明：来源于网络】

    Maven的安装.配置及使用入门+maven安装报错:JAVA_HOME[申明:来源于网络] Maven的安装.配置及使用入门:http://www.cnblogs.com/dcba1112/arch ...

  9. Android总结之json解析（FastJson Gson 对比）[申明：来源于网络]

    Android总结之json解析(FastJson Gson 对比)[申明:来源于网络] 地址:http://blog.csdn.net/u014031072/article/details/5392 ...

随机推荐

  1. gitbook安装与使用，并使用docker部署

    本文简单介绍如何安装并使用gitbook,最后如何使用docker构建书籍镜像. 1. 前置条件 需要Nodejs环境,安装npm,国内用户再安装cnpm npm install -g cnpm -- ...

  2. Spring Boot系列——7步集成RabbitMQ

    RabbitMQ是一种我们经常使用的消息中间件,通过RabbitMQ可以帮助我们实现异步.削峰的目的. 今天这篇,我们来看看Spring Boot是如何集成RabbitMQ,发送消息和消费消息的.同时 ...

  3. Navicat Premium 12破解方法

    来源网址:https://www.jianshu.com/p/42a33b0dda9c 1.按步骤安装Navicat Premium,如果没有可以去官网下载:http://www.navicat.co ...

  4. [svc]证书学习索引

    数字证书基础知识 对称加密/非对称加密细枝末节 openssl对称非对称加密实战 使用OpenSSL实现CA证书的搭建过程 通过openssl生成证书 HTTPS证书生成原理和部署细节 证书各个字段的 ...

  5. Linux: Linux C 获取当前系统时间的时间戳(精确到秒、毫秒、微秒) gettimeofday

    说明 获取当前的时间的秒数和微秒数本方法需要用到 gettimeofday() 函数,该函数需要引入的头文件是  <sys/time.h>  . 函数说明 int gettimeofday ...

  6. Redis 的事务到底是不是原子性的

    ACID 中关于原子性的定义: 原子性:一个事务(transaction)中的所有操作,要么全部完成,要么全部不完成,不会结束在中间某个环节.事务在执行过程中发生错误,会被恢复(Rollback)到事 ...

  7. Linux基础知识之用户和用户组以及 Linux 权限管理

    已经开始接触Linux用户管理,用户组管理,以及权限管理这几个逼格满满的关键字.这几个关键字对于前端程序猿的我来说真的是很高大上有木有,以前尝试学 Linux 的时候看到这些名词总是下意识的跳过不敢看 ...

  8. 深入 AngularUI Router

    翻译:深入 AngularUI Router 原文地址:http://www.ng-newsletter.com/posts/angular-ui-router.html ui-router: htt ...

  9. [C++]深入解析结构化异常处理(SEH)

    http://www.cppblog.com/weiym/archive/2015/02/27/209884.html 尽管以前写过一篇SEH相关的文章<关于SEH的简单总结>, 但那真的 ...

  10. RESTful API 设计思考

    RESTful API 设计思考,内容来源网络加自己的思考 1.RESTful Web API采用面向资源的架构:同一的接口,所以其成员体现为针对同一资源的操作2.SOAP Web API采用RPC风 ...