完整代码展示

<!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. malloc内存申请--释放-收缩

     一.验证思路和代码 #include <stdio.h> #include <unistd.h> #include <malloc.h> #include < ...

  2. Java面向对象_对象数组

    今天学习了对象数组,写点东西总结一下.废话不多说,啥是对象数组呢? 对象数组的概念是这么讲的,对象数组就是数组里的每个元素都是类的对象,赋值时先定义对象,然后将对象直接赋给数组. 举个例子,使用对象数 ...

  3. (转)认识 Linux 文件系统

    7.1 认识 Linux 文件系统 原文:https://wizardforcel.gitbooks.io/vbird-linux-basic-4e/content/59.html Linux 最传统 ...

  4. js 提示样式 ？ 上写提示内容

    //再需要的地方放入 <img dms_map_key="zs_prise" src="${ctx }/static/image/tip.png" cla ...

  5. shell 文件测试 蛮全的

    文件状态测试 -b filename : 当filename 存在并且是块文件时返回真(返回0)-c filename : 当filename 存在并且是字符文件时返回真-d pathname : 当 ...

  6. 提高PHP编程效率的20个要点

    用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则 不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数”(译注:PHP手册中 ...

  7. 生产消费者模式与python+redis实例运用（中级篇）

    上一篇文章介绍了生产消费者模式与python+redis实例运用(基础篇),但是依旧遗留了一个问题,就是如果消费者消费的速度跟不上生产者,依旧会浪费我们大量的时间去等待,这时候我们就可以考虑使用多进程 ...

  8. java中的中文变量和方法

    在网上看到java居然支持中文变量名.方法.这里我只试了变量名和方法,类名这些没有试....真是给力 package com.gxf.fun; public class TestForChinese ...

  9. 为什么要使用Vuex?

    为什么要使用Vuex? 1. 假如不使用 1.1 父子组件依赖同一个state 1.2 兄弟组件依赖同一个state 2. 用了Vuex之后 3. 方便记忆和理解

  10. 在LINUX系统中MySQL数据库区分表名的大小写--解决办法

    因为linux下mysql默认是要区分表名大小写的.mysql是否区分大小写设置是由参数lower_case_table_names决定的, 其中:1)lower_case_table_names = ...