怎样在网页中使用摄像头，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. （原创）Python文件与文件系统系列（4）——文件描述字操作

    文件描述字(file descriptor,fd)是系统中用来唯一记录当前已经打开的文件的标识号,fd是一个整数. 除了file对象外,Python还提供对fd的操作,对fd的操作更加底层,fd和Py ...

  2. [MAC ] Mac-OSX下安装Git

    转载自 : http://www.cnblogs.com/shanyou/archive/2011/01/30/1948088.html Mac-OSX下安装Git是一件很简单的事,我们可以下载一个安 ...

  3. java 执行command

    StringBuffer buf = new StringBuffer(1000); try { Process pos = Runtime.getRuntime().exec("sh &q ...

  4. 8.桥接模式(Bridge Pattern)

    using System; namespace ConsoleApplication6 { class Program { static void Main(string[] args) { // 创 ...

  5. 《MySQL必知必会》笔记 事务、安全及性能等

    二十六 管理事务处理 1.并非所有引擎都支持事务处理,如MyIASM和InnoDB,关于事务处理的几个术语:事务(Transaction)指一组sql语句:回退(rollback)指撤销指定SQL语句 ...

  6. android之WakeLock机制浅析

    转自:http://blog.sina.com.cn/s/blog_4ad7c2540101n2k2.html 应用程序耗电的实质,是所启用的硬件在消耗电量.  手机的耗电单元 CPU: 应用处理器( ...

  7. uva 10972(边双连通分量）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=33804. 思路:和poj的一道题有点像,不过这道题图可能不连通,因 ...

  8. MATLAB学习笔记（六）——MATLAB数据分析与多项式计算

    (一)数据处理统计 一.最大值和最小值 1.求向量的最大值和最小值 y=max(X); %返回向量X的最大值存入y,如果X中含有复数则按模最大的存入y [y,I]=max(X);%返回向量X的最大值存 ...

  9. C#环境datagidview添加删除操作

    添加 行 dataGridView1.Rows.Add();//添加空行 dataGridView1.Rows.Add("a","b"……);//添加指定列数的 ...

  10. Atomic

    CAS原语 CAS(compare and swap)是一组原语指令,用来实现多线程下的变量同步. public final boolean compareAndSet(int expect, int ...