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. 分享12款令人瞠目结舌的WebVR演示和实验效果

    不管你信不信, WebVR绝对是浏览器下一个让你激动的技术方向, 也许很快你就可以使用VR头显或者相关设备直接访问web内容和资源啦! 在这篇资源分享帖中,我们将介绍很多基于浏览器的VR演示和游戏,帮 ...

  2. m3u8转码

    ffmpeg -i input.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 -hls_time 5 output.m3u8

  3. Nop--NopCommerce源码架构详解专题目录

    最近在研究外国优秀的ASP.NET mvc电子商务网站系统NopCommerce源码架构.这个系统无论是代码组织结构.思想及分层都值得我们学习.对于没有一定开发经验的人要完全搞懂这个源码还是有一定的难 ...

  4. [转]Ubuntu18.04搜狗拼音输入法候选栏乱码解决方法

    经常碰到安装完搜狗拼音输入法后候选栏是乱码的情况,解决方法如下: 输入如下命令: cd ~/.config sudo rm -rf SogouPY* sogou* 1 2 之后重启即可. 安装过程可参 ...

  5. Django模版基本标签详解

    一.if/else{% if %} 标签检查(evaluate)一个变量,如果这个变量为真(即,变量存在,非空,不是布尔值假),系统会显示在 {% if %} 和 {% endif %} 之间的任何内 ...

  6. C# 操作PDF

    Spire.PDF组件概述 Spire.PDF是一个专业的PDF组件,用于在.NET应用程序中创建,编辑,处理和阅读PDF文档.支持丰富的PDF文档处理操作,如PDF文档合并/拆分.转换(如HTML转 ...

  7. Dubbo 在maven项目中的应用

    首先我们来看一下dubbo的架构: 所以通过此图,我们看到就是服务的提供者将服务注册到注册中心,服务的消费者从注册中心获取服务,monitor监控服务的调用. 关于dubbo的使用,我们举个简单的例子 ...

  8. MongoDB GridFS 存储文件

    使用MongoDB的GridFS方式. CSDN: https://blog.csdn.net/qq_32657967/article/details/81534259官方文档: https://do ...

  9. linux清理日志脚本

    1.删除日志的命令 find 目录路径 -mtime +天数 -name "文件名" -exec rm -rf {} \; 例如:#!/bin/bash find /usr/loc ...

  10. C# 正则表达式判断是否是数字、是否含有中文、是否是数字字母组合

    //判断输入是否包含中文 不管你有没有输入英文,只要包含中文,就返回 true public static bool HasChinese(string content) { //判断是不是中文 st ...