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/*" ...
随机推荐
- JavaScript -- FileSystemObject-文件夹
-----057-FileSystemObject-文件夹.html----- <!DOCTYPE html> <html> <head> <meta htt ...
- 堆与堆排序/Heap&Heap sort
最近在自学算法导论,看到堆排序这一章,来做一下笔记.堆排序是一种时间复杂度为O(lgn)的原址排序算法.它使用了一种叫做堆的数据结构.堆排序具有空间原址性,即指任何时候都需要常数个额外的元素空间存储临 ...
- 进程间通信 IPC(Inter-Process Communication)
目录 一.管道 二.FIFO 三.消息队列 四.信号量 五.共享存储 六.网络IPC:套接字 一.管道 管道是进程间通信中最古老的方式,所有UNIX都提供此种通信机制.管道有以下两种局限性: 历史 ...
- 【LeetCode题解】61_旋转链表(Rotate-List)
目录 描述 解法:双指针 思路 Java 实现 Python 实现 复杂度分析 描述 给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1-> ...
- 设置tabBar、使用第三方插件和自定义组件使用简单实例
创建小程序项目进入时填写,因需要用上第三方插件,所以要填上开发者的APPID,前往微信公众平台去注册一个账号获取APPID,在设置=>开发设置可以查看相关appid信息 简单思路 底部导航添加三 ...
- C#网络爬虫--多线程处理强化版
上次做了一个帮公司妹子做了爬虫,不是很精致,这次公司项目里要用到,于是有做了一番修改,功能添加了网址图片采集,下载,线程处理界面网址图片下载等. 说说思路:首相获取初始网址的所有内容 在初始网址采集图 ...
- java数组创建
java数组创建:int[] number = new int[10]; int[]:表明这是一个数组 new int[10]:给前面的数组类型的number变量分配10个int类型的空间大小
- 漫画 | Redis常见面试问题(二)
上期,小知和阿音在进行面试问答,可是呢,还没问完小知就表示累了想休息一会,然后就休息去了,但是,以为这样就完了吗? 当然不是,还得继续啊,嘿嘿嘿 注:对于第一种,需要应用程序自己处理资源的同步,可以使 ...
- SpringBoot -- 事件(Application Event)
Spring的事件为Bean与Bean之间的消息通信提供了支持,当一个Bean处理完一个任务之后,希望另外一个Bean知道并能做相应的处理,这时我们就需要让一个Bean监听当前Bean所发送的事件. ...
- python基础训练题2-元组,字典
1,判断值在元组中 >>> a = ( 1, 2, 3, 4, 10 ) >>> 10 in a True >>> ' in a False 2, ...