利用JS调取电脑摄像头,实现拍照功能
1.调取电脑摄像头非常简单,看代码一幕了然
window.addEventListener("DOMContentLoaded", function() {
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);
};
if(navigator.getUserMedia) { // Standarda
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);
}
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
可以自己去试试,可能还会有点兼容性问题。
利用JS调取电脑摄像头,实现拍照功能的更多相关文章
- 如何在app里利用js调取手机第三方地图--以高德地图和百度地图为例(2)
接着上篇文章说一下js调取第三方地图的问题,上次的方式是通过一个链接直接接到了第三方的web页面,又从第三方的web页面调用的第三方app;结果,这个方法被否定了,因为需求不是这样,需求直接就想调用第 ...
- 移动端js调取手机相册和拍照功能
前端可以通过js调取手机的相册和拍照功能,但不能拍视频!!! <!DOCTYPE html> <html lang="en"> <head> & ...
- WinForm利用AForge.NET调用电脑摄像头进行拍照和视频
当然了,你需要去官网下载类库,http://www.aforgenet.com/ 调用本机摄像头常用的组件: AForge AForge.Controls AForge.Imaging AForge. ...
- 【转】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 文件件监听器,android系统拍照功能调用后删除系统生成的照片
先说说要实现的功能: android调用系统拍照功能实时 预览 删除 上传 保存 (用户不能再本地文件夹中看到拍的照片) 再说说遇到的问题: 1.调用系统拍照在系统自带的拍照文件夹中生成一张随机命名图 ...
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- Java乔晓松-android中调用系统拍照功能并显示拍照的图片
android中调用系统拍照功能并显示拍照的图片 如果你是拍照完,利用onActivityResult获取data数据,把data数据转换成Bitmap数据,这样获取到的图片,是拍照的照片的缩略图 代 ...
- 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装
接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...
随机推荐
- May 28th 2017 Week 22nd Sunday
Behind every beautiful thing, there's some kind of pain. 美丽背后,必有某种努力. No pains, no gains. Maybe we n ...
- python入门9 条件语句
条件语句: if 条件为真: 执行语句块 (执行完结束不执行elif,else) elif 条件为真: 执行语句块 (执行完结束不执行else) else: 执行语句块 #coding:utf-8 # ...
- Ubuntu环境安装Gradle
AndroidStudio使用全新的构建系列—–Gradle. 这是官方为什么使用gradle 的理由: Domain Specific Language (DSL) to describe and ...
- Gym 101334C 无向仙人掌
给出图,求他的“仙人掌度”,即求包括他自身的生成子图有多少? 只能删去仙人掌上的叶子的一条边,然后根据乘法原理相乘: 1.怎么求一个仙人掌叶子上有多少边? 可以利用点,边双连通的时间戳这个概念,但是绝 ...
- sting.Contains()方法
作用: 返回一个值,判断给定的string对象 是否出现在指定的字符串当中 例子: if(str_arr[i].Contains(textBox1.Text)){//检查是否有匹配
- 从命令行运行Jmeter及jmeter参数说明、Html报告生成
为什么要命令行执行脚本,主要有以下三点: 1) 图形化界面消耗更多资源,CPU和内存 2) 图形化界面不支持大型的负载测试和性能测试 3) 命令行测试支持持续集成,例如放到Jenkins这样的CI工具 ...
- Strtus2框架使用HttpServletResponse响应数据
-----------------------------------------------------------------------------------------jsp-------- ...
- java 枚举类型enum
简单介绍 Java 中的枚举类型采用关键字enum 来定义,从jdk1.5才有的新类型,所有的枚举类型都是继承自Enum 类型.要了解枚举类型,建议大家先打开jdk 中的Enum 类简单读一下,这个类 ...
- js和.net操作Cookie遇到的问题
Cookie初探1.我理解中的Cookie1.1.Cookie存储位置是客户端的1.2.Cookie存储数据,数据大小也是有限制的 2.Cookie的用法2.1.js对Cookie的操作(网上很多我就 ...
- Spring MVC之@RequestBody, @ResponseBody 详解(转)
简介: @RequestBody 作用: i) 该注解用于读取Request请求的body部分数据,使用系统默认配置的HttpMessageConverter进行解析,然后把相应的数据绑定到要返回的对 ...