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/*" ...
随机推荐
- Linux 启动过程详解
目录 1. Linux启动过程 2. 启动过程概述 3. 引导加载阶段 4. 内核阶段 4.1 内核加载阶段 4.2 内核启动阶段 5. 早期的用户空间 6. 初始化过程 6.1 SysV init ...
- 在商城系统中使用设计模式----策略模式之在spring中使用策略模式
1.前言: 这是策略模式在spring中的使用,对策略模式不了解对同学可以移步在商城中简单对使用策略模式. 2.问题: 在策略模式中,我们创建表示各种策略的对象和一个行为,随着策略对象改变而改变的 c ...
- zk特性和场景
zk解决什么问题 分布式一致性问题 一致性一般定义是分布式系统中状态或数据保持同步和一致.实际上就是围绕着“看见”来的.谁能看见?能否看见?什么时候看见? 举个例子:淘宝后台卖家,在后台上架一件大促的 ...
- NIO的Buffer&Channel&Selector
java的NIO和AIO Buffer position.limit.capacity 初始化 Buffer 填充 Buffer 提取 Buffer 中的值 mark() & reset() ...
- 在Linux上进行内核参数调整
在Solaris上,使用工具mdb就可以直接修改内核内存里的内容.而在Linux上,则通常使用命令sysctl(8)做类似的事情. 本文以Fedora为例,介绍如何在Linux上进行内核参数调整. 常 ...
- 常见的加密解密算法-MD5
一.MD5加密概述 Message Digest Algorithm MD5(中文名为消息摘要算法第五版)为计算机安全领域广泛使用的一种散列函数,用以提供消息的完整性保护.该算法的文件号为RFC 13 ...
- Eclipse MAT:浅堆 vs 保留堆
来自:唐尤华 https://dzone.com/articles/eclipse-mat-shallow-heap-retained-heap 有没有想要搞清楚浅堆(Shallow Heap)和保留 ...
- spring中@Scope控制作用域
注解形势:通过@Scope注解控制作用域,默认使用单实例模式,可修改为多实例模式 /** * Specifies the name of the scope to use for the annota ...
- Contemplation! Algebra(矩阵快速幂,uva10655)
Problem EContemplation! AlgebraInput: Standard Input Output: Standard Output Time Limit: 1 Second Gi ...
- 多线程系列(2)线程池ThreadPool
上一篇文章我们总结了多线程最基础的知识点Thread,我们知道了如何开启一个新的异步线程去做一些事情.可是当我们要开启很多线程的时候,如果仍然使用Thread我们需要去管理每一个线程的启动,挂起和终止 ...