闲来无事,用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. XML 解析中 SelectSingleNode 与 SelectNodes 使用通配符介绍

    俺是 XML XPath的新手,最近因为项目需要,研究了一下基本的两个函数 SelectSingleNode和SelectNodes 是如何实用通配符的,分享以下基本经验: 假设有段XML 如下所示: ...

  2. python-pycharm 设置默认代码及注释

    pycharm

  3. [转]windows10 1703 鼠标右键打开命令提示符cmd

    https://answers.microsoft.com/zh-hans/windows/forum/windows_10-performance/windows10-1703/8bdfdfea-4 ...

  4. 招聘.Net中高级软件研发工程师

    岗位职责: 1.参与国土不动产系列软件需求分析.系统架构分析与设计: 2.为产品中的复杂功能编写产品开发需求文档: 3.根据设计文档或需求说明完成代码编写.调试.测试和维护: 4.配合上级进行技术决策 ...

  5. linux常用命令的全拼

    Linux常用命令英文全称与中文解释Linux系统   Linux常用命令英文全称与中文解释linux系统 man: Manual 意思是手册,可以用这个命令查询其他命令的用法. pwd:Print ...

  6. 对比<input type="text" id="">和<asp:TextBox runat="server" ID="">

    首先这两个都是对应文本输入框形式: <input type="text"class="form-control"id="txt_add_pro_ ...

  7. CCF 201604-1 折点计数 (水题,暴力)

    问题描述 给定n个整数表示一个商店连续n天的销售量.如果某天之前销售量在增长,而后一天销售量减少,则称这一天为折点,反过来如果之前销售量减少而后一天销售量增长,也称这一天为折点.其他的天都不是折点.如 ...

  8. Codeforces325 D【并查集维护连通性】

    参考:大牛blog 思路: 因为是环,所以可以复制一下图,先判断一下和他是不是和与他相邻的8个之一的一个障碍使得构成了一个环,环就是一个连通,用并查集维护即可: 如果没有就ans++,然后并把这个点加 ...

  9. 如何有效提升Unity Gear VR游戏性能

    http://www.vr186.com/vr_news/vr_technical_area/1093.html 好的,所以你决定用 Unity 来做一个 VR 游戏,并选定了三星 Gear vr 为 ...

  10. bzoj 4541: [Hnoi2016]矿区【平面图转对偶图+生成树】

    首先平面图转对偶图,大概思路是每条边存正反,每个点存出边按极角排序,然后找每条边在它到达点的出边中极角排序的下一个,这样一定是这条边所属最小多边形的临边,然后根据next边找出所有多边形,用三角剖分计 ...