1. <input type="button" value="OpenVideo" id="btnOpenVideo" />
  2. <input type="button" value="TakePicture" id="btnTakePicture" />
  3. <input type="button" value="CloseVideo" id="btnCloseVideo" />
  4. <br />
  5. <video style="width:500px;height:500px;border:1px solid #000000;" id="videoTest"></video>
  6. <canvas style="width:500px;height:500px;border:1px solid #000000;" id="canvasTest"></canvas>
  7. <script type="text/javascript">
  8.   window.onload = function () {
  9.     let btnOpenVideo = document.getElementById('btnOpenVideo');
  10.     let btnTakePicture = document.getElementById('btnTakePicture');
  11.     let btnCloseVideo = document.getElementById('btnCloseVideo');
  12.     let video = document.getElementById('videoTest');
  13.     let canvas = document.getElementById('canvasTest').getContext('2d');
  14.     btnOpenVideo.onclick = function () {
  15.       window.navigator.getUserMedia({
  16.         video: true/*视频/摄像头*/
            /*audio:true*//*音频/麦克风*/
  17.       }, function (param) {
  18.         video.src = window.URL.createObjectURL(param);/*设置video控件路径,实时显示摄像头的图像*/
  19.         btnCloseVideo.onclick = function () {/*关闭摄像头*/
  20.           if (param.getTracks())/*Chrome*/
  21.             param.getTracks()[0].stop();
  22.           else
  23.             param.stop();
  24.         };
  25.         btnTakePicture.onclick = function () {/*拍照*/
  26.           canvas.drawImage(document.getElementById('videoTest'), 0, 0, 500, 500);/*将拍摄的照片画到canvas中*/
  27.         };
  28.       }, function (err) {
  29.         alert(err);
  30.       });
  31.     };
  32.   };
  33. </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 + Element UI 实现权限管理系统 前端篇(三):工具模块封装

    封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多的代码冗余,让代码变得越来越难维护.所以我们在这里先对 axi ...

  2. filebeat-2-通过kafka队列链接logstash

    filebeat 直接到logstash, 由于logstash的设计问题, 可能会出现阻塞问题, 因为中间使用消息队列分开 可以使用redis, 或者kafka, 这儿使用的是kafka 1, 安装 ...

  3. 玩转mongodb(七):索引,速度的引领(全文索引、地理空间索引)

    本篇博文主要介绍MongoDB中一些常用的特殊索引类型,主要包括: 用于简单字符串搜索的全文本索引: 用于球体空间(2dsphere)和二维平面(2d)的地理空间索引. 一.全文索引 MongoDB有 ...

  4. <Think Python>中斐波那契使用memo实现的章节

    If you played with the fibonacci function from Section 6.7, you might have noticed thatthe bigger th ...

  5. xml Schema include

    first.xsd <?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs=&q ...

  6. 15天学习MVC后的小结(分享经历与想法)

    学习MVC已经有半个月,看了看日历,刚好半个月.分享了好几篇练习的博文:一,<创建第一个MVC应用程序> http://www.cnblogs.com/insus/p/3358560.ht ...

  7. DataGridview启用列重新排序属性的作用

    DataGridview是winform中经常用的控件,今天来了解一下启用列重新排序属性的作用 默认没有选中是不能改变列前后顺序的 启用列重新排序后如下图可以拖动列标题(列标头)来改变列前后顺序

  8. Android-消息处理学习总结(Handler,Looper)

    参考资料: http://www.cnblogs.com/qlky/p/5657924.html http://blog.csdn.net/guolin_blog/article/details/99 ...

  9. Angular echarts图表自适应屏幕指令

    关于echarts图表自适应问题 一.引入js文件 1. 在html页面引入angular.min.js文件 2. 在html页面引入echarts.min.js文件 3. 在html页面引入app. ...

  10. 根据python上下文管理,写一个在读文件内容前后自动打开关闭文件的程序

    利用上下文管理实现读f文件前后自动打开关闭文件#在本目录创建f文件,内容写monkey代码如下 import contextlib #导入模块1 @contextlib.contextmanager# ...