<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. 【原创】基于Bootstrap的Modal二次封装

    前言 Bootstrap:Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架 官方网站: ...

  2. [原创]EF架构随心所欲打造属于你自己的DbModel

    前言 我们都知道EF可以生成Dbmodel,系统生成的Model有时候并不是我们想要的,如何我们要生成自己的Model,那么久需要我们手动的去修改T4模版,T4是对“Text Template Tra ...

  3. 遍历 JSON JavaScript 对象树中的所有节点

    我想要遍历 JSON 对象树中,但为何找不到任何一间图书馆.这似乎是不难,但感觉就像重新发明轮子. 在 XML 中有很多教程演示如何遍历 XML DOM 树:( 解决方法 1: 如果你认为 jQuer ...

  4. mysql-unsha1:在未知密码情况下,登录任意MYSQL数据库

    摘要 这个POC用于在不知道明文密码的情况下对启用了密码安全认证插件(默认开启插件:mysql_native_password)的MYSQL数据库进行登录. 前提条件为: 1.为了获取到已知用户的ha ...

  5. springMVC实现 MultipartFile 多文件上传

    1.Maven引入所需的 jar 包(或自行下载) <dependency> <groupId>commons-io</groupId> <artifactI ...

  6. PowerBuilder编程新思维3:适配(三层架构与GraphQL)

    PowerBuilder编程新思维3:适配(三层架构与GraphQL) PB在富客户端时代,是一线开发工具.随着网络发展,主流架构演进到三层架构的时代,PB拿不出有力的三层架构,已经明显力不从心,市场 ...

  7. [转]解决ssh登录后闲置时间过长而断开连接

    本文转自: 转载自博客园wanghetao的博客 我们通过终端连接服务器时,当鼠标和键盘长时间不操作,服务器就会自动断开连接,我们还的需要重新连接,感觉很麻烦,总结一下解决此问题的方法 方法一 修改/ ...

  8. 当DataTable的列名遇上特殊字符"["和"]"时

    刚才有看到一个问题http://bbs.csdn.net/topics/390781072.是在DataTable获取某列最小值,但是在动态生生DataTable时,列名有遇上特特殊字符"[ ...

  9. MVC应用程序请求密码的功能(一)

    经过一系列的练习,实现了会员注册<MVC会员注册>http://www.cnblogs.com/insus/p/3439599.html,登录<MVC应用程序实现会员登录功能> ...

  10. 调用百度api输出地址和城市查询出具体坐标系

    在工作中遇到标题的内容,不知道如何写,后来我的领导写了一套代码,感觉很是厉害,特在此收藏,留作纪念 public static string GetResponse(string address, s ...