利用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)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...
随机推荐
- Orchard Core 文档翻译 (四)CMS ModulesTitle (OrchardCore.Title)
Title (OrchardCore.Title) 标题模块提供Title Part ,允许用户定义内容项的标题.它还定义了ContentItemMetadata方面的DisplayText属性 Th ...
- oozie 完整流程实例
Oozie概述: Oozie是一个基于Hadoop工作流引擎,也可以称为调度器,它以xml的形式写调度流程,可以调度mr,pig,hive,shell,jar,spark等等.在实际工作中,遇到对数据 ...
- T-SQL 基础 2
运行结果: while 循环 运行结果: 运行结果 : if 判断语句 计算 1到100的基数 运行结果 1到100的偶数 运行结果 局部变量前缀是 @ 全局变量(包括系统变量) 前缀是 @@
- 【转】不错的linux下通用的java程序启动脚本
虽然写起动shell的频率非常不高...但是每次要写都要对付一大堆的jar文件路径,新加jar包也必须要修改起动shell. 在网上找到一个挺好的通用shell脚本. 只需要修改一些配置变量,就可以用 ...
- [转]关于VC++ MFC中的空闲Idle处理机制!
关键词: 先根据空闲标志以及消息队列是否为空这两个条件判断当前线程是否处于空闲状态(这个“空闲”的含义同操作系统的含义不同,是MFC自己所谓的“空闲”),如果是,就调用CWinThread::OnId ...
- 【洛谷P1886】滑动窗口
滑动窗口 [题目描述] 有N个数字,以及一个大小为k的窗口.现在这个窗口从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 思路: k<=N<=1000000,暴 ...
- Android学习笔记_76_Android ProgressBar 进度条
android 进度条的样式 例1:(默认样式(中等圆形))Xml代码 <ProgressBar android:id="@+id/progressBar1" ...
- T4Toolbox简单了解
使用T4模板,最令人喜欢的就是T4Toolbox了,他可以帮助我们生成多文件,并且直接包含在项目中. 环境:vs2017 T4代码高亮插件:Devart T4 Editor 插件地址:T4 Toolb ...
- Extjs 4 动态显示折线图 按秒显示
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 1486: [HNOI2009]最小圈
Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 3129 Solved: 1543[Submit][Status][Discuss] Descripti ...