完整代码展示

<!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. 010 Regular Expression Matching 正则表达式匹配

    Implement regular expression matching with support for '.' and '*'.'.' Matches any single character. ...

  2. 约瑟夫问题（vector的使用)

    题目大意:有n个人围坐在圆桌周围,每个人都有一个固定的编号. 从第s(<=n)个人开始报数(按照顺时针方向,从1开始),报到m的人出列,接着再从出列着的 下一个人开始报数(依然从1开始),报到m ...

  3. Java文件与io——字节数组流数据流字符串流

    字节数组流 ByteArrayInputStream:包含一个内部缓冲区,该缓冲区包含从流中读取的字节.内部计数器跟踪read方法要提供的下一个字节.关闭ByteArrayInputStream无效. ...

  4. 最简实例演示asp.net5中用户认证和授权(3)

    上接: 最简实例演示asp.net5中用户认证和授权(2) 在实现了角色的各种管理接口后,下一步就是实现对用户的管理,对用户管理的接口相对多一些,必须要实现的有如下三个: 1 public inter ...

  5. iOS 本地缓存实现 方案借鉴

    在手机应用程序开发中,为了减少与服务端的交互次数,加快用户的响应速度,一般都会在iOS设备中加一个缓存的机制,前面一篇文章介绍了iOS设备的内存缓存,这篇文章将设计一个本地缓存的机制. 功能需求 这个 ...

  6. fn先生开篇博客

    开篇博客,也不清楚要写点啥nie,以前好像在CSDN上写过一点,但是由于本人工作号一直在变,忘了CSDN上的账号密码(尴尬...不确定这个以后会不会再次丢失呀),重新在开始吧. 记得以前,一直有朋友说 ...

  7. 常见的生成全局唯一id有哪些？他们各有什么优缺点？

    分布式系统中全局唯一id是我们经常用到的,生成全局id方法由很多,我们选择的时候也比较纠结.每种方式都有各自的使用场景,如果我们熟悉各种方式及优缺点,使用的时候才会更方便.下面我们就一起来看一下常见的 ...

  8. JAVA4大线程池

    不知不觉中我们电脑的硬件设施越来越好,从双核四线程普及到如今四核八线比比皆是.互联网发展至今,讲究的就是快,less is more,而且大数据的诞生和各种种类繁多的需求处理,单线程的程序逐渐不能满足 ...

  9. 解决WinSCP连接虚拟机

    其实虚拟机你也可以将它形象化,认为它就是一台电脑,只是这个电脑在你的内存中,所以,一般电脑所具有的的功能虚拟机一样拥有,它也可以当成一台独立的个体哦. 针对很多使用WinSCP连接不上虚拟机的问题,这 ...

  10. Java图形界面开发—列出指定目录

    代码如下: package com.packageTemp; import javax.swing.*; import java.awt.*; import java.awt.event.*; imp ...