调取摄像头、拍照

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<video width="640" height="480" id="myVideo"></video>

<canvas width="640" height="480" id="myCanvas"></canvas>

<button id="myButton">拍摄</button>

<button id="myButton2">预览</button>

<button id="myButton3">

<a download="video.png">另存为</a>

</button>

</body>

</html>

js 调用

<script>

window.addEventListener('DOMContentLoaded',function(){

var cobj=document.getElementById('myCanvas').getContext('2d');

var vobj=document.getElementById('myVideo');

getUserMedia({video:true},function(stream){

vobj.src=stream;

vobj.play();

},function(){});

document.getElementById('myButton').addEventListener('click',function(){

cobj.drawImage(vobj,0,0,640,480);

document.getElementById('myButton3').children[0].href=cobj.canvas.toDataURL("image/png");

},false);

document.getElementById('myButton2').addEventListener('click',function(){

window.open(cobj.canvas.toDataURL("image/png"),'_blank');

},false);

},false);

function getUserMedia(obj,success,error){

if(navigator.getUserMedia){

getUserMedia=function(obj,success,error){

navigator.getUserMedia(obj,function(stream){

success(stream);

},error);

}

}else if(navigator.webkitGetUserMedia){

getUserMedia=function(obj,success,error){

navigator.webkitGetUserMedia(obj,function(stream){

var _URL=window.URL || window.webkitURL;

success(_URL.createObjectURL(stream));

},error);

}

}else if(navigator.mozGetUserMedia){

getUserMedia=function(obj,success,error){

navigator.mozGetUserMedia(obj,function(stream){

success(window.URL.createObjectURL(stream));

},error);

}

}else{

return false;

}

return getUserMedia(obj,success,error);

}

</script>

Web调取摄像头拍照的更多相关文章

  1. C# 调取摄像头 +拍照

    1.添加引用 using System.Windows.Media.Imaging; using AForge; using AForge.Controls; using AForge.Video; ...

  2. HTML5 + JS 调取摄像头拍照下载

    <video id="video" width="640" height="480" autoplay></video&g ...

  3. react-native-image-picker 运用launchCamera直接调取摄像头的缺陷及修复

    在前几天用react-native进行android版本开发当中,用到了"react-native-image-picker"的插件:根据业务的需求:点击按钮-->直接调取摄 ...

  4. 摄像头拍照，PHP输入流php://input的使用分析

    在做一个摄像头拍照然后上传的功能,php中使用php://input来获取内容.于是就了解了下php://input. 从官网信息来看,php://input是一个只读信息流,当请求方式是post的, ...

  5. React Native学习－调取摄像头第三方组件：react-native-image-picker

    近期做的软件中图片处理是重点,那么自然也就用到了相机照相或者相册选取照片的功能. react-native中有image-picker这个第三方组件,但是0.18.10这个版本还不是太支持iPad. ...

  6. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  7. VS2010开发MFC ActiveX,摄像头拍照上传Webservice(1)

    最近工作项目,BS中需要用到摄像头拍照,需要存储本地,同时上传到服务器,尝试使用vc++做ActiveX来实现. 完全没有使用过vc,上网搜索各种知识,初步完成.在这里记录下有帮助的资料. 第一步:编 ...

  8. 用Python控制摄像头拍照并发邮件

    概述前言 工具 思路 安装及导入包 设置参数 实现拍照 构造邮件内容 发送邮件 判断网络连接 开机自启 后记 o1 前言为什么会有写这个程序的想法呢? 最初的想法是写一个可以用电脑前置摄像头拍照的程序 ...

  9. 如何在SAP UI5应用里添加使用摄像头拍照的功能

    昨天Jerry的文章 纯JavaScript实现的调用设备摄像头并拍照的功能 介绍了纯JavaScript借助WebRTC API来开发支持调用设备的摄像头拍照的web应用.而我同事遇到的实际情况是, ...

随机推荐

  1. 求一个n!中尾数有多少个零

    题目描述: 输入一个正整数n,求n!(即阶乘)末尾有多少个0? 比如: n = 10; n! = 3628800,所以答案为2 输入描述: 输入为一行,n(1 ≤ n ≤ 1000) 输出描述: 输出 ...

  2. 依赖注入(DI)

    Spring依赖注入(DI)的三种方式,分别为: 1．  接口注入 2．  Setter 方法注入 3．  构造方法注入 依赖注入是一种思想,或者说是一种设计模式,在java中是通过反射机制实现,与具 ...

  3. JavaScript实现几种常见的图形

    一.四种常见的三角形 第一种三角形: for(var i=1;i<=5;i++){        for( var j=i;j<=5;j++){                 docum ...

  4. python-包管理工具-pip

    目录 Python pip pip相关命令 解决pip相关问题 Python pip回到顶部 Python最让人的喜欢的就是它有丰富的类库和各种第三方的包,而对于这些包的下载.删除等管理操作,就要用到 ...

  5. Newtonsoft.Json高级篇：TypeNameHandling设置

    原文:Newtonsoft.Json高级篇:TypeNameHandling设置 此示例使用TypeNameHandling 设置在序列化JSON和读取类型信息时包含类型信息,以便在反序列化JSON时 ...

  6. xcart-子分类/语言不显示

    由于数据库的版本不同,表名会区分大小写的情况,这样就导致xcart语言相关的信息显示不出来,此时只需更改根目录下的init.php文件,如下: 改成小写的就OK了.

  7. leetcode-142-环形链表②

    题目描述: 方法一:O(n) O(n) # Definition for singly-linked list. # class ListNode(object): # def __init__(se ...

  8. Apache添加多端口及实现单ip多端口映射的方法

    这篇文章主要介绍了Apache添加多端口及实现单ip多端口映射的方法的相关资料,需要的朋友可以参考下(http://www.0831jl.com) 先给大家说下apache添加多端口的方法,具体步骤如 ...

  9. day09 samba、nginx服务配置

    samba 1.环境准备 [root@localhost ~]# iptables -F #清除防火墙配置 [root@localhost ~]# systemctl stop firewalld # ...

  10. 三次面试总结以及今后的todolist

    金三银四跳槽季,按耐不住蠢蠢欲动的跳槽心,投了好多家的前端招聘,目前面了三家,有把握的零家.古人吾日三省吾身,我没那么高的觉悟,三面省一下自身,太咸鱼了是的我就是这么觉得的. 第一家公司在景田,很远, ...