h5页面调用摄像头(简易版)
- <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页面调用摄像头(简易版)的更多相关文章
- 在Angular.js中的H5页面调用Web api时跨域问题处理
/// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...
- Webview之H5页面调用android的图库及文件管理
h5页面打开图片管理器 一般页面在pc打开文件管理器是用 type="file"的代码,可是这在android的webview是无效的,必须为webview设定WebChromeC ...
- 混合app开发,h5页面调用ios原生APP的接口
混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...
- 前端如何在h5页面调用微信支付?
在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端在H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用 ...
- 微信h5页面调用第三方位置导航
微信h5页面拉起第三方导航应用 需要准备的: 通过微信认证的公众号有备案过的域名 背景:微信公众号点击菜单栏跳到h5页面,需要用到导航功能 需求:当用户点击导航按钮时,跳转到第三方app进行导航 参考 ...
- H5页面调用手机打电话功能
<head>里面加上: <meta name="format-detection" content="telephone=yes"/> ...
- h5图片上传简易版(FileReader+FormData+ajax)
一.选择图片(input的file类型) <input type="file" id="inputImg"> 1. input的file类型会渲染为 ...
- H5页面调用admob激励视频,用户获取奖励
应用前提条件 使用 Android Studio 3.2 或更高版本 确保您应用的 build 文件使用以下值: minSdkVersion 为 16 或更高版本 compileSdkVersion ...
- h5页面调用相机功能
//accept:表示要打开的文件类型 capture:表示可以捕获到系统默认的设备 <input type="file" accept="image/*" ...
随机推荐
- Vue + Element UI 实现权限管理系统 前端篇(三):工具模块封装
封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多的代码冗余,让代码变得越来越难维护.所以我们在这里先对 axi ...
- filebeat-2-通过kafka队列链接logstash
filebeat 直接到logstash, 由于logstash的设计问题, 可能会出现阻塞问题, 因为中间使用消息队列分开 可以使用redis, 或者kafka, 这儿使用的是kafka 1, 安装 ...
- 玩转mongodb(七):索引,速度的引领(全文索引、地理空间索引)
本篇博文主要介绍MongoDB中一些常用的特殊索引类型,主要包括: 用于简单字符串搜索的全文本索引: 用于球体空间(2dsphere)和二维平面(2d)的地理空间索引. 一.全文索引 MongoDB有 ...
- <Think Python>中斐波那契使用memo实现的章节
If you played with the fibonacci function from Section 6.7, you might have noticed thatthe bigger th ...
- xml Schema include
first.xsd <?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs=&q ...
- 15天学习MVC后的小结(分享经历与想法)
学习MVC已经有半个月,看了看日历,刚好半个月.分享了好几篇练习的博文:一,<创建第一个MVC应用程序> http://www.cnblogs.com/insus/p/3358560.ht ...
- DataGridview启用列重新排序属性的作用
DataGridview是winform中经常用的控件,今天来了解一下启用列重新排序属性的作用 默认没有选中是不能改变列前后顺序的 启用列重新排序后如下图可以拖动列标题(列标头)来改变列前后顺序
- Android-消息处理学习总结(Handler,Looper)
参考资料: http://www.cnblogs.com/qlky/p/5657924.html http://blog.csdn.net/guolin_blog/article/details/99 ...
- Angular echarts图表自适应屏幕指令
关于echarts图表自适应问题 一.引入js文件 1. 在html页面引入angular.min.js文件 2. 在html页面引入echarts.min.js文件 3. 在html页面引入app. ...
- 根据python上下文管理,写一个在读文件内容前后自动打开关闭文件的程序
利用上下文管理实现读f文件前后自动打开关闭文件#在本目录创建f文件,内容写monkey代码如下 import contextlib #导入模块1 @contextlib.contextmanager# ...