---移动设备---

<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. requireJS的使用_API（1）

    之前有介绍过requireJS(模块化开发),可以看看 ,但是不详细,所以今天参考官网来详细介绍一下: 1.加载js文件: RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<scr ...

  2. [xsd学习]xsd实例

    以下为一个表示学校的xml文件,学校内有若干学生,每个学生都有基本信息,电脑信息,选课信息 <?xml version="1.0" encoding="UTF-8& ...

  3. Nico Nico Ni~(完全背包)

    Time Limit:2000MS  Memory Limit:65535K Type: Program   Language: Not Limited Description Lys plays L ...

  4. MFC 打开其他程序

    WinExec("程序路径",SW_SHOW);

  5. Eclipse: The superclass “javax.servlet.http.HttpServlet” was not found on the Java Build Path

    Link: http://stackoverflow.com/questions/22756153/the-superclass-javax-servlet-http-httpservlet-was- ...

  6. Mongoose简单学习笔记

    1.1 名词解释 Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model : 由Schema发布生成的模型,具有抽象属性和行为的数据库操作对 Entity : 由Mo ...

  7. jquery.cookie.js使用

    1.下载jquery.cookie.js 官网:http://plugins.jquery.com/cookie/ 或 http://pan.baidu.com/s/1mgynA8g 2.使用方法 $ ...

  8. 【HDU】1517 A Multiplication Game

    http://acm.hdu.edu.cn/showproblem.php?pid=1517 题意:每次乘上2~9..p>=n时赢.. #include <cstdio> #incl ...

  9. SRM 615 DIV1 500

    TC 都615了...时间过的真快啊. 第一次做出500分,心情还是很激动的,虽然看了很久的题解,TC官网上的题解,很详细,但是英语的...我搜了搜,发现一份日语的...好吧,我还是看看英语的吧... ...

  10. TC SRM 591

    表示第一次在div1,我要记录一下... 木有挂0,第一题不怎么难的,读题读了20分钟,又想了20分钟,时间有点长,然后各种小心,然后得了140分.... 后两个题,根本木有看,貌似做出来的也不多.. ...