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/*" ...
随机推荐
- node爬虫gbk中文乱码问题
刚入坑node 写第二个node爬虫时,遇到了这个坑,记录一下. 主要步骤: 1.安装iconv-lite 输入npm install iconv-lite 2.将接收到的网页源码以二进制的方式存储下 ...
- Ansible-安装-秘钥-部署-使用
本文转自:https://www.cnblogs.com/ylqh/p/5902259.html ansiblemaster:192.168.74.146 ansibleslave1 :192.168 ...
- 第一次项目上Linux服务器(五:CentOS7下Mysql数据库的安装与配置(转))
好像在CentOS 7系统中,默认安装的mysql是它的分支mariadb.所以不能像CentOS-6.3那样安装,如下: [root@izwz ~]# yum -y install mysql my ...
- ASP.NET Core (二):入门
上一篇:ASP.NET Core(一):简介 下一篇:(待续) 英文原版:Getting Started 1. 安装 .NET Core 2. 创建 .NET Core 项目 在命令提示符窗口输入命令 ...
- 记一次Java AES 加解密 对应C# AES加解密 的一波三折
最近在跟三方对接 对方采用AES加解密 作为一个资深neter Ctrl CV 是我最大的优点 所以我义正言辞的问他们要了demo java demo代码: public class EncryptD ...
- LINQ 图解 LINQ学习第三篇
LINQ,语言集成查询(Language INtegrated Query)是一组用于c#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相同的方式操作 ...
- RESTful API入门
RESTful是一种设计风格,并不是一种标准. 简短的去概括的话,就是:1.URL 定位资源 资源,就是数据.比如newsfeed,friends,order等 2.用 HTTP 动词描述操作. ...
- java多线程框架
JDK5中的一个亮点就是将Doug Lea的并发库引入到Java标准库中.Doug Lea确实是一个牛人,能教书,能出书,能编码,不过这在国外还是比较普遍的,而国内的教授们就相差太远了. 一般的服务器 ...
- windows 搭建 angular2 开发环境--白纸新手可以参考一下
初次接触angular,感觉接触一项新的东西真的是很艰难,自从听我朋友说起angular,就对这个东西产生了一些兴趣,就开始研究,经过艰辛的各种查资料各种头痛,终于是把这环境给搭上了·最起码是可以运行 ...
- js 实现 Base64 编码的相互转换
干脆点,直接贴代码 1. 代码 function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZab ...