完整代码展示

<!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. (转)linux下文件删除的原理精华讲解（考试题答案系列）

    linux下文件删除的原理精华讲解(考试题答案系列) 说明:本文为老男孩linux培训某节课前考试试题及答案分享博文内容的一部分,也是独立成题的,你可以点下面地址查看全部的内容信息.http://ol ...

  2. PHP实例：使用PHPExcel导入Excel2003文档和Excel2007文档到MySQL数据库中

    如果要使用phpExcelReader将Excel 数据导入到mysql 数据库,请读者点击这个文章查看. 使用phpExcelReader将Excel 数据导入到mysql 数据库. 下面我们介绍另 ...

  3. POI 博客总结.....

    主键类: HSSFRow row1= sheet.createRow(1); row.createCell(0).setCellValue("学生编号"); row.createC ...

  4. hibernate课程 初探单表映射3-1 hibernate单表操作简介

    本章简介: 1 单一主键 2 基本类型 3 对象类型 4 组件属性 5 单表操作CRUD实例

  5. vue-cli之脚手架

    一.创建VUE项目 npm install vue-cli -g vue init webpack myprject cd myproject npm run dev 补充: 组件:它是可扩展的htm ...

  6. Windows 10 取消桌面右键“图像属性”、“图像选项”

    Windows 10 取消桌面右键"图像属性"."图像选项" 桌面右键 说明:在windows 10中,桌面右键出现"图像属性"." ...

  7. Retrofit2与RxJava用法大全

    Retrofit2是square公司出品的一个网络请求库,网上有很多相关的介绍.我很久以前都想去研究了,但一直都有各种事情耽搁,现在就让我们一起去捋一捋,这篇主要讲解Retrofit2与RxJava的 ...

  8. SpringBoot JUnit4的断言和注解

    Junit4的断言常用方法: assertArrayEquals( new Object[]{ studentService.likeName("小明2").size() > ...

  9. c#中反射技术在Unity中的运用

    反射技术给类赋值的好处就是可以简化代码,封装的好处就显而易见了.最直接的用途就是用在在显示配置文件的时候,个人习惯性做法是做一个VO来存储需要的数据,其代码如下: internal class Bas ...

  10. cms-后台eazyui搭建

    1.引入eazyUi需要的js 2.布局:上.下.左.中 <%@ page language="java" contentType="text/html; char ...