使用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命令大全(查看日志)
1.查看日志常用命令 tail: -n 是显示行号:相当于nl命令:例子如下: tail -100f test.log 实时监控100行日 ...
- Linux-centos7安装mysql步骤
原文地址:https://blog.csdn.net/qq_42467339/article/details/89471395 Centos7.3 yum安装MySQL5.7.25 扩展:在CentO ...
- 获取ajax动态加载的多个a标签中的 点击的那个a标签对应的值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Centos7 使用Docker安装rocket.chat聊天工具
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 下载安装 Rocket.Chat 目前最新的版本为 4.0.1,可以通过手动或者容器的方式安装.这里我推荐使用容器,部署过程会方便不少. 如果要用容 ...
- 4.监控Redis--单节点
prometheus监控redis需要用到redis_exporter. redis_exporter 项目地址:https://github.com/oliver006/redis_exporter ...
- 内置方法 __str__ __repr__
内置方法(双下方法,魔术方法) 在不需要程序员定义,本身就存在的类中的方法就是内置方法 内置方法: __名字__ __init__ 不需要我们主动调用,而是在实例化的时候内部自动调用的,存在一种 ...
- Mybatis入门实例解析
写在前面:本文全程根据Mybatis官网进行入门讲解.毫无疑问,官方文档是学习这门技术最权威的资料,与此同时我们也知道官方文档对待入门小白基本上不太友好,没有入门demo.开篇就是小白们不懂的内容.有 ...
- idea执行maven命令的三种方式
前言: java开发的IDE工具idea默认会提供maven生命周期的图形化执行,但是如果我们需要定制化的执行命令的时候,就需要使用手动执行maven命令的方式,今天就和大家讲一下idea手动执行ma ...
- 什么是unzip 命令?
· 解压 *.zip 文件:unzip test.zip . · 查看 *.zip 文件的内容:unzip -l jasper.zip .
- C# 操作ie网页,注入JavaScript等操作
之前做过一个录制鼠标键盘并回放的功能,使用的关键技术是钩子程序.在实现针对指定页面进行录制的过程中,发现C#操作网页的功能. https://www.cnblogs.com/wangchuang/ar ...