AR识别图播放视频

最新推荐文章于 2024-04-11 19:00:00 发布
最新推荐文章于 2024-04-11 19:00:00 发布
阅读量2.7k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LCHUIHUI/article/details/89399022
版权

只需要在识别图下放一个Quad平面 然后给Quad添加一个组件Video Player即可

_小辉辉_林
关注
【Vuforia+Unity】一个简单AR识别图像弹出按钮播放暂停视频
leoysq的博客
03-12 1168
2.按钮播放视频这部分写一个按钮回调函数即可。
ar.js 追踪图片mark播放视频，并且根据是否识别控制视频播放操作
weixin_43982168的博客
02-08 4664
首先完成了视频纹理的加载，可以持续的播放视频 其次完善了视频播放感受，清除跳跃、跳帧、抖动、每次识别重新播放等现象，不错的感受，可以达到商业效果。 最后，通过通读ar.js代码，终于找到了通过识别进行视频开始播放节点的控制，稍后慢慢完善操作方法。 ...
Vuforia AR 图片识别视频播放Unity3D例子
11-15
我把Vuforia AR的VideoPlayback-5-0-6.unitypackage的内容稍微改了下，去掉了界面说明，这样自己用着方便。另外，我没加App License Key。另外，我没加App License Key。
unity AR 扫描图片播放视频 视频特效
08-03
使用unity 3D 制作的AR 扫描图片 播放视频图片 加上一个简单的特效
Vuforia AR篇（二）— 扫描指定图片播放视频
脚踏实地,实事求是。
04-11 3769
此外，还有视频背景设置、数据库管理、设备跟踪等选项。这些参数允许开发者根据项目需求和目标设备的特性来调整Vuforia Engine的行为。Vuforia Configuration在Unity中包含了多个参数设置，用于调整和优化AR应用程序。在Image Target Behaviour 中设置需要识别的图片。在ImageTarget下创建一个Plane并且赋值给Videos。复制license key填入ArCamera。在unity中导入下载的数据库包。登录官网创建一个账号，然后登录。
EasyAR开发教程第二弹--AR 视频的识别与播放
geeklibo的博客
01-05 7689
在EasyAR 开发系列的教程中，我们在前面讲解了如何用EasyAR SDK 来建立开发环境，并实现简单的功能，今天我们讲解用EasyAR SDK 来识别视频的播放。 EasyAR 开发者交流群：605785368 第一步：导入EasyARSDK 将事先下载好的unity 包导入新建的工程中，不知道的小伙伴请看我前面的教程。（到官网下载） 第二步：准备视频资源 准备好你识
Unity+高通Vuforia SDK——AR播放视频
linshuhe1的专栏
04-19 1万+
在之前的文章中我们已经实现了基本的图片识别，并在识别的图片上显示3D模型，但是有的时候我们实际上需要在识别的图片上播放一段视频，那么接下来我们就来说说如何实现这样的操作。 一、资源下载： 这里我们需要准备的资料如下： 1.一段.m4v格式的视频：     其他格式的视频可以通过格式转换成.mp4格式，然后修改后缀名为.m4v，即mp4和m4v是可以互转的； 2.Vuforia官方
EasyAR_实现扫描识别图播放视频
weixin_42137574的博客
08-20 4129
官方案例已经 实现了扫描识别图播放视频 案例包在 Assets --> Samples --> Scenes -->HelloAR_ImageTarget_Video 1.复制案例包中的ImageTarget_argame_video 到自己的项目场景里 2.需要修改ImageTarget_argame_video 里的 Image Tracker 把E...
Unity_AR_Vuforia实现识别图视频播放
weixin_42137574的博客
08-08 1万+
1.右键 创建imageTarget 2.在 imageTarget下 创建一个 3.给 Quad 添加一个 Video Player 4.把 视频拖拽到 Video Player上 实现 识别到了 播放 识别丢失暂停 复制一份 Default Trackable Event Handler 里的代码 创建一个新的脚本 命名为 VideoImageTarget ...
前端ar库MindAR.js图片跟踪，人脸跟踪mind-ar-js-1.1.4
04-12
内容概要：MindAR一款js实现的前端ar库，支持图片跟踪和人脸跟踪，微信里可运行。 适合人群：访问github困难的同学。 搬运自：https://github.com/hiukim/mind-ar-js 注意事项：调用摄像头得用localhost或者https。
mind-ar-js-react:在React中使用MindAR的示例
05-05
使用MindAR的示例 这是在React中使用的示例项目 react组件位于src/MindARViewer内部。 其他所有内容都是通过create-react-app ，它们无关紧要。 截屏 它表明： 如何将MindAR导入为npm软件包 如何为MindAR创建一个React组件 跑步 > npm install > npm run start
AR_painting：这是对AR.js应用程序在图像上显示动画的测试
03-04
AR_painting 这将是对AR.js应用程序在图像上显示动画的测试。
AR.JS扫描标识播放视频
weixin_44362941的博客
12-04 1726
AR.JS扫描标识播放视频前言mark标识图片标识通用事件 前言 现在我了解的AR.js扫描有两种 一种是mark标识 一种是图片标识 mark标识是一种方形的图片，有黑色的边框 最小为图片的十分之一 也不知道算不算优点的一方面是在微信打开时播放视频是用的微信的播放器 默认全屏播放不会卡 图片标识就是使用一张图片作为标识，好处是比例随意，长方形，正方形，随意的图片都可以。算是缺点的地方是这个在微信打开时他会将播放器隐藏，然后将其渲染到模型上，就会很卡。 mark标识 生成链接 这个上传图片 然后选择黑框比例
一个好玩的东西，纯JS代码实现增强现实（AR.js）
jackTesla的博客
03-07 4862
增强现实技术（Augmented Reality，简称 AR），是一种实时地计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术，这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动。这种技术1990年提出。随着随身电子产品CPU运算能力的提升，预期增强现实的用途将会越来越广。 --- 先体验 首先在手机浏览器里打开这个demo应用[http://jacktesla...
微信小程序WebAR跟踪播放视频与渲染3D模型
11-16 1254
无间AR 微信小程序WebAR,支持在微信小程序中识别，并能跟踪播放视频与渲染3D模型
增强现实之开源AR库——AR.js
热门推荐
ScapeD的博客
04-26 2万+
AR.js是一个web端的AR库，它完全开源免费，获得了很高的热度。我们要实现的效果如下： 首先去github下载AR.js库： AR.js下载 建议顺带看下作者给出的介绍。介绍里给出一个示例，我们在此示例的源码进行分析并尝试修改示例中的三维模型。 解压缩后目录如下： 示例存three.js目录的example目录下。只有在服务器环境内才可以访问。我们可以将AR.js拷贝至Apa...
AR应用程序脱离扫描图功能实现
u013047755的博客
03-04 3346
Unity3D实现的高通AR程序其实很简单，导入Vuforia的SDK即可，前面的AR程序实现我就不多废话了。 下面咱们说说怎么实现脱离扫描托仍然让模型在屏幕的最中显示 首先你需要判断什么情况下是脱离扫描图的状态，高通为此提供了一个方法 在这个代码里面，自己写一个bool判断， 这样你就可以通过监听imesh来判断是否为丢失扫描图状态， 知道什么情况下是丢失扫描图状态还并
使用ar.js实现识别图片播放视频
最新发布
09-20
AR.js是一个用于创建增强现实应用的JavaScript库，它允许你在网页上添加交互式的三维模型和图像，并将它们放置于用户的摄像头视场中。要使用AR.js识别图片并播放视频，你需要按照以下步骤操作： 1. **安装AR.js**：首先，需要在项目中引入AR.js库以及A-Frame（一种基于WebGL的框架，AR.js的基础）。你可以通过CDN或者npm包管理工具安装。 ```html <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/mediapipe@0.8.7/js/models/image_classification.js"></script> <script src="https://cdn.jsdelivr.net/npm/arjs@1.5.4/dist/aframe-ar.js"></script> ``` 2. **准备素材**：为图片准备分类模型，通常使用Mediapipe或其他类似库训练的图像识别模型，用于识别图片内容。同时，你也需要一个对应的视频资源，当图片匹配到特定标签时播放。 3. **创建场景**：在A-Frame中，创建一个AR元素，比如`a-entity ar-js`，并将图片作为它的纹理。添加必要的事件监听器，如`data-loaded`，以便在图片加载完成后开始处理。 ```html <a-scene ar-js> <a-entity id="image-marker" gltf-model="model.gltf" position="0 0 0" rotation="0 0 0" scale=".1 .1 .1" material="src: your-image-url; shader: flat;"></a-entity> </a-scene> ``` 4. **事件处理器**：利用Mediapipe或其他API识别图片内容，当检测到特定标签时，触发视频播放。这通常是通过JavaScript编写异步回调函数来实现的，结合HTML5 Video API。 ```javascript document.querySelector('#image-marker').addEventListener('data-loaded', async function () { const imageClassification = await navigator.mediaDevices.getUserMedia({ video: true }); // 这里使用Mediapipe识别图片并获取标签 const label = await model.classifyImage(imageClassification); if (label === 'your-target-label') { const videoElement = document.getElementById('target-video'); videoElement.play(); } }); ``` 5. **视频元素**：在页面上包含一个video元素，并设置其隐藏属性，直到需要播放时显示出来。 ```html <video id="target-video" autoplay muted loop hidden></video> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值