怎样在网页中使用摄像头，html5越来越多的使用到实际工作中，那么他怎样调用摄像头呢进行视频聊天，视频监控等活动呢，今天为大家抛砖引玉，教大家怎样实现怎样利用html5实现摄像头视频监控功能。废话不多说，接入正题：

<!DOCTYPE html>
<html>
<head>  
<meta charset="utf-8">   
<title>HTML5使用video实现摄像头</title>
<style>
nav .search {
display: none;
}
.demoFrame header,
.demoFrame .footer,
.demoFrame h1,
.demoFrame .p {
display: none !important;
}
h1 {
font-size: 2.6em;
}
h2, h3 {
font-size: 1.7em;
}
.left {
width: 920px !important;
padding-bottom: 40px;
}
div.p {
font-size: .8em;
font-family: arial;
margin-top: -20px;
font-style: italic;
padding: 10px 0;
}
.footer {
padding: 20px;
margin: 20px 0 0 0;
background: #f8f8f8;
font-weight: bold;
font-family: arial;
border-top: 1px solid #ccc;
}
.left > p:first-of-type {
background: #ffd987;
font-style: italic;
padding: 5px 10px;
margin-bottom: 40px;
}
#promoNode {
margin: 20px 0;
}
video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; }
#canvas { margin-top: 20px; border: 1px solid #ccc; display: block; }
</style>
</head>
<body>
<!-- Add the HTML header -->
<div id="page">
<!-- holds content, will be frequently changed -->
<div id="contentHolder">
<!-- start the left section if not the homepage -->
<section class="left">
<h1>HTML5使用video控件实现摄像头录像抓图效果</h1>
<div class="p">Read <a href="http://davidwalsh.name/browser-camera" target="_top">Camera and Video Control with HTML5</a></div>
<div id="promoNode"></div>
<p>请使用Opera或Chrome浏览器, 可以在该页面抓图!</p>
<!--
Ideally these elements aren”t created until it”s confirmed that the
client supports video/camera, but for the sake of illustrating the
elements involved, they are created with markup (not JavaScript)
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
// Put event listeners into place
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
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</section>
</div>
</body>
</html>

以上是html5实现摄像头的网站代码，而且可以执行运行，主要使用的就是video控件，然后使用浏览器获取媒体getUserMedia，然后获取到媒体的视频流，使用video的src属性进行输出，然后播放，希望对大家有所帮助。

本文出自：http://www.18sucai.com/article/550.htm

HTML5怎样在网页中使用摄像头功能的更多相关文章

  1. h5网页中使用打电话功能

    如果需要在移动浏览器中实现拨打电话,发送email,美国服务器,调用sns等功能,移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法. 采用url链接的方式,实现在Safari ...

  2. 手机QQ内置网页，微信内置网页中进行分享到QQ和微信的操作

    微信内的网页分享: API内容详见微信开发文档  https://mp.weixin.qq.com/wiki 这里需要注意的是:调用微信API的时候修改的是微信内网页右上角三个点那里打开后,选择分享之 ...

  3. 在web中使用windows控件，实现摄像头功能

    最近做的一个Web版的视频会议项目,需要在网页中播放来自远程摄像头采集的实时视频,我们已经有了播放远程实时视频的使用C#编写的windows控件,如何将其嵌入到网页中去了?这需要使用一种古老的技术,A ...

  4. 网页中插入QQ在线功能

    网页中插入QQ在线功能 本随笔记录的是网页中如何插入qq在线聊天,这里讲解的是 普通QQ在线聊天操作. 例:第一种方式  使用 tencent://message/?uin=QQ号码&Site ...

  5. 如何在浏览器网页中实现java小应用程序的功能

    我们知道,java语言的运用就是面向对象实现功能,和c不同,java语言对于程序员来说,运用起来更为简便. 小应用程序与应用程序不同,小应用程序只能在与Java兼容的容器中运行,可以嵌入在HTML网页 ...

  6. 第 3 章 HTML5 网页中的文本和图像

    文字和图像是网页中最主要.最常用的元素. 在互联网高速发展的今天,网站已经成为一个展示与宣传自我的通信工具(公司或个人可以通过网站介绍公司的服务与产品或介绍自己).这些都离不开网站中的网页,而网页的内 ...

  7. js利用clipboardData在网页中实现截屏粘贴的功能

    目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴,不过火狐和ie11浏览器在可编辑的div中能够粘贴截图的图片也是base64位和Chrome利用clipboard ...

  8. 在普通网页中如何调用html5+的plus对象

    <script> //用法: HTML5+的plus对象,必须由click事件触发后,才能在普通网页中使用.所以在没有click的情况下,调用本文件可以解决问题! //在代码中使用: pl ...

  9. js实现网页中的"运行代码"功能

    <!DOCTYPE html> <html> <head> <meta charset='utf8' /> <title>网页中的运行代码功 ...

随机推荐

  1. 【云计算】Docker删除名称为none的Image镜像

    先上删除命令: docker images|grep none|awk '{print $3 }'|xargs docker rmi docker强制批量删除none的image镜像   真是有段时间 ...

  2. 【UGUI】Canvas和Rect Transform

    Canvas 1.所有的UI元件都需要放在Canvas里 2.UI元件的绘制顺序,与在 Hierarchy的顺序相同,在上面的元素会先被绘制,位于后续绘制元素的下面 3.可以选择3种不同的渲染模式: ...

  3. Android runProguard配置 导致module lib 中的包编译时无法识别

    今天写代码时用到了另一个lib型的工程,把它添加到dependencies后,在原工程中可以引用lib中的文件了,但是编译时就会报错,提示包不存在,后来在build.gradle中设置runProgu ...

  4. iOS CoreData学习资料 和 问题

    这里是另一篇好文章 http://blog.csdn.net/kesalin/article/details/6739319 这里是另一篇 http://hxsdit.com/1622 (不一定能访问 ...

  5. 【JAVA、C++】LeetCode 012 Integer to Roman

    Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from 1 t ...

  6. @SuppressWarnings注解

    简介:java.lang.SuppressWarnings是J2SE 5.0中标准的Annotation之一.可以标注在类.字段.方法.参数.构造方法,以及局部变量上.作用:告诉编译器忽略指定的警告, ...

  7. 【python】argparse模块

    来源:http://www.2cto.com/kf/201412/363654.html argparse是python用于解析命令行参数和选项的标准模块,用于代替已经过时的optparse模块.ar ...

  8. HDU 4704 Sum (高精度+快速幂+费马小定理+二项式定理)

    Sum Time Limit:1000MS     Memory Limit:131072KB     64bit IO Format:%I64d & %I64u Submit Status  ...

  9. javascript逻辑运算符“||”和“&&”

    一.先来说说||(逻辑或),从字面上来说,只有前后都是false的时候才返回false,否则返回true. alert(true||false); // truealert(false||true); ...

  10. （八）STM32的CAN模块实验

    bxCAN是基本扩展CAN(Basic Extended CAN)的缩写,它支持CAN协议2.0A和2.0B.它的设计目标是,以最小的CPU负荷来高效处理大量收到的报文.它也支持报文发送的优先级要求( ...