完整代码展示

<!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. View转换为Bitmap及getDrawingCache

    View组件显示的内容可以通过cache机制保存为bitmap, 使用到的api有 void  setDrawingCacheEnabled(boolean flag),    Bitmap  get ...

  2. 备份当前的ubuntu系统生成iso

    使用respin,步骤如下: sudo add-apt-repository ppa:sergiomejia666/respin sudo apt-get update sudo apt-get in ...

  3. Java面向对象_对象一一对应关系和this关键字

    一.打个比方,一个人有一个身份证号,一个身份证号对应一个人.一个英雄对应一把武器,一把武器对应一个英雄.生活中很多对象都存在一一对应关系,那么一一对应关系在代码中是如何实现的呢?举个例子,英雄和武器一 ...

  4. Murano package

    Murano have 2 package types: HOT package with Heat template inside and MuranoPL package with MuranoP ...

  5. 机器学习框架ML.NET学习笔记【4】多元分类之手写数字识别

    一.问题与解决方案 通过多元分类算法进行手写数字识别,手写数字的图片分辨率为8*8的灰度图片.已经预先进行过处理,读取了各像素点的灰度值,并进行了标记. 其中第0列是序号(不参与运算).1-64列是像 ...

  6. 用命令行的方式将本地项目上传到git

    1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...

  7. subline 安装 package control 连接服务器失败，解决办法

    解决办法: 打开C:\Windows\system32\drivers\etc\hosts文件 增加 50.116.34.243 sublime.wbond.net50.116.34.243 pack ...

  8. 学习笔记：MDN的HTML

    一.        HTML介绍: HTML —— 用于定义一个网页的结构的基本技术. 元素(Element):开始标记,加结束标记,加内容,等于元素. 两种重要的元素类别,块级元素和内联元素: 块级 ...

  9. Python开发环境Wing IDE设置Python路径详解

    在使用Wing IDE的时候,Python源代码取决于PYTHONPATH(无论是外部或通过内部改变sys.path系统设置),用户需要将路径设置到Wing IDE中. 这个值可以从项目菜单和工具栏的 ...

  10. LAMP Stack 5.7.16 (Ubuntu 16.04.1)

    平台: Ubuntu 类型: 虚拟机镜像 软件包: apache2.4 mysql5.7 php7 phpmyadmin4.5 apache application server basic soft ...