HTML调用PC摄像头【申明：来源于网络】
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摄像头【申明：来源于网络】的更多相关文章
- myEclipse导入现成项目出现错误 【申明来源于网络】
myEclipse导入现成项目出现错误 [申明来源于网络] 原地址:http://blog.sina.com.cn/s/blog_6d7703400100znh6.html file–>impo ...
- 微信小程序（微信应用号）组件讲解[申明:来源于网络]
微信小程序(微信应用号)组件讲解[申明:来源于网络] 地址:http://www.cnblogs.com/muyixiaoguang/p/5902008.html
- AngularJS资源合集[备忘]【申明:来源于网络】
AngularJS资源合集[备忘][申明:来源于网络] 地址:http://blog.csdn.net/allgis/article/details/44646597
- Unity调用PC摄像头
转载于Unity3d圣典里面,具体哪位大侠写的我忘咯. using UnityEngine; using System.Collections; public class CameraTest : M ...
- Android基础总结+SQlite数据库【申明：来源于网络】
Android基础总结+SQlite数据库[申明:来源于网络] 基础总结篇之一:Activity生命周期:http://blog.csdn.net/liuhe688/article/details/6 ...
- Hibernate 的hql查询简介【申明：来源于网络】
Hibernate 的hql查询简介[申明:来源于网络] Hibernate 的hql查询简介:http://blog.csdn.net/leaf_130/article/details/539329 ...
- 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明：来源于网络]
第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...
- Maven的安装、配置及使用入门+maven安装报错：JAVA_HOME【申明：来源于网络】
Maven的安装.配置及使用入门+maven安装报错:JAVA_HOME[申明:来源于网络] Maven的安装.配置及使用入门:http://www.cnblogs.com/dcba1112/arch ...
- Android总结之json解析（FastJson Gson 对比）[申明：来源于网络]
Android总结之json解析(FastJson Gson 对比)[申明:来源于网络] 地址:http://blog.csdn.net/u014031072/article/details/5392 ...
随机推荐
- webstorm+nodejs+express配置
- android编码学习
虽然以下博客有点老,但很清晰,有不明白的基础知识,可以来这里找找. 2015年最新Android基础入门教程目录(完结版) 1. 环境配置 Android stodio gradle配置踩过的坑 An ...
- reStructuredText语法简单说明
reStructuredText 是扩展名为.rst的纯文本文件,含义为"重新构建的文本"",也被简称为:RST或reST. 官方网址: http://docutils. ...
- ubuntu intel网卡驱动安装(华硕B250F GAMING主板 )
jikexianfeng@jikexianfeng:~$ sudo sudo lspci -knn :]: Intel Corporation Device [:591f] (rev ) Subsys ...
- Effective Java 第三版——82. 线程安全文档化
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- 单表40G,不要吃惊，还能往里面插入数据，哈哈
单表40G,不要吃惊,还能往里面插入数据,哈哈 上图:
- ANTLR v4 权威参考笔记（目录）
ANTLR v4是一款强大的语法分析器生成器,可以用来读取.处理.执行和转换结构化文本或二进制文件.通过称为文法的形式化语言描述,ANTLR可以为该语言自动生成词法分析器.生成的语法分析器可以自动构建 ...
- 【原创 Hadoop&Spark 动手实践 8】Spark 应用经验、调优与动手实践
[原创 Hadoop&Spark 动手实践 7]Spark 应用经验.调优与动手实践 目标: 1. 了解Spark 应用经验与调优的理论与方法,如果遇到Spark调优的事情,有理论思考框架. ...
- SQL Server 2016新特性：数据库级别配置
新的 ALTER DATABASE SCOPED CONFIGURATION (Transact-SQL) 用来配置数据库级别配置. 这个语句可以配置每个数据库的配置: 清理过程cache 设置MA ...
- iScroll的使用
CDN: <script src="//ossweb-img.qq.com/images/js/iscroll_library/iscroll-5.2.0.js">&l ...