闲来无事,用js写了一个调用摄像头的demo,并用canvas显示保存。这个功能很实用,比如上传用户的头像,即时拍照及时上传。

Html:

  <video width="200px" height="150px"></video>
<canvas width="200px" height="150px"></canvas>
<p>
<button id="start">打开摄像头</button>
<button id="snap">截取图像</button>
<button id="close">关闭摄像头</button>
</p>

JavaScript:

 window.onload = function () {
var canvas = document.getElementsByTagName('canvas')[0],
context = canvas.getContext('2d'),
video = document.getElementsByTagName("video")[0],
snap = document.getElementById("snap"),
close = document.getElementById("close"),
start = document.getElementById("start"),
MediaStreamTrack;
start.addEventListener('click', function () {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(function (stream) {
console.log(stream);
MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
video.src=(window.URL).createObjectURL(stream);
video.play();
}).catch(function(err){
console.log(err);
});
}else if(navigator.getMedia){
navigator.getMedia({
video: true
}).then(function (stream) {
console.log(stream);
MediaStreamTrack=stream.getTracks()[1];
video.src=(window.webkitURL).createObjectURL(stream);
video.play();
}).catch(function(err){
console.log(err);
});
}
});
snap.addEventListener('click', function () {
context.drawImage(video, 0, 0,200,150);
});
close.addEventListener('click', function () {
MediaStreamTrack && MediaStreamTrack.stop();
});
}

总结:上面这个Demo主要用到浏览器的摄像头组件,然后再将图片源赋给canvas。其中遇到一个坑:代码需要托管到服务器端,即在客户端访问才能调用浏览器成功。这种禁止本地调用的做法可能是出于浏览器的安全性和用户的隐私考虑。

js如何调用电脑的摄像头的更多相关文章

  1. js实现浏览器调用电脑的摄像头拍照

    <!DOCTYPE html> <html lang="en"> <head> <style> * { margin: ; padd ...

  2. 手机变为电脑的摄像头,使像素高清起来-使用DroidCam

    你是不是已经在嫌弃电脑自带的摄像头的渣渣像素呢? 今天给大家安利一个方法:将手机摄像头设置为电脑的摄像头,让像素高清起来,对于搞图像的同志们真是福音啊,尤其是做人脸识别的时候. 方法有很多种,我推荐我 ...

  3. WebView使用详解(一)——Native与JS相互调用(附JadX反编译)

    念念不忘,必有回响,永远坚持你所坚持的! 一直在用WebView,还没有系统的总结过它的用法,下面就系统的总结下,分享给大家 一.基本用法 1.加载在线URL void loadUrl(String ...

  4. js前台调用lodop打印

    lodop简单介绍 lodop的打印功能已经非常强大,也在带web端的图形界面,可以供用户使用.使用js在前台调用lodop打印,一般分为两种方法: 1:特殊的指令打印,这种打印方式,是采用的与js无 ...

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

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

  6. Android-webview和js互相调用

    Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的 ...

  7. 关于action script与js相互调用的Security Error问题

    大家都知道,as和js相互调用可以通过ExternalInterface.call和ExternalInterface.addCallback来进行. 比较好的做法是使用之前通过ExternalInt ...

  8. JS如何调用隐藏按钮的click事件

    js如何调用隐藏按钮的click事件:1.设定隐藏不要使用Visiable属性,使用style.display=none:2.触发JS事件可以使用fireEvent方法,如:document.getE ...

  9. JS方式调用本地的可执行文件

    看到一个方法,有些用,先存下来,有用的时候再用. 前几天,在IE,FIREFOX中实现了用JS方式调用本地的可执行文件.地址:www.yihaomen.com/article/js/211.htm , ...

随机推荐

  1. codevs 2102 石子归并2

    传送门 2102 石子归并 2  时间限制: 10 s  空间限制: 256000 KB  题目等级 : 黄金 Gold   题目描述 Description 在一个园形操场的四周摆放N堆石子,现要将 ...

  2. UItextFied 的属性

    网络学习笔记 在iPhone应用中通过UITextField填写信息时,经常出现出现自动更正输入信息.首字母大写等情况 尤其是在填写用户名时,这种本想提供便捷的功能反而让人感到特别麻烦 今天查了相关书 ...

  3. ETL 循环导入 平面文件

    http://blog.csdn.net/zlp321002/article/details/3413365 ETL设计之-Foreach 循环容器 应用场景: 批量导入某一文件夹下的所有文件.就可以 ...

  4. nginx proxy https

    server {listen 443;server_name mail.jb51.net; ssl on;ssl_certificate server.crt;ssl_certificate_key ...

  5. 【219】◀▶ IDL 数学函数说明

    参考:Math - Miscellaneous Routines参考:Math - Statistical Tools Routines 01   ABS 绝对值. 02   SQRT 平方根. 03 ...

  6. 关于git被误删除的分支还原问题

    在开发过程中, 有可能会将正在开发的本地分支误删, 本地分支被删除时, 如果已经将本地分支的变更推送到了远端, 还没有问题, 如果被删除的本地分支只提交了没有推送到远端, 就悲剧了, 相当于在你上一次 ...

  7. 【Linux学习】Linux系统管理2—作业调度

    Linux系统管理2-作业调度 at: 作业仅执行一次就从系统工作队列中取消 语法 denny@ubuntu:~$ at [-m] TIME                     → 作业命令at ...

  8. 爬虫代码实现四:采用Hbase存储爬虫数据(1)

    3.Hbase表设计: 1.窄表:列少行多,表中的每一行尽可能保持唯一. 2.宽表:列多行少,通过时间戳版本来进行区分取值. 窄表:比如说,这个表,rowkey由userid+时间+bbsid假设bb ...

  9. char*和CStringA互转

    char*->CStringA char* ch1 = "中文测试123"; CStringA str(ch1); CStringA->char* char* ch2 ...

  10. hihocoder #1607 : H星人社交网络(双指针)

    传送门 题意 分析 可知对与某个数x,设其可发送信息的边界为[L,R],那么随着x的递增,[L,R]也右移,故可对输入数排序,做一次双指针即可 trick 代码 //1. Aj < 1/8 * ...