---移动设备---

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

---PC------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script type="text/javascript">
// 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);
}
else if (navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);

// Trigger photo take
document.getElementById("snap").addEventListener("click", function () {
context.drawImage(video, 0, 0, 640, 480);
});
</script>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">
Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>

html5 调用摄像头的更多相关文章

  1. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

  2. html5调用摄像头实现拍照

    技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...

  3. [转]html5调用摄像头实例

    原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...

  4. html5调用摄像头截图

    关于html5调用音视频等多媒体硬件的API已经很成熟,不过一直找不到机会把这些硬件转化为实际的应用场景,不过近年来随着iot和AI的浪潮,我觉得软硬结合的时机已经成熟.那我们就提前熟悉下怎么操作这些 ...

  5. html5调用摄像头并拍照

    随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理: 调用摄像头采集视频流,利用canvas的特性生成bas ...

  6. getUserMedia API及HTML5 调用摄像头和麦克风

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  7. html5调用摄像头功能

    前言 前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多

  8. HTML5调用摄像头实现拍照功能（兼容各大主流浏览器）

    本人亲測,兼容各大主流浏览器,HTML5太强大了,须要的留下邮箱哦 假设想要立即收到,则可到我的资源下载 http://download.csdn.net/detail/laijieyao/81699 ...

  9. html5调用手机摄像头

    <input type="file" accept="image/*" capture="camera"><input t ...

随机推荐

  1. MFC 定义和调用全局变量的一种方法

    在CTestApp.h中声明一个int x;然后调用的方式如下: CTestApp *app = (CTestApp *)AfxGetApp(); //生成指向应用程序类的指针,Test处改为对应的项 ...

  2. iOS数据持久化文件读写之偏好设置

    很多iOS应用都支持偏好设置,比如保存用户名.密码.字体大小等设置,iOS提供了一套标准的解决方案来为应用加入偏好设置功能.每个应用都有个NSUserDefaults实例,通过它来存取偏好设置.比如, ...

  3. 《DON'T MAKE ME THINK》/《点石成金访客至上的网页设计秘笈》 读书笔记

    1.web页面要尽可能简单,让用户不用思考就能知道页面的功能,如果要进行一些崭新的.开拓性的或者非常复杂的页面设计时, 此时要利用页面元素的外观.精心选择的名称.页面布局以及少量仔细斟酌过的文字,使页 ...

  4. git 放弃本地某个文件的修改，或所有修改

    18:57 2015/11/17git 放弃本地某个文件的修改,或所有修改git checkout 文件名git checkout // 放弃所有文件的所有修改git reset --hard 版本号 ...

  5. 【noiOJ】p1481

    1481:Maximum sum 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 Given a set of n integers: A={a1, a2,. ...

  6. 20145330第七周《Java学习笔记》

    20145330第七周<Java学习笔记> 第十三章 时间与日期 认识时间与日期 时间的度量 GMT(格林威治标准时间):现在不是标准时间 世界时(UT):1972年UTC出来之前,UT等 ...

  7. Redis常用命令(二)

    连接操作相关的命令 quit:关闭连接(connection) auth:简单密码认证 持久化 save:将数据同步保存到磁盘 bgsave:将数据异步保存到磁盘 lastsave:返回上次成功将数据 ...

  8. JAVA操作MongoDB数据库

    1. 首先,下载MongoDB对Java支持的驱动包 驱动包下载地址:https://github.com/mongodb/mongo-java-driver/downloads 2.Java操作Mo ...

  9. jquery js javascript select 无限级 插件 优化foxidea版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. java pio项目使用

    一.简介 pio是apache的一个针对microsoft office的一个开源项目. Apache POI - the Java API for Microsoft Documents 官网地址: ...