怎样在网页中使用摄像头，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. MVC 详细说明

    .NET MVC执行过程: 1.网址路由比对 2.执行Controller与Action 3.执行View并返回结果 在使用MVC中是由IgnoreRoute()辅助方法对比成功的,会导致程序直接跳离 ...

  2. placement new讲解

    [本文链接] http://www.cnblogs.com/hellogiser/p/placement-new.html [分析] 首先我们区分下几个容易混淆的关键词:new.operator ne ...

  3. 如何提高cocos2d-x-spine骨骼动画加载速度

    下面分2点来说: 1. 时间消耗点:io和现场解析 解决方案:加载过的骨骼动画就不要每次重新加载,不要每次都去加载json文件和atlas,我推荐使用 static CCSkeletonAnimati ...

  4. 正则表达式里"-"中划线的使用注意

    今天要匹配正则表达式,把非法的字符找出来,开始的写法是这个 [^A-Za-z0-9_.*-+%!],我的目的是把_.*-+%!这7个字符算合法字符,但是发现有许多其他字符也合法了,原来是中划线的位置不 ...

  5. putty mtputty 设置utf8编码

    2013年10月30日 10:02:36 先load你指定的ip 然后选择左侧目录中的windows->translation 再在右侧选择utf-8编码 选中后,点击左侧目录中的session ...

  6. DP:Cheapest Palindrome(POJ 3280)

    价值最小回文字符串 题目大意:给你一个字符串,可以删除可以添加,并且每一次对一个字母的操作都带一个权,问你转成回文串最优操作数. 如果这一题我这样告诉你,你毫无疑问知道这一题是LD(Levenshti ...

  7. DFS:Red and Black(POJ 1979)

    红与黑 题目大意:一个人在一个矩形的房子里,可以走黑色区域,不可以走红色区域,从某一个点出发,他最多能走到多少个房间? 不多说,DFS深搜即可,水题 注意一下不要把行和列搞错就好了,我就是那样弄错过一 ...

  8. Servlet之Cookie操作

    Java对cookie的操作比较简单,主要介绍下建立cookie和读取cookie,以及如何设定cookie的生命周期和cookie的路径问题. 1,建立一个无生命周期的cookie,即随着浏览器的关 ...

  9. 矩形覆盖（codevs 1101）

    题目描述 Description 在平面上有 n 个点(n <= 50),每个点用一对整数坐标表示.例如:当 n＝4 时,4个点的坐标分另为:p1(1,1),p2(2,2),p3(3,6),P4 ...

  10. 在竞赛ACM Java处理输入输出

    一.Java之ACM注意点 1. 类名称必须采用public class Main方式命名 2. 在有些OJ系统上,即便是输出的末尾多了一个“ ”,程序可能会输出错误,所以在我看来好多OJ系统做的是非 ...