怎样在网页中使用摄像头，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. 查看Eclipse中的jar包的源代码：jd-gui.exe

    前面搞了很久的使用JAD,各种下载插件,最后配置好了,还是不能用,不知道怎么回事, 想起一起用过的jd-gui.exe这个工具,是各种强大啊!!! 只需要把jar包直接扔进去就可以了,非常清晰,全部解 ...

  2. Buy Tickets(poj 2828)

    题意:排队买票,但是 中途 出现插队情况,比如 0 123,代表值为123的人 插入到 0 的位置,如果后面 出现 0 456,那么新的 0的位置就是 456,123就变成是 1的位置了 分析:这道题 ...

  3. Redis适用于高并发的递增、递减功能

    递增指令:incr(默认从0开始) 递减指令:decr(默认从0开始,递减会出现负数,这点跟memcache不一样,mc到0) 如下: 附上shardedJedisPool和JedisCluster的 ...

  4. Mysql sql查询性能侦查

    Mysql 服务性能优化配置:http://5434718.blog.51cto.com/5424718/1207526[该文章很好] Sql查询性能优化 对Sql进行优化,肯定是该Sql运行未能达到 ...

  5. 数据库优化和SQL操作的相关题目

    SQL操作 1.有一个数据库表peope,表有字段name,age,address三个属性(注:没有主键).现在如果表中有重复的数据,请删去重复只留下其中的一条.重复的定义就是两条记录的name,ag ...

  6. 在Android中将子View的坐标转换为父View的坐标

    在Android中,我们有时候可能会将子View的坐标转换为父View中的坐标.感觉很有用,分享给大家. 在Launcher中有这么一段代码可以完成这项工作.  public float getDes ...

  7. WPF中的VisualTreeHelper

    VisualTreeHelper提供了一组WPF控件树模型,通过VisualTreeHelper可以遍历控件的树形结构,获取我们所需要的控件以及相应的属性: VisualTreeHelper提供了一下 ...

  8. 在WINDOWS上通过VAGRANT练习ANSIBLE

    有点曲折,但没办法,还要通过VAGRANT里的ANSIBLE建DOCKER呢.. VagrantFile # -*- mode: ruby -*- # vi: set ft=ruby : Vagran ...

  9. hdu 1195:Open the Lock（暴力BFS广搜）

    Open the Lock Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  10. oracle体系结构详细示意图