2024年最新使用Vue3 + AR撸猫,才叫好玩(5),2024年最新数据库开发面试自我介绍

总结

为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

前端面试题汇总

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux

<a-nft videohandler type=‘nft’ url=‘./src/assets/dataNFT/pinball’ smooth=“true” smoothCount=“10”

smoothTolerance=“0.01” smoothThreshold=“5”>

🐱:喵~是不是感觉更酷更好玩了?

关于AR相关项目:元宇宙开源项目,你千万不能错过!

撸猫姿势三:配合声网技术,与你家的猫隔空喊话

如果你是一位前端开发者,相信你一定知道阮一峰这个大佬。曾经在他的每周科技周刊看到这么一个有趣的事情:在亚马逊某片雨林里,安装了录音设备,实时将拾取到的鸟叫声传到一个网站,你可以打开该网站听到该片雨林里的实时鸟叫声,简单的说就是该网站可以听到该片雨林的”鸟叫直播 "。(可惜现在一时找不到该网站网址)

而作为工作党,爱猫人士的我们,可能有着上述同样的情感需求:要出差几天,家里的猫一时没法好好照顾,想要实时看到家里的爱猫咋办?

买台监控摄像头呗

当然是打开声网找到解决方案:视频通话[2] (这里为声网文档点个赞,整个产品的文档分类规划的特别清晰,不像某些云服务产品文档像是垃圾桶里翻东西)

52ce9a29834978957557f3d43a5b1e3c.png

使用vue3写法改造文档demo

先安装依赖包:

“agora-rtc-sdk-ng”: “latest”

app.vue中代码:

<button ref=“joinBtn” @click=“handleJoin” type=“button” id=“join”>

加入

<button ref=“leaveBtn” @click=“handleLeave” type=“button” id=“leave”>

离开

跑起来效果: 60317a5957def0775e48ef38bdd1ccff.png

这时就相当于在家安装了一个摄像头,如果我们需要远程查看,就可以通过声网官方提供的一个测试地址[3]加入通话

手机打开上述网址,输入你的项目appId跟token,可以看到成功加入通话:

ee42cf116c65d34412390f510f77e59b.png a2ad429e3d178dff577710172febfe17.png

下方图片是手机摄像头捕捉到的画面,原谅我用猫照片代替😂

让视频画面跑在AR.js画面中

这个由于个人时间关系,暂时就不研究实现。这里提供一个想法就是:单纯的视频画面看起来有点单调,毕竟有可能猫并不在视频画面中出现,结合撸猫姿势一提到的展示图片,其实我们可以在ar场景中视频区域周围,布置照片墙或其他酷炫一点的subject,这样的话我们打开视频即使看不到猫星人,也可以看看它的照片之类的交互。

结束语


本文借征文活动,简单入手了解了下web AR相关知识,在这几天学习的过程中觉得还是蛮好玩的,此文也当抛砖引玉,希望更多开发者了解AR相关的知识。

AR在体验上真的很酷,未来值得期待。

最近几年苹果一直致力于推进AR技术体验并带来相关落地产品,例如为了配合提升AR体验,带来雷达扫描,空间音频功能。值得一提的是,今年的苹果秋季发布会,苹果的邀请函也是利用到了AR + 空间音频技术,即使你不是果粉,当你实际上手体验的时候,你依然会真正发自内心的感觉:wow~cool。可以点此视频[4]观看了解。

而目前的Web AR技术相比于苹果自有的ARkit技术,在体验上还存在一些差距(如性能问题,识别不稳定),同时缺乏生态圈,希望Web AR技术在未来得到快速发展,毕竟web端跨平台通用特性,让人人的终端都可以跑起来才是实现AR场景大规模应用的前提。

Facebook押注的元宇宙概念中,其实也包含了AR技术,所以在元宇宙世界到来之前,AR技术值得我们每一个前端开发者关注学习。

彩蛋

如果你问我最喜欢什么猫,我会说–“房东的猫”,~哈哈哈🐱~

1cc81aaa543d84cc96c93564410d085a.png

参考资料


AR.js官网[5]

AR.js中文翻译文档[6]

跨平台移动Web AR的关键技术 介绍及应用[7]

声网文档[8]

关于本文

作者:码克吐温

https://juejin.cn/post/7030342557825499166

参考资料

[1]

https://github.com/artoolkitx/jsartoolkit5

[2]

https://docs.agora.io/cn/Video/start_call_web_ng?platform=Web

[3]

https://webdemo.agora.io/basicVideoCall/index.html

[4]

https://www.bilibili.com/video/BV1R3411i7LL?from=search&seid=17803327188398196779&spm_id_from=333.337.0.0

[5]

https://ar-js-org.github.io/AR.js-Docs/#ar-types

[6]

http://www.febeacon.com/arjs-docs-zh-cn/routes/

[7]

https://www.w3.org/2021/07/chinese-ig-xr/slides/WebXR-yakun-huang.pdf

[8]

https://docs.agora.io/cn

最后

转发文章并关注公众号:前端开发博客,回复 1024,领取前端进阶资料

  1. 回复「电子书」领取27本精选电子书

  2. 回复「加群」加入前端大神交流群,一起学习进步

最后

正值招聘旺季,很多小伙伴都询问我有没有前端方面的面试题!

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端资料图.PNG

#ar-types

[6]

http://www.febeacon.com/arjs-docs-zh-cn/routes/

[7]

https://www.w3.org/2021/07/chinese-ig-xr/slides/WebXR-yakun-huang.pdf

[8]

https://docs.agora.io/cn

最后

转发文章并关注公众号:前端开发博客,回复 1024,领取前端进阶资料

  1. 回复「电子书」领取27本精选电子书

  2. 回复「加群」加入前端大神交流群,一起学习进步

最后

正值招聘旺季,很多小伙伴都询问我有没有前端方面的面试题!

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-EziV7zYP-1715741899743)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值