在一些浏览器里已经可以使用web api调用摄像头功能了。

基于此可以经行拍照摄像功能，网上找了些资料，然后实现了简单的拍照功能

演示地址 bingxl.cn/webrtc.html

代码

<!DOCTYPE html>

<html lang="ZH-CN">

<head>

  <meta charset="utf-8">

  <title>web RTC 测试</title>

  <style>

    .booth {

	  width:400px;

	  background:#ccc;

	  border: 10px solid #ddd;

	  margin: 0 auto;

	}

  </style>

</head>

<body>

  <div class="booth">

    <video id="video" width="400" height="300"></video>

	<button id='tack'> snap shot</button>

	<canvas id='canvas' width='400' height='300'></canvas>

	<img id='img' src=''>

  </div>

  <script>

    var video = document.getElementById('video'),

		canvas = document.getElementById('canvas'),

		snap = document.getElementById('tack'),

		img = document.getElementById('img'),

		vendorUrl = window.URL || window.webkitURL;

	//媒体对象

	navigator.getMedia = navigator.getUserMedia ||

						 navagator.webkitGetUserMedia ||

						 navigator.mozGetUserMedia ||

						 navigator.msGetUserMedia;

	navigator.getMedia({

		video: true, //使用摄像头对象

		audio: false  //不适用音频

	}, function(strem){

		console.log(strem);

		video.src = vendorUrl.createObjectURL(strem);

		video.play();

	}, function(error) {

		//error.code

		console.log(error);

	});

	snap.addEventListener('click', function(){

		//绘制canvas图形

		canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);

		//把canvas图像转为img图片

		img.src = canvas.toDataURL("image/png");

	})

  </script>

</body>

</html>

demo演示;

特别说明

  1. 有些浏览器可能不支持此功能
  2. 必须通过服务器打开页面，通过files：//打开无效
  3. 如果通过远程服务器打开则必须是https协议， http协议也无法使用

使用js调用摄像头拍照的更多相关文章

  1. JS调用摄像头拍照，编辑jscam.swf自定义清晰度，兼容IE

    超级简单自定义宽高的jscam.swf文件: 下载swfmill,地址:http://download.csdn.net/download/wu3431214/9967414 下载mtasc,地址:h ...

  2. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  3. android: 调用摄像头拍照

    很多应用程序都可能会使用到调用摄像头拍照的功能,比如说程序里需要上传一张图片 作为用户的头像,这时打开摄像头拍张照是最简单快捷的.下面就让我们通过一个例子来学 习一下,如何才能在应用程序里调用手机的摄 ...

  4. AForge调用摄像头拍照时设置分辨率

    简单记录下AForge2.2.5.0版本调用摄像头拍照时设置分辨率的方法. FilterInfo info = _videoDevices[0];//获取第一个摄像头 _cameraDevice = ...

  5. C# - VS2019调用AForge库实现调用摄像头拍照功能

    前言 作为一名资深Delphi7程序员,想要实现摄像头扫描一维码/二维码功能,发现所有免费的第三方库都没有简便的实现办法,通用的OpenCV或者ZXing库基本上只支持XE以上的版本,而且一维码的识别 ...

  6. Cordova - 使用Cordova开发iOS应用实战4（调用摄像头拍照，并编辑）

    使用Cordova可以很方便的通过js代码来使用设备摄像头拍照,只需把camera插件添加进来即可. 一,添加camera插件 首先我们要在“终端”中进入工程所在的目录,然后运行如下命令: 1 cor ...

  7. 【MediaKit】WPF项目中 调用摄像头拍照的开发包

    今天遇到一个 人事的项目,项目中需要调用摄像头给员工照相.如何解决这个问题呢? 介绍一个开发包给你,MediaKit.论坛里头的人都说好,但是黑兔觉得大家好才是真的好.你不妨试试~ 第一步:添加WPF ...

  8. html5中调用摄像头拍照

    方法: getCamera: 获取摄像头管理对象 对象: Camera: 摄像头对象 CameraOption: JSON对象.调用摄像头的參数 PopPosition: JSON对象,弹出拍照或摄像 ...

  9. android ——调用摄像头拍照和相册

    先在布局文件中加入两个按钮和一个图片控件 <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...

随机推荐

  1. java java 内部类

    java 内部类 一.java内部类: java内部类分为: 成员内部类.静态嵌套类.方法内部类.匿名内部类 . 内部类的共性: (1).内部类仍然是一个独立的类,在编译之后内部类会被编译成独立的.c ...

  2. python logging日志库

    项目中使用的日志库是使用python官方库logging封装的,但是居然一直么有设置日志自动滚动,经常会受到告警说哪台机器磁盘空间又满,清理一下,于是研究一下,解决这个问题. 参考:https://d ...

  3. kuangbin专题16H(next数组)

    题目链接: https://vjudge.net/contest/70325#problem/H 题意: 输入字符串 str, 求 str 子串中既是 str 前缀又是 str 后缀的的字符串长度, ...

  4. Python函数的冒泡排序、递归以及装饰器

    函数的冒泡排序: 本质是,让元素换位置,逐个比较最终排序. 例1:实现a1,a2值互换: a1 = 123 a2 = 456 temp = a1 a1 = a2 a2 = temp print(a1) ...

  5. P2723 丑数 Humble Numbers

    题意:给你k个质数,定义丑数集合为k个质数随机(1--k)个相乘得到的数 求第n小的丑数 暴力...貌似不太可行,(把所有大量丑数求出来,sort   QAQ) 可以想到,对于第i个丑数f[i],它一 ...

  6. 微信网页授权操作逻辑封装-C#实例

    http://blog.csdn.net/u011127019/article/details/52650619

  7. 「模拟赛20180406」膜树 prufer编码+概率

    题目描述 给定一个完全图,保证\(w_{u,v}=w_{v,u}\)且\(w_{u,u}=0\),等概率选取一个随机生成树,对于每一对\((u,v)\),求\(dis(u,v)\)的期望值对\(998 ...

  8. 【三支火把】--- 关于UEFI&PCD的总结介绍

    1个人理解 个人理解PCD基本等同于Token,应当算是一种描述性语言,按照规定书写好PCD的配置档,在编译的过程中,会根据你的配置生成同等含义的C文档,而在C文档中对应会出现相应的define或者变 ...

  9. 使用Tensorflow object detection API——环境搭建与测试

    [软件环境搭建] 操作系统:windows 10 64位 内存:8G CPU:I7-6700 Tensorflow: 1.4 Python:3.5 Anaconda3 (64-bit) 以上环境搭建请 ...

  10. vue四、实例

    1.new Vue创建根实例 2.data对象,所有的属性加入到 Vue 响应式系统-值发生改变时,视图自动变更为新值 只有实例被创建时存在的属性才会响应式改变,后增加的不会 vue定义的实例属性和方 ...