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/*" ...
随机推荐
- 关于oracle的缓冲区机制与HDFS中的edit logs的某些关联性的思考
可能大家会问,oracle和HDFS属于不同场景的存储系统,它们之间为什么会有联系呢?确实,从技术本身来看,他们确实无关联,但利用“整体学习”的思想,跳出技术本身,可以发现Oracle的缓冲区和HDF ...
- 使用显式的Lock对象取代synchronized关键字进行同步
Java SE5的java.util.concurrent类库还包含有定义在java.util.concurrent.locks中的显式的互斥机制.Lock对象必须被显式地创建.锁定和释放.因此,它与 ...
- LVS+keepalived+nginx+tomcat部署实现
拓扑如下所示 # 节点分布情况 LVS-dr-master eth0: 192.168.146.141 LVS-dr-slave eth0: 192.168.146.142 nginx1: eth0: ...
- Curling 2.0(DFS简单题)
题目链接: https://vjudge.net/problem/POJ-3009 题目描述: On Planet MM-21, after their Olympic games this year ...
- iis 程序池设置及详解-20180720
[非原创,好文收藏,分享大家] 公司的一个网站程序长时间运行后,速度变慢,重新启动网站后速度明显变快,估计是网站程序占用的内存和CPU资源没能及时释放,才需要每隔一段时间重启网站释放资源.但手工重启总 ...
- 干货 unity小贴士
3.以Y轴为依据进行Sprite排序对于2D游戏,将Transparency Sort Mode (Edit > Project Settings > Graphics ) 设置为Cust ...
- C#调用百度地图API经验分享(四)
这一篇,记录一下我调用的地图API实现的功能.下面介绍的都是一些片段的节选,不能直接复制就运行.在实现之前肯定要加载地图,先放一个webbroser控件,然后如下: private void Form ...
- C# 数组深拷贝
数组深拷贝,即完全复制出一份新的数组,两个数组内容完全相同. 一般有四种方法: 1. 循环遍历复制 2. 数组的成员方法:CopyTo CopyTo方法用作将源数组全部拷贝到目标数组中,可以指定目标数 ...
- textarea赋值时换行符无效的解决方法
//替换字符串中的换行符为br var Content = JSON.stringify(txt); Content = Content.replace(/\\n/g, '<br />') ...
- 常用正则表达式:手机、电话、邮箱、身份证、IP地址、网址、日期等
转载源:http://blog.csdn.net/lun379292733/article/details/8169807 <script type="text/JavaScript& ...