<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

打开摄像头

var aVideo=document.getElementById('video');
var aCanvas=document.getElementById('canvas');
var ctx=aCanvas.getContext('2d'); navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;//获取媒体对象(这里指摄像头)
navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限;参数二成功打开后调用,并传一个视频流对象,参数三打开失败后调用,传错误信息 function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function () {
alert('摄像头成功打开!');
};
}
function noStream(err) {
alert(err);
}

按钮模拟拍照

document.getElementById("snap").addEventListener("click", function() {

                ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上
});

这样就成功啦!
但是!!!还有一点要注意,这在很多人那里都没有提到的,就是,打开摄像头一定要上server上打开,否则没办法使用!因为打开的是属于网络的webcam,需要在server上打开。

目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头,我这个是在chrome上测试成功的。

html5打开摄像头并用canvas模拟拍照 - 转的更多相关文章

  1. html5打开摄像头并用canvas模拟拍照

    网上很多关于用HTML5打开本地摄像头的文章,但各有瑕疵.根据我自己的亲身体验,我分享一下我用HTML5打开摄像头的经验. 废话不多说,直接看代码. HTML代码: <video id=&quo ...

  2. html5 打开摄像头

    <video onloadedmetadata="" id="inputVideo" style="width: 1080px;height: ...

  3. HTML5按键打开摄像头和拍照

    HTML5实现按键打开摄像头和拍照 步骤: 1.创建一个打开摄像头按钮的标签.video标签.拍照的按钮标签.画布 2.实现打开摄像头的功能 3.实现拍照功能   具体实现代码: <!DOCTY ...

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

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

  5. html 通过input video canvas 打开摄像头 定制相机

    在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来.页面布局很简单,就是一个input标签,两个HTML5元素video.canvas和一个but ...

  6. 经典!HTML5 Canvas 模拟可撕裂布料效果

    这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...

  7. 手机端file限制只能选择图片、视频、音频,直接打开摄像头拍照或录像

    限制只能选择图片 <input type="file" accept="image/*"> 限制只能选择视频 <input type=&quo ...

  8. 项目实战:Qt+Ffmpeg+OpenCV相机程序(打开摄像头、支持多种摄像头、分辨率调整、翻转、旋转、亮度调整、拍照、录像、回放图片、回放录像)

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

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

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

随机推荐

  1. 使用spec文件语法创建一个rpm

    How to create an RPM package/zh-hk < How to create an RPM package 此页面包含 Packaging:ScriptletSnippe ...

  2. if __name__ == '__main__的理解

    模块之间引用不能循环成环,圆圈   模块的收搜   !!!把模块当作脚本执行 什么叫模块:py文件,如果一个py文件被导入了,他就是一个模块, 模块没有具体的调用过程 但是能对外提供功能   什么叫脚 ...

  3. Qt样式表的使用

    Qt中可以灵活的使用层叠样式表(CSS),其语法和CSS很相似.因为HTML CSS的灵活性,所以可以很方便的为QT界面设计自己需要的外观.除了子类化Style类,使用QT样式表(QStyleShee ...

  4. LibreOJ 6004. 「网络流 24 题」圆桌聚餐 网络流版子题

    #6004. 「网络流 24 题」圆桌聚餐 内存限制:256 MiB时间限制:5000 ms标准输入输出 题目类型:传统评测方式:Special Judge 上传者: 匿名 提交提交记录统计讨论测试数 ...

  5. Delphi--最强大的开发工具(欢迎转载)

    最强大的开发工具 Delphi 目录 --------------------------------------------------------------------------- 前言 De ...

  6. Maximum Subarray LT53

    Given an integer array nums, find the contiguous subarray (containing at least one number) which has ...

  7. 实现SQL express版做自动备份数据库的方法

    SQL Server 2005/2008 Express版没有代理组件,不支持维护计划.可以采用下面的办法实现每日备份: 一.在要备份的数据库中创建存储过程. 存储过程名称:sp_BackupData ...

  8. strace使用

    统计信息 -c -- count time, calls, and errors for each syscall and report summary 输出结果到文件 -o   例如 strace ...

  9. CRC-32的原理和实现

    /* crc32.c -- compute the CRC-32 of a data stream * Copyright (C) 1995-2002 Mark Adler * For conditi ...

  10. unity在一个对象上挂多个一样的脚本怎么获取

    使用GetComponents获取,存到一个该类的数组里