<!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. 基础学习day07---面向对象三---继承，接口与 抽象类

    一.继承 1.1.继承概念 将对象的共性抽取出来.提取出一个单独的类. 继承使用复用以前的代码非常容易,能够大大的缩短开发周期,降低开发成本,同时增加程序的易维护性 继承使重一个类A能够直接使用另外一 ...

  2. c语言中的部分字符串和字符函数

    // // main.c // homeWork1230 // // #include <stdio.h> #include <string.h> #include <c ...

  3. 斯坦福iOS7公开课11笔记及演示Demo&访问HTTPS链接下载数据

    这一节主要介绍UITableView以及iPad,Demo为从Flicker下载图片并显示,但是实际过程中发现需要FQ并使用HTTPS连接,所以这次用了两个Demo,一个是课程中的Demo,另一个是简 ...

  4. JavaScript Patterns 2.10 Naming Conventions

    1. Capitalizing Constructors var adam = new Person(); 2. Separating Words camel case - type the word ...

  5. WebApi 使用PUT和DELETE时报405的问题

    最近两天写了个项目,里面有一个接口是用谓词delete接收请求. 本地完全没问题,但是当发布到服务器上之后(IIS7.5),就报出 405.0 - Method Not Allowed 很明显是配置问 ...

  6. Memcache限制端口和访问IP

    Memcache安装十分简单,默认情况下是任何人都可以访问服务器上缓存的数据,所以如果不作处理的话 是很不安全的(乌云上已经提交有很多与此相关的问题) 1.首先要保证服务器上的防火墙都是开启的 2.设 ...

  7. Cocos2d-x分类

    Cocos2d-x win7 + vs2010 配置图文详解(亲测) Cocos2d-x建工程时避免copy文件夹和库

  8. C#操作XML小结(转)

    一.简单介绍 using System.Xml; //初始化一个xml实例 XmlDocument xml=new XmlDocument(); //导入指定xml文件 xml.Load(path); ...

  9. PL/SQL之--流程控制语句

    一.简介 像编程语言一样,oracle PL/SQL也有自己的流程控制语句.通过流程控制语句,我们可以在PL/SQL中实现一下比较复杂的业务逻辑操作.而无需到程序中去控制,在一定程度上提高了效率,这也 ...

  10. JavaScript中的直接量与初始器的区别

    很多代码优化及公司规范都会提到 写对象不应该 var obj = new Object() 而应该 var obj = {} 写数组不应该 var arr = new Array() 而应该 var ...