<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no" name="format-detection" />
    <title>测试</title>
</head>
<body>
<video id="video" width="320" height="240" autoplay></video>
<button id="snap">拍摄</button>
<canvas id="canvas" width="320" height="240"></canvas>
<script>
    window.addEventListener("DOMContentLoaded", function() {
        var canvas = document.getElementById("canvas"),//调用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) {//调用html5拍摄接口
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = stream;//摄像机属于视频流，所以当然要输出到html5的video标签中了
                video.play();//开始播放
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { //WebKit内核调用html5拍摄接口
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);//同上
                video.play();//同上
            }, errBack);
        }
        else if(navigator.mozGetUserMedia) { //moz内核调用html5拍摄接口
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);//同上
                video.play();//同上
            }, errBack);
        }
    }, false);

document.getElementById("snap")
            .addEventListener("click", function() {//获取拍照按钮绑定事件
                var canvans = document.getElementById("canvas"),//调用canvas接口
                        context = canvas.getContext("2d");
                context.drawImage(video, 0, 0, 640, 480);//调用canvas接口的drawImage方法绘制当前video标签中的静态图片，其实就是截图

var imgData = canvans.toDataURL();//获取图片的base64格式的数据
                //这里就可以写上传服务器代码了
            });
</script>
</body>
</html>

H5实现拍照并上传的更多相关文章

  1. PC端 H5实现拍照并上传

    <!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <meta name=& ...

  2. 在浏览器端用H5实现图片压缩上传

    一.需求的场景: 在我们的需求中需要有一个在手机浏览器端,用户实现上传证件照片的功能,我们第一版上了一个最简版,直接让用户在本地选择图片,然后上传到公司公共的服务器上. 功能实现后我们发现一个问题,公 ...

  3. 项目分享五：H5图片压缩与上传

    一.简介 图片的压缩与上传,是APP里一个很常用的功能.我们来年看 ChiTuStore 是怎样做的.相关文件 App/Module/User/UserInfo.html,App/Module/Use ...

  4. h5 + nginx + php 视频上传之突破文件大小受限的解决办法

    一.环境: CentOS 6.8 nginx 1.8.0 php 7.0.10 二.背景 基于 nginx + php 的 h5 项目,上传视频的时候,如果视频太大,会上传失败. 三.正文 一份视频传 ...

  5. 微信JS-SDK选择相册或拍照并上传PHP实现

    理解:微信上传接口是拍照,或者选择本地照片,上传到微信的服务器,获取到一个id,通过token与这个id获取到图片,保存到服务器即可. 效果 通过微信js接口,调用底层程序. 需要引入js文件,并进行 ...

  6. h5属性直接控制上传文件类型

    和公司前端交互的时候发现我在选择上传文件的时候只能选择图片,其他类型,text,doc等等等等全部无法选择 仔细查看了下代码,发现归功于H5新增(??没查到资料,不确定是不是H5的)的input属性 ...

  7. Hbuilder mui 相册拍照图片上传

    http://www.bcty365.com/content-146-3648-1.html 使用流程 弹出actionSheet /*点击头像触发*/ document.getElementById ...

  8. android选择图片或拍照图片上传到服务器(包括上传参数)

    From:http://blog.csdn.net/springsky_/article/details/8213898具体上传代码: 1.选择图片和上传界面,包括上传完成和异常的回调监听 [java ...

  9. hybird app项目实例：安卓webview中HTML5拍照图片上传

    应用的平台环境:安卓webview: 涉及的技术点: (1) <input type="file" > :在开发中,安卓webview默认点击无法调用文件选择与相机拍照 ...

随机推荐

  1. CSS 伪类和伪对象选(五)

    一.伪选择器 伪选择器包括:伪类选择器和伪对象选择器,以冒号(:)作为前缀,冒号后紧跟伪类或者伪对象名称,冒号前后没有空格,否则解析为包含选择器 如: div:hover{ font-size:12p ...

  2. iOS多线程初见

    . 三种创建线程的方法 //第一种 NSThread * thread1 = [[NSThread alloc] initWithTarget:self selector:@selector(doAc ...

  3. HTTP 请求方式: GET和POST的比较当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。

    什么是HTTP? 超文本传输协议(HyperText Transfer Protocol -- HTTP)是一个设计来使客户端和服务器顺利进行通讯的协议. HTTP在客户端和服务器之间以request ...

  4. 配置gitlab gerrit jenkins

    配置gerrit 在gerrit创建jenkins用户 把jenkins用户加入Non-Interactive的组中 Projects -> List -> All-Projects Pr ...

  5. MySql查询语句中解决“该列没有包含在聚合函数或者groupby子句中”的相关问题方法

    首先引入语句来源,表结构和数据如下: 需求是:查出员工(personname)在不同店铺(store)的总薪酬(salary),相同店铺输出store,不同店铺输出multi_store. 正确查询语 ...

  6. 读书笔记——数据库的ADO开发总结

    基本上是对 ADO+开发指南.pdf 的摘抄和总结,以及个人心得. 文章末尾有<ADO+开发指南.pdf>的资源下载,附带个人批注. --------------------------- ...

  7. centos7 新手基本命令

    1. yum update 安装系统后,更新yum到最新版本 提示错误 :cannot find a valid baseurl for repo: base/7/x86_64 解决:修改/etc/s ...

  8. oracle缓存池使用解析

    oracle有三种类型的缓存池,分别是default,keep和recycle.默认情况下只会使用default缓存池,另外两种需要额外配置. keep缓存池相当于是一直很热的default缓存池,缓 ...

  9. 在ubuntu14.04上配置cuda_caffe_cudnn_anaconda_digits

    参考网上的很多网站,以这篇为主:http://blog.csdn.net/yhl_leo/article/details/50961542 这篇算是自己对caffe学习的一个总结系列的开头.首先因为c ...

  10. hyperv 创建第二代虚拟机

    环境:宿主机windows 8.1,虚拟机:windows 8.1 硬件:笔记本电脑,无线网络,没有有线网络网络配置先不设置 1.安装hyperv,控制面版-->程序和功能-->启用或关闭 ...