为了账号安全,请及时绑定邮箱和手机立即绑定

【学习打卡】第14天 多端全栈项目实战

标签:
SpringBoot

课程名称:SpringBoot+Vue3 项目实战,打造企业级在线办公系统

课程章节:第三章

主讲老师:神思者



课程学习:

    人脸验证:

    


课程收获

    1. 开通  腾讯云 人脸识别

    https://cloud.tencent.com/product/facerecognition 

    人脸识别包含面部识别和活体检测功能这两个功能,都有各自的API允许调用。

    2.创建人员库

    存放前端提交得面部照片 

https://img1.sycdn.imooc.com//62fadfb50001c26108030544.jpg

api接口文档 https://cloud.tencent.com/document/api/867/45014

奇怪的是 居然没用java版本得

CreatePersonRequest req = new CreatePersonRequest();
req.setGroupId(groupName);//人员库
req.setPersonId(driverId + "");//人员
long gender = sex.equals("男") ? 1L : 2L;
req.setGender(gender);req.setQualityControl(4L); //照片质量等级
req.setUniquePersonControl(4L); //重复人员识别等级
req.setPersonName(name); //姓名
req.setImage(photo);//base64图片
CreatePersonResponse resp = client.CreatePerson(req);



这是代码得调用顺序

https://img1.sycdn.imooc.com//62fae07d0001f7b108080402.jpg


其中需要再 application-common.yml 中配置人脸识别得注入信息


https://img1.sycdn.imooc.com//62fae0a600016ab805010298.jpg


        //腾讯云端创建司机面部档案
        Credential cred = new Credential(secretId, secretKey);
        IaiClient client = new IaiClient(cred, region);
        try {
            CreatePersonRequest req = new CreatePersonRequest();
            req.setGroupId(groupName);   //人员库ID
            req.setPersonId(driverId + "");   //人员ID
            long gender = sex.equals("男") ? 1L : 2L;
            req.setGender(gender);
            req.setQualityControl(4L);   //照片质量等级
            req.setUniquePersonControl(4L);   //重复人员识别等级
            req.setPersonName(name);   //姓名
            req.setImage(photo);   //base64图片
            CreatePersonResponse resp = client.CreatePerson(req);
            if (StrUtil.isNotBlank(resp.getFaceId())) {
                //更新司机表的archive字段值
                int rows = driverDao.updateDriverArchive(driverId);
                if (rows != 1) {
                    return "更新司机归档字段失败";
                }
            }
        } catch (TencentCloudSDKException e) {
            log.error("创建腾讯云端司机档案失败", e);
            return "创建腾讯云端司机档案失败";
        }
        return "";


4.前端验证

    https://img1.sycdn.imooc.com//62fae0f100019d5e03850715.jpg


由于我们拍摄的照片 不是圆形得  为了时项目得ui设计得已实现 


所以使用了一张原型镂空得图片 镂空中间 外部为顶层 白色


调用摄像头代码

<camera device-position="front" flash="off" class="camera" @error="error" v-if="showCamera">
    <cover-image class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../static/face_camera/bg.png" class="bg"></cover-image>
</camera>



进入得时候播放语音提示

let that = this;
that.mode = options.mode;
let audio = uni.createInnerAudioContext(); //创建音乐播放器对象
that.audio = audio;
audio.src = '/static/voice/voice_5.mp3';
audio.play(); //执行播放



至此人脸识别 主要功能实现 进行测试


https://img1.sycdn.imooc.com//62fae1710001db3608030315.jpg


能够正常上传到 腾讯云



https://img1.sycdn.imooc.com//62fae19f000193b914210656.jpg


https://img1.sycdn.imooc.com//62fae21700013b6813350681.jpg













点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
27
获赞与收藏
19

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消