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. [Python设计模式] 第20章 挨个买票——迭代器模式

    github地址:https://github.com/cheesezh/python_design_patterns 迭代器模式 迭代器模式,提供一种方法顺序访问一个聚合对象中各个元素,而又不暴露该 ...

  2. Springboot 生成验证码

    技术:springboot+kaptcha+session   概述 场景介绍 验证码,用于web网站.用户点击验证码图片后,生成验证码.提交后,用户输入验证码和Session验证码,进行校验. 详细 ...

  3. c# 非调试状态下面执行

    #if !DEBUG                View("ErrorSimple").ExecuteResult(ControllerContext);#endif

  4. PHP-问题处理Fatal error: Uncaught Error: Call to undefined function simplexml_load_file()

    1.问题 今天重新安装了ubuntu,PHP,MySQL,Apache,到测试CMS项目时发生一个错误: Fatal error: Uncaught Error: Call to undefined ...

  5. Django-jet自定义菜单

    Django-jet自定义菜单:并且可设置权限.https://jet.readthedocs.io/en/latest/config_file.html#custom-menu

  6. C#跑马灯，图片滚动，后台获取图片地址。动态绑定图片，imag显示文字

    下面附下载地址. http://download.csdn.net/download/njxiaogui/10002058 1.跑马灯效果,图片连续循环滚动,图片下面并可附文字描述,图片是从数据库中获 ...

  7. Thymeleaf模版--子页面单独引入CSS、JS文件

    https://blog.csdn.net/u010392801/article/details/80465800 ****************************************** ...

  8. 微信公众号平台上传文件返回错误代码:40005 invalid file type

    错误原因:文件类型(后缀名)不符合要求. 具体到笔者的情况是:在将 MultipartFile 类型转换为File 类型时,方法 File.createTempFile("filename& ...

  9. docker进程分析

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/TM6zNf87MDG7Bo/article/details/80970541 序言      闷热. ...

  10. 项目中 2个或者多个EF模型 表名称相同会导致生成的实体类 覆盖的解决方法

    场景:  2个数据库, 一个新,一个旧,  把旧的 数据库中的数据,导入到新的数据库中,  使用到了2个 EF实体模型, 新数据库 和 旧数据库中的表,有的名称是相同的 (但是结构是不同的) 旧的数据 ...