完整代码展示

<!DOCTYPE html>

<head>

    <title>HTML5 GetUserMedia Demo</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

</head>

<body>

<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" /><br />

<video height="120px" autoplay="autoplay"></video><hr />

<input type="button" title="拍照" value="拍照" onclick="getPhoto();" /><br />

<canvas id="canvas1" height="120px" ></canvas><hr />

<input type="button" title="视频" value="视频" onclick="getVedio();" /><br />

<canvas id="canvas2" height="120px"></canvas>

<button onclick="imgUrl()">获取地址</button>

<script type="text/javascript">

    function imgUrl(){

        var imgsrc = document.getElementById('canvas1').toDataURL("image/png");

    }

    var video = document.querySelector('video');

    var audio, audioType;

    var canvas1 = document.getElementById('canvas1');

    var context1 = canvas1.getContext('2d');

    var canvas2 = document.getElementById('canvas2');

    var context2 = canvas2.getContext('2d');

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

    var exArray = []; //存储设备源ID

    MediaStreamTrack.getSources(function (sourceInfos) {

        for (var i = 0; i != sourceInfos.length; ++i) {

            var sourceInfo = sourceInfos[i];

            //这里会遍历audio,video，所以要加以区分

            if (sourceInfo.kind === 'video') {

                exArray.push(sourceInfo.id);

            }

        }

    });

    function getMedia() {

        if (navigator.getUserMedia) {

            navigator.getUserMedia({

                'video': {

                    'optional': [{

                        'sourceId': exArray[1] //0为前置摄像头，1为后置

                    }]

                },

                'audio':true

            }, successFunc, errorFunc);    //success是获取成功的回调函数

        }

        else {

            alert('Native device media streaming (getUserMedia) not supported in this browser.');

        }

    }

    function successFunc(stream) {

        //alert('Succeed to get media!');

        if (video.mozSrcObject !== undefined) {

            //Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持

            video.mozSrcObject = stream;

        }

        else {

            video.src = window.URL && window.URL.createObjectURL(stream) || stream;

        }

        //video.play();

        // 音频

        audio = new Audio();

        audioType = getAudioType(audio);

        if (audioType) {

            audio.src = 'polaroid.' + audioType;

            audio.play();

        }

    }

    function errorFunc(e) {

        alert('Error！'+e);

    }

    // 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果

    function drawVideoAtCanvas(video,context) {

        window.setInterval(function () {

            context.drawImage(video, 0, 0,90,120);

        }, 60);

    }

    //获取音频格式

    function getAudioType(element) {

        if (element.canPlayType) {

            if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {

                return ('aac');

            } else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {

                return ("ogg");

            }

        }

        return false;

    }

    // vedio播放时触发，绘制vedio帧图像到canvas

    //        video.addEventListener('play', function () {

    //            drawVideoAtCanvas(video, context2);

    //        }, false);

    //拍照

    function getPhoto() {

        context1.drawImage(video, 0, 0,90,120); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。

    }

    //视频

    function getVedio() {

        drawVideoAtCanvas(video, context2);

    }

</script>

</body>

h5获取摄像头拍照功能的更多相关文章

  1. C# - VS2019调用AForge库实现调用摄像头拍照功能

    前言 作为一名资深Delphi7程序员,想要实现摄像头扫描一维码/二维码功能,发现所有免费的第三方库都没有简便的实现办法,通用的OpenCV或者ZXing库基本上只支持XE以上的版本,而且一维码的识别 ...

  2. ios照片获取，拍照功能

    // //  HYBPhotoPickerManager.h //  ehui // //  Created by 黄仪标 on 14/11/26. //  Copyright (c) 2014年 黄 ...

  3. 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能，不兼容IE

    <template>     <div>       <!--canvas截取流-->       <canvas ref="canvas" ...

  4. mui H5+ 调取 相册 拍照 功能 上传图片 + 裁剪功能

    H5+ 相册拍照图片上传 点击用户头像后,弹出actionSheet,选择从相册或是拍照:选取照片后调用上传方法: 上传图片后调用PhotoClip.js  插件进行裁剪 具体流程 弹出actionS ...

  5. C#利用摄像头拍照功能实现

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. 调用本地摄像头拍照（H5和画布）

    关于H5 和 画布 调用本地摄像头拍照功能的实现 1.代码的实现(html部分) <input type="button" title="开启摄像头" v ...

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

    继续记录,第二步开发摄像头拍照功能. 使用vfw.h开发摄像头拍照功能,关于vfw网上有很多文章,很多代码可以参考 参考:http://blog.163.com/huangqiao_8/blog/st ...

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

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

  9. H5实现调用本地摄像头实现实时视频以及拍照功能

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 06.Spring 资源加载 - ResourceLoader

    基本概念 ResourceLoader 接口,在 Spring 中用于加载资源,通过它可以获取一个 Resouce 对象. 内部构造 首先来看它的接口定义: public interface Reso ...

  2. 029 Divide Two Integers 两数相除

    不使用乘号,除号和取模符号将两数相除.如果溢出返回 MAX_INT.详见:https://leetcode.com/problems/divide-two-integers/description/ ...

  3. string的各种函数（系统学习）

    1.按照面向对象的要求,可以把字符串看作一个对象,设计一个串类加以描述.但是,在一般的情况下不必建立自己的串类,c++标准 在库<string>中给出了类string,提供了丰富的串操作, ...

  4. Codeforces Round #172 (Div. 2) D. Maximum Xor Secondary 单调栈应用

    http://codeforces.com/contest/281/problem/D 要求找出一个区间,使得区间内第一大的数和第二大的数异或值最大. 首先维护一个单调递减的栈,对于每个新元素a[i] ...

  5. Hello ASP.NET on Docker -- CentOS

    1.docker pull microsoft/aspnet 2.docker run -p 5004:2015 microsoft/aspnet --穿越后 3.cd ~ && wg ...

  6. kettle5.4ODBC和OCI连接配置

    1.kettle 5.4 使用JDBC连接的时候报错(测试不同的数据库,发现只是连接11gRAC 的时候会报JDBC的错误) 具体报错如下 java.sql.SQLException: 建数据库连接出 ...

  7. SQLServer2008 开启远程连接

    关闭防火墙 基本的设置可以参考下面的链接: http://wenku.baidu.com/link?url=qjZKZCCoa5T3EGd_rqSjl6Tuhb1wYjIHyXri630QxuAIKu ...

  8. Vue.js（2.x）之Class 与 Style 绑定

    1.前面看数据绑定时还很困惑v-bind处理class时可以使用json格式的值,为什么换成id.href等其他属性就不行.看了下文档解释后明白了些: 2.对象语法主要有以下三种形式: 1)直接在v- ...

  9. Java图形界面开发—简易登录注册小程序

    登录注册小代码,将学过的一些小知识融合在一起进行了使用,加深印象.本例中如果有注释不详细的地方,详见其它博客. Java程序操作数据库SQLserver详解 功能介绍:简单的登录注册系统,使用了数据库 ...

  10. SpringBoot的特性

    SpringBoot的理念“习惯优于配置” 习惯优于配置(项目中存在大量的配置,此外还内置了一个习惯性的配置,无须手动进行配置) 使用SpringBoot可以方便地创建独立运行.准生产级别的基于Spr ...