<input type="button" value="OpenVideo" id="btnOpenVideo" />
<input type="button" value="TakePicture" id="btnTakePicture" />
<input type="button" value="CloseVideo" id="btnCloseVideo" />
<br />
<video style="width:500px;height:500px;border:1px solid #000000;" id="videoTest"></video>
<canvas style="width:500px;height:500px;border:1px solid #000000;" id="canvasTest"></canvas>
<script type="text/javascript">
  window.onload = function () {
    let btnOpenVideo = document.getElementById('btnOpenVideo');
    let btnTakePicture = document.getElementById('btnTakePicture');
    let btnCloseVideo = document.getElementById('btnCloseVideo');
    let video = document.getElementById('videoTest');
    let canvas = document.getElementById('canvasTest').getContext('2d');
    btnOpenVideo.onclick = function () {
      window.navigator.getUserMedia({
        video: true/*视频/摄像头*/
        /*audio:true*//*音频/麦克风*/
      }, function (param) {
        video.src = window.URL.createObjectURL(param);/*设置video控件路径,实时显示摄像头的图像*/
        btnCloseVideo.onclick = function () {/*关闭摄像头*/
          if (param.getTracks())/*Chrome*/
            param.getTracks()[0].stop();
          else
            param.stop();
        };
        btnTakePicture.onclick = function () {/*拍照*/
          canvas.drawImage(document.getElementById('videoTest'), 0, 0, 500, 500);/*将拍摄的照片画到canvas中*/
        };
      }, function (err) {
        alert(err);
      });
    };
  };
</script>

h5页面调用摄像头(简易版)的更多相关文章

  1. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  2. Webview之H5页面调用android的图库及文件管理

    h5页面打开图片管理器 一般页面在pc打开文件管理器是用 type="file"的代码,可是这在android的webview是无效的,必须为webview设定WebChromeC ...

  3. 混合app开发,h5页面调用ios原生APP的接口

    混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...

  4. 前端如何在h5页面调用微信支付?

    在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端在H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用 ...

  5. 微信h5页面调用第三方位置导航

    微信h5页面拉起第三方导航应用 需要准备的: 通过微信认证的公众号有备案过的域名 背景:微信公众号点击菜单栏跳到h5页面,需要用到导航功能 需求:当用户点击导航按钮时,跳转到第三方app进行导航 参考 ...

  6. H5页面调用手机打电话功能

    <head>里面加上: <meta name="format-detection" content="telephone=yes"/> ...

  7. h5图片上传简易版(FileReader+FormData+ajax)

    一.选择图片(input的file类型) <input type="file" id="inputImg"> 1. input的file类型会渲染为 ...

  8. H5页面调用admob激励视频,用户获取奖励

    应用前提条件 使用 Android Studio 3.2 或更高版本 确保您应用的 build 文件使用以下值: minSdkVersion 为 16 或更高版本 compileSdkVersion  ...

  9. h5页面调用相机功能

    //accept:表示要打开的文件类型 capture:表示可以捕获到系统默认的设备 <input type="file" accept="image/*" ...

随机推荐

  1. 音频播放封装(pcm格式,Windows平台 c++)

    介绍 pcm格式是音频非压缩格式.如果要对音频文件播放,需要先转换为pcm格式. windows提供了多套函数用于播放,本文介绍Waveform Audio Functions系列函数. 原始的播放函 ...

  2. Git和Gitlab协同工作

    1.概述 在写这篇博客之前,为了更好的描述整个流程,本人亲自尝试了:从搭建到使用,下面就围绕这个流程来阐述整个过程,目录结构如下所示: Git的安装搭建 Git的常规操作 Gitlab的搭建 Gitl ...

  3. MQ5.3在redhat9上的安装

    一.准备工作 1.安装linux软件包 确保系统中有libgcc_s.so和libstdc++.so.3. 如无意外,libgcc_s.so在redhat中已经存在,存放路径为:/usr/lib/gc ...

  4. 第一次项目上Linux服务器(八:——搭建Nginx图片服务器)

    一.准备工作 安装Nginx,参考历史博客 二.搭建Nginx图片服务器 1.效果 例如:图片通过xftp服务上传到/home/java/upload目录下,我想通过访问Nginx服务器来访问xftp ...

  5. mysql LAST_INSERT_ID详解

    http://blog.sina.com.cn/s/blog_5b5460eb0100nwvo.html LAST_INSERT_ID() LAST_INSERT_ID(expr) 自动返回最后一个I ...

  6. es6学习笔记8--Map数据结构

    Map Map结构的目的和基本用法 JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是只能用字符串当作键.这给它的使用带来了很大的限制. var data = {} ...

  7. js实现四叉树算法

    最近在看canvas动画方面教程,里面提到了采用四叉树检测碰撞.之前也看到过四叉树这个名词,但是一直不是很懂.于是就又找了一些四叉树方面的资料看了看,做个笔记,就算日后忘了,也可以回来看看. Quad ...

  8. [转]magento2项目上线注意事项 切换到产品模式

    本文转自:https://segmentfault.com/a/1190000007929783 切换到产品模式 php magento deploy:mode:set production 执行以上 ...

  9. ASP.NET MVC加载用户控件后并获取其内控件值或赋值

    有网友看了这篇<ASP.NET MVC加载ASCX之后,并为之赋值>http://www.cnblogs.com/insus/p/3643254.html 之后,问及Insus.NET,不 ...

  10. JAVA动态代理基础

    Java动态代理机制详解(JDK 和CGLIB,Javassist,ASM) 彻底理解JAVA动态代理 class文件简介及加载 Java编译器编译好Java文件之后,产生.class 文件在磁盘中. ...