java如何调用手机拍照功能_手把手教你如何实现拍照功能
实现手机拍照功能,纯JS书写
First:
先上图为主,再做详细讲解:
需要注意的是这里的摄像头是主要是通过浏览器中的一个叫做Navigator属性在JS代码运行时打开页面自动开启
不明白?直接上代码!
// HTML 5 的getUserMedia API提供了访问媒体的能力, 基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等设备.如navigator.mediaDevices.getUserMedia
//不同浏览器的api:
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error)
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
if (navigator.mediaDevices || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) {
getUserMedia({
video: true,
audio: true,
}, (stream) => {
console.log(stream)
}, (err) => {
console.log(err)
})
}
以上就是代码的具体呈现,大部分已加入功能注释,很容易理解,如果还不理解只能去先了解下navigator属性了
1.代码的前半段getUserMedia函数中的操作是为了实现兼容,很好理解因为必须保证自己的代码可以在很多浏览器是无差别运行
2.代码的第二部分IF语句中则是为了调用getUserMedia函数并且参数是一个对象加两个函数的方式,其中对象的话就是媒体标签 video和audio 两个为TRUE说明都要开启 紧接着就是两个函数一个是成功的回调其中实参为stream可以有些同学对这个参数不怎么理解不怕 一会截图送上, 还有就是失败的回调,在此不做过多讲解。
以下是关于Stream的信息具体如图中所示:
相信很多小伙伴已经看见了 我console.log打印出后湿一个叫做MediaStream的对象
接下来,进入第二步
Second:
创建两个标签当然是我们的video 和 button按钮咯具体代码如下显示:
拍照
光有标签肯定是不行的接下来是具体的JS代码的实现:
function success(stream) {
console.log(stream)
let $video = document.querySelector("#video")
let url = window.URL.createObjectURL(stream)
console.log(url)
$video.src = url
// $video.srcObject = stream
}
document.querySelector("#btn").onclick = function() {
let el = document.createElement("canvas")
el.width = 500;
el.height = 300
el.style.display = "none"
document.querySelector("body").appendChild(el)
let canvas = el.getContext("2d")
canvas.drawImage(document.querySelector("#video"), 0, 0, 500, 300)
var url = el.toDataURL('image/jpeg');
var img = document.createElement("img")
img.src = url
document.querySelector("body").appendChild(img)
document.body.removeChild(el)
}
小伙伴们肯定很纳闷这个success函数是怎么来的其实是:
很明显我把之前的箭头函数换个了一个成功的回调函数主要是处理video的src问题诞生的
在做最后总结之前,先把整体代码奉上:
Third
拍照
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error)
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
if (navigator.mediaDevices || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) {
getUserMedia({
video: true,
audio: true
}, success, (err) => {
console.log(err)
})
}
function success(stream) {
console.log(stream)
let $video = document.querySelector("#video")
let url = window.URL.createObjectURL(stream)
console.log(url)
$video.src = url
// $video.srcObject = stream
}
document.querySelector("#btn").onclick = function() {
let el = document.createElement("canvas")
el.width = 500;
el.height = 300
el.style.display = "none"
document.querySelector("body").appendChild(el)
let canvas = el.getContext("2d")
canvas.drawImage(document.querySelector("#video"), 0, 0, 500, 300)
var url = el.toDataURL('image/jpeg');
var img = document.createElement("img")
img.src = url
document.querySelector("body").appendChild(img)
document.body.removeChild(el)
}
console.log(window.navigator.userAgent)
如上所示就是整体代码,不长但实现了我们最基础的拍照功能,其实是对navigator和stream的运用
结尾:
之前并不是很理解navigator标签的运用,但是经过自己的这次经历相信有了一定的了解至于Navigator的更多应用我会在笔记中再详细的去整理,希望各位看客们能够满意
java如何调用手机拍照功能_手把手教你如何实现拍照功能相关推荐
- 小米手机扩容教程_手把手教你把手机16G内存升级128G 【图文教程】
教你们如何把iPhone手机16G升级128G 有好多果粉都在抱怨自己买的16GB内存不够用,玩游戏各种内存不足,拍相片各种不足,所以今天小编直接推送升级128GB详细教程,在此技术分享给有需要的人. ...
- python热搜排行功能_手把手教你用Python+Pyecharts让微博热搜榜动起来
今天教大家如何用pyecharts制作微博热搜榜动态展示视频,先上视频看看效果: 教程主要有2部分: 一是python爬取微博热搜内容 二是用pyecharts制作动态视频 下面给大家详细介绍一下 一 ...
- java就业班怎么改简历_手把手教你如何修改简历
许多同学在写保研简历的时候,都是把之前实习的简历COPY过来,或者把申请奖学金的简历COPY过来,然后打包直接和其他材料一起寄给目标院校.但是,保研简历是面试老师了解你的第一手资料,是决定你能被录取与 ...
- 软件_手把手教vscode配置c++,python开发环境
原创:软件_手把手教vscode配置c++,python开发环境 之前主用Python作为项目开发语言,将项目迁移到arm边缘盒子上后发现arm的cpu不给力,软件速度低于预期,所以计划将部分程序改为 ...
- java老版手机游戏剑魂_剑魂自动训练第3部分
java老版手机游戏剑魂 In this article, we will finally put an end to the "Automating Swords & Souls& ...
- 安卓10自带录屏_手把手教你安卓手机怎么录屏,收下这份屏幕录制指南
原标题:手把手教你安卓手机怎么录屏,收下这份屏幕录制指南 记得前两年安卓手机大部分还不支持系统录屏功能的时候,小编有多羡慕使用苹果手机的人.但是近年来安卓系统的功能也在不断发展完善,大部分的安卓手机都 ...
- Java 调用 C++ (Java 调用 dll)康哥手把手教你
摘要: 本文原创,转载请注明地址 http://www.cnblogs.com/baokang/p/4979243.html 因为要做点图形处理的项目,需要在Java中调用dll库,所以开发的第一步是 ...
- cmd 将文件夹下文件剪切到另外一个文件_手把手教你运行第一个 Java 程序,看不懂你来骂我!...
码字不易,对你有帮助 **点赞 /转发↪️/关注 ** 支持一下作者 微信搜公众号:不会编程的程序圆br/>看更多干货,获取第一时间更新 在运行第一个 java 程序之前,你需要先将 java ...
- 手机怎么模拟125k卡_手把手教你用手机NFC秒变门禁卡,这个方法多种手机都可以适用...
现在只要手机支持NFC功能,手机秒变公交卡.移动支付.数据传输.门禁卡等功能,之前在评论看多好多人说不知道怎么复制门禁卡,今天就来和大家讲解下如何复制门禁卡. 我们以华为手机,前提是手机支持NFC功能 ...
最新文章
- “极致”神话和产品观念_转自“蜗窝科技”
- java 对象读写_java 对象输入输出流读写文件的操作实例
- java classpath import package 机制 @Java的ClassPath, Package和Jar
- css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
- VS2015 IIS Express 无法启动 解决办法(转)
- mysql 最左_mysql索引最左匹配原则
- CVPR2019/图像翻译:TransGaGa: Geometry-Aware Unsupervised Image-to-Image Translation几何感知的无监督图像到图像的翻译
- 脸上长了黄褐斑怎么办
- ip rule 命令
- 阿里云服务器出现 Resource stopwords not found. Please use the NLTK Downloader to obtain the resource:
- 健身房会员管理系统(Java+Web+MySQL)
- Spark Steaming管理kafka的offset
- 区分网络管理员和网络工程师
- android自动切换暗色,超实用!Android 深色模式适配(可定时开启的APP内主题切换管理工具)...
- oracle中带有in查询的子查询绑定变量方式
- 【活动报名】大数据的流向,究竟去向何处?——深圳站
- 使用Plsql+oracle client 连接 Oracle数据库
- [电路汇总] 强大、便捷的蓝牙技术应用方案分享
- STM32 H7系列ADC DMA模式过采样设置详解 cubeMX
- 在Windows server2012R2上面解压安装MySQL出现丢失msvcp100.dll(亲测有效)