<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. Vue笔记:使用 mock.js 模拟数据

    在我们的项目实际开发过程中,后端的接口往往是较晚才会提供出来,并且还要写接口文档,如果前端的开发都要等到接口开发完成才开始就非常影响项目整体开发进度了,mock.js 的出现使前后端分离并行开发成为可 ...

  2. Spring Security和JWT实现登录授权认证

     目标 1.Token鉴权 2.Restful API 3.Spring Security+JWT 开始 自行新建Spring Boot工程 引入相关依赖 <dependency> < ...

  3. 23-hadoop-hive的DDL和DML操作

    跟mysql类似, hive也有 DDL, 和 DML操作 数据类型: https://cwiki.apache.org/confluence/display/Hive/LanguageManual+ ...

  4. java监听器、定时器的使用

    1.监听器 在web.xml配置 <!-- 时间任务 --> <listener> <listener-class> com.hk.common.timer.Tim ...

  5. wamp配置虚拟路径(路径别名)

    wamp默认的路径是安装目录下的 www 目录, 如果你想运行php代码,就需要将代码放在 www 目录下, 但这样很不方便,能否通过配置的方式,来实现 在别的目录下的 php 代码,也能正常运行和访 ...

  6. GoogLeNetv2 论文研读笔记

    Batch Normalization: Accelerating Deep Network Training by Reducing Internal Covariate Shift 原文链接 摘要 ...

  7. APIO 2018 游记

    上接CTSC 2018 游记 day1 早上大概八九点起来洗了个澡跑到隔壁寝发现 tj 还在??? 原来昨天晚上听错名字了... 下午一起去 wfj 王府井玩,陪李总逛逛奢侈品店... 走了两三个小时 ...

  8. zuul超时及重试配置

    配置实例 ##timeout config hystrix: command: default: execution: timeout: enabled: true isolation: thread ...

  9. 自定义MVC的Helper扩展方法

    记得在开发ASP.NET时候,也经常性使用C#可以写自己义的扩展方法,如:http://www.cnblogs.com/insus/p/3154363.html 或http://www.cnblogs ...

  10. ASP.NET MVC 的常用的HTML辅助方法笔记

    Html.BeginForm() 输出<form>标签Html.EndForm() 输出</form>标签Html.Label() 输出<label>标签Html. ...