需求
混合App开发,原生壳子+webApp,在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容,同时可以手动拍照并进行人脸识别,将识别结果显示在网页上。
技术栈
vue、Html5、video标签、Android、IOS、百度AI
分析
1、使用navigator.mediaDevices.getUserMedia调用系统原生摄像头功能
2、video标签显示摄像头内容
3、canvas标签获取图片
4、将图像上传服务器,通过百度AI识别图片
5、web显示识别结果
核心代码
1、调用系统原生摄像头功能并使用video标签显示html:
<video id="webcam" :style="videoStyle" :width="videoWidth" :height="videoHeight" loop preload > </video>
JavaScript:
initVideo() { let that = this; this.video = document.getElementById("webcam"); setTimeout(() => { if ( navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ) { //调用用户媒体设备, 访问摄像头 this.getUserMedia( { video: { width: { ideal: that.videoWidth, max: that.videoWidth }, height: { ideal: that.videoHeight, max: that.videoHeight }, facingMode: "user", //前置摄像头 frameRate: { ideal: 30, min: 10 } } }, this.videoSuccess, this.videoError ); } else { this.$toast.center("摄像头打开失败,请检查权限设置!"); } }, 300); }, 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); } }, videoSuccess(stream) { this.mediaStreamTrack = stream; this.video.srcObject = stream; this.video.play(); }, videoError(error) { console.error(error); this.$toast.center("摄像头打开失败,请检查权限设置!"); },
2、canvas获取摄像头图片
JavaScript:
this.canvas = document.createElement("canvas"); .... let context = this.canvas.getContext("2d"); context.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight); this.imgSrc = this.canvas.toDataURL("image/png");
3、调用百度AI识别图片
JavaScript:
let that = this; let base64Data = this.canvas.toDataURL(); let blob = this.dataURItoBlob(base64Data); // var file = new FormData(); file.append("file", blob); file.append("key", that.uuid); util.ajax .post("XXXXXXXXXX", file, { headers: { "Content-Type": "multipart/form-data" } }) .then(function(response) { if ((response.status = 200)) { .....识别成功,显示结果 } else { ......识别失败 } }) .catch(function(error) { console.error(error); }); //base64转换为Blob dataURItoBlob(base64Data) { var byteString; if (base64Data.split(",")[0].indexOf("base64") >= 0) byteString = atob(base64Data.split(",")[1]); else byteString = unescape(base64Data.split(",")[1]); var mimeString = base64Data .split(",")[0] .split(":")[1] .split(";")[0]; var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], { type: mimeString }); },
手机适配
1、由于Android6之后,Android的权限管理出现变化,Android原生的壳子,需要做如下处理:
myWebView.setWebChromeClient(new WebChromeClient() { @TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override public void onPermissionRequest(final PermissionRequest request) { request.grant(request.getResources()); } });
2、IOS系统,Safari11之后可用
3、OverconstrainedError错误,部分Android手机会报OverconstrainedError错误,原因是摄像头参数设置不合理,找不到指定设置。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 张敬轩2005《我的梦想我的路》几何娱乐[WAV+CUE][1G]
- 群星《人到四十男儿情(SRS+WIZOR)》[原抓WAV+CUE]
- 马久越《上善若水HQCDII》[低速原抓WAV+CUE]
- 龚玥《女儿情思》6N纯银SQCD【WAV+CUE】
- 张惠妹《你在看我吗》大碟15 金牌大风[WAV+CUE][1G]
- 群星《左耳·听见爱情》星文唱片[WAV+CUE][1G]
- 群星《抖音嗨疯-DISCO英文版》[WAV+CUE][1G]
- 群星.1990-情义无价(TP版)【中唱】【WAV+CUE】
- 马兆骏.1990-心情·七月【滚石】【WAV+CUE】
- 方伊琪.1979-沙鸥(LP版)【星岛全音】【WAV+CUE】
- 蔡琴《醇厚嗓音》6N纯银SQCD【WAV+CUE】
- 陈曦《遇见HQCD》[WAV+CUE]
- 大提琴-刘欣欣《爱的问候》HDCD[WAV+CUE]
- 周耀辉/邓慧中《从什么时候开始》[320K/MP3][95.71MB]
- 周耀辉/邓慧中《从什么时候开始》[FLAC/分轨][361.29MB]