使用html5绘图技术事项调用摄像头拍照;
在mui框架中调用手机摄像头进行拍照可以直接使用原声的HTML5;
以下是HTML代码
<video id="video" width="640" height="480" autoplay></video> <!--这一行是调用摄像头之后呈现的画面-->
<button id="snap">Snap Photo</button> <!--拍照按钮-->
<canvas id="canvas" width="640" height="480"></canvas><!--这一行是拍照之后呈现在网页上的画面-->
以下是JavaScript代码
var aVideo=document.getElementById('video');
var aCanvas=document.getElementById('canvas');
var ctx=aCanvas.getContext('2d'); navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;//获取媒体对象(这里指摄像头)
navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限;参数二成功打开后调用,并传一个视频流对象,参数三打开失败后调用,传错误信息 function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function () {
alert('摄像头成功打开!');
};
}
function noStream(err) {
alert(err);
} //按钮模拟拍照,就是通过绘图将捕捉到的画面呈现在画布上 document.getElementById("snap").addEventListener("click", function() { ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上
});
使用html5绘图技术事项调用摄像头拍照;的更多相关文章
- android: 调用摄像头拍照
很多应用程序都可能会使用到调用摄像头拍照的功能,比如说程序里需要上传一张图片 作为用户的头像,这时打开摄像头拍张照是最简单快捷的.下面就让我们通过一个例子来学 习一下,如何才能在应用程序里调用手机的摄 ...
- AForge调用摄像头拍照时设置分辨率
简单记录下AForge2.2.5.0版本调用摄像头拍照时设置分辨率的方法. FilterInfo info = _videoDevices[0];//获取第一个摄像头 _cameraDevice = ...
- C# - VS2019调用AForge库实现调用摄像头拍照功能
前言 作为一名资深Delphi7程序员,想要实现摄像头扫描一维码/二维码功能,发现所有免费的第三方库都没有简便的实现办法,通用的OpenCV或者ZXing库基本上只支持XE以上的版本,而且一维码的识别 ...
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...
- html5中调用摄像头拍照
方法: getCamera: 获取摄像头管理对象 对象: Camera: 摄像头对象 CameraOption: JSON对象.调用摄像头的參数 PopPosition: JSON对象,弹出拍照或摄像 ...
- Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)
使用Cordova可以很方便的通过js代码来使用设备摄像头拍照,只需把camera插件添加进来即可. 一,添加camera插件 首先我们要在“终端”中进入工程所在的目录,然后运行如下命令: 1 cor ...
- 【MediaKit】WPF项目中 调用摄像头拍照的开发包
今天遇到一个 人事的项目,项目中需要调用摄像头给员工照相.如何解决这个问题呢? 介绍一个开发包给你,MediaKit.论坛里头的人都说好,但是黑兔觉得大家好才是真的好.你不妨试试~ 第一步:添加WPF ...
- 使用js调用摄像头拍照
在一些浏览器里已经可以使用web api调用摄像头功能了. 基于此可以经行拍照摄像功能,网上找了些资料,然后实现了简单的拍照功能 演示地址 bingxl.cn/webrtc.html 代码 <! ...
- android ——调用摄像头拍照和相册
先在布局文件中加入两个按钮和一个图片控件 <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...
随机推荐
- linux文本编辑工具
文本编辑工具VIM vim 主要有三种工作模式,分别是命令模式.插入模式和编辑模式,输入 vim 文件名 我们可以进入命令模式,输入字符 i或者a或者o我们可以进入插入模式,进入插入模式之后我们可以进 ...
- Unknown column ‘avatar_url‘ in ‘field list‘
报错: Unknown column 'avatar_url' in 'field list' 解决: 查看mysql数据库中字段名前面是否有空格或则换行
- web自动化之selenium(二)
selenium自动化测试框架 一.什么是自动化测试 利用软件(或者说机器代替人)实现全部或者部分测试任务的过程 二.为什么要进行自动化测试 自动化测试可以完成许多手工测试无法实现或难以实现的功能 ...
- vue-cli实现异步请求返回mock模拟数据
在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...
- 移动APP开发框架盘点2:Web移动前端框架大全
前言 自上次发布了<移动APP开发框架盘点>后,时间已经过去了三年, 为什么突然又写一篇续集呢?是因为有一个非常有意思的发现. 开源项目其实有一个成熟周期,这个周期大概是三年左右,自Rea ...
- Python3输出九九乘法表
for i in range(1,10): for j in range(1,i+1): print('{}x{}={}\t'.format(i, j, i*j), end='') #format格式 ...
- 14图像边缘检测的sobel_ctrl控制模块
一设计功能 计算得到的dxy,再通过和阈值比较大小,输出po_sum作为VGA的输入,在显示器器上显示图像的轮廓. 二设计思路 根据前一篇博客对sobel算法的介绍,先通过FIFO的双流水线操作采集到 ...
- JavaScript day04 函数
函数 函数讲解 函数是什么? 函数其实就抽取写好的js代码 作为一个通用的代码块 (封装) 作用: 减少代码冗余 (过多) 方便调用 (提供效率 提高代码的可读性) 便于维护 (二次修改) js有哪些 ...
- String -- char[]互转
1.String --> char[] String str = "abc"; char[] chs = str.toCharArray(); 2.char[] --> ...
- SpringBoot 日志
springboot日志简介 SpringBoot使用的日志是sl4j + logback,sl4j是抽象层,不做具体的实现.实现主要是logback来做.SpringBoot同时也整合了其他框架的日 ...