Cocos 2 使用 webview 嵌入页面,摄像头调用没权限问题

news2024/10/11 12:03:38

Cocos 2 使用 webview 嵌入页面,摄像头调用没权限问题

嗯,这么说呢,这篇博文看自己的实际需求哈,标题写的可能不是很准确。
我这边呢,是遇到这样一个功能,就是有一个服务,他是的页面呢,是打开电脑的摄像头,需要在cocos 程序里面呢,展示摄像头的实时画面。看上去挺简单哈,但是实际做起来,还是有点问题。

背景

另一项目组提供一个web服务,这个服务呢,是部署到后端服务器的web项目,最终提供一个页面的访问链接,这个访问链接呢,浏览器打开后,会自动打开电脑的摄像头采集画面。这个功能呢,需要在 cocos 中使用,也就是说需要在 cocos 中打开摄像头,实现相应的功能。

最开始我是这么想的, cocos 直接打开设备摄像头有点麻烦,所以我就打算直接使用 cocos 提供的组件 webview,直接把提供的 web 页面嵌入进来,这样子听起来就十分的简单了,OK,那就简单的试验一下。

cocos 使用 webview 嵌入页面

这个功能十分的简单,cocos 提供了 webview 组件,只需要设置一下 url 就可以了。

但是有一个问题需要注意一下,就是 cocos 啊,目前只是支持插入 url,不能使用本地的 html 文件,所以提供的 web 页面需要部署起来,我自己本地使用 nginx 部署了一下。

使用很简单,添加到页面一个 webview 组件,然后把 url 填写上:

在这里插入图片描述

好了,完成了,我们现在只需要打开页面运行一下就可以了!

在这里插入图片描述

看上面截图,摄像头画面打不开,控制台报错了,报的意思是没有授权!

所以说我们需要授权一下。

解决问题

解决很简单,只需要在嵌入网页的 iframe 标签中添加一下授权就可以:

<iframe src="./wjw.html" frameborder="0" allow="microphone *;camera *;"></iframe>

主要就是加上 allow="microphone *;camera *;" 这段代码就可以了。

但是现在有这样一个问题,就是我们使用的是 webview 嵌套的网页,他是 cocos 提供的组件,他只能配置个 url,没有什么 iframe ,怎么办? 有办法!

首先我们给使用的 webview 关联一个 ts 文件,然后我们呢,打印一下这个 node:

    start() {
        console.log("WebViewFun start", this.node);
    }

我们看一下 node 里面有没有 iframe 这个标签!

在这里插入图片描述

看!找到啦!!!

后面就简单了,给他加上就可以了!加上之后,在把 url 赋值上去,还有,之前在组件配置的 url 就可以清空了,我们后边动态给赋值上去:

    start() {
        let iframeDom = this.node.getComponent(cc.WebView)["_impl"]["_iframe"];
        iframeDom.allow = 'microphone *;camera *'
        iframeDom.src = "http://127.0.0.1/"
    }

好了,我们看一下效果:

在这里插入图片描述

诶,画面出来了!完成!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2204805.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CentOS7离线安装gcc和gcc-c++(亲测成功)

1.点击下载安装包(下载下来的是gz文件&#xff0c;在linux环境下解压) 提取码&#xff1a;1111 2.进入gcc_rpm目录&#xff0c;执行安装命令 cd gcc_rpm/rpm -ivh *.rpm --nodeps --force3.验证gcc是否安装成功 gcc -v安装gcc-c 1.进入 gcc-c 文件件目录下 cd ../gcc-c/…

高校党费收缴系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;党费收缴管理&#xff0c;论坛信息管理&#xff0c;新闻动态管理&#xff0c;公告管理&#xff0c;基础数据管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;公告&…

【刷题】数组中的逆序对

题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/shu-zu-zhong-de-ni-xu-dui-lcof/submissions/571…

嵌入式硬件设计:从原理到实践

嵌入式硬件设计&#xff1a;从原理到实践 嵌入式硬件设计在物联网、智能设备、工业自动化等领域中扮演着至关重要的角色。随着技术的发展&#xff0c;越来越多的设备依赖于嵌入式系统进行实时控制与数据处理。本文将详细介绍嵌入式硬件设计的各个方面&#xff0c;从设计原理到…

Transformer细节问题

一、Transformer 以下是Transformer的一些重要组成部分和特点&#xff1a; 自注意力机制&#xff08;Self-Attention&#xff09;&#xff1a;这是Transformer的核心概念之一&#xff0c;它使模型能够同时考虑输入序列中的所有位置&#xff0c;而不是像循环神经网络&#xff…

成都睿明智科技有限公司正规吗怎么样?

在数字经济的浪潮中&#xff0c;抖音电商以其独特的内容生态和庞大的用户基础&#xff0c;正逐步成为商家们竞相布局的新蓝海。而在这场电商变革的浪潮中&#xff0c;成都睿明智科技有限公司以其专业的服务和敏锐的市场洞察力&#xff0c;成为了众多商家信赖的合作伙伴&#xf…

QAbstractTableModel只有refresh才能调动data()更新表格数据

void refresh() { beginResetModel(); endResetModel(); } QVariant data(const QModelIndex &index, int role) const

2024长城杯WP

WEB SQLUP 打开题目给了一个登录页面结合名字猜测为SQL注入 查看源码发现有hint提示开发者使用的是模式匹配 所以我尝试使用%来模糊匹配&#xff0c;登陆成功 usernameadmin&password% 进入面板之后发现有一个文件上传功能 尝试上传php文件&#xff0c;结果被waf&#xff0…

c#中多态的实例应用说明

在C#中&#xff0c;多态性是通过继承和实现接口来实现的&#xff0c;允许编写可以使用基类型的代码&#xff0c;然后使用派生类型的特定行为。 一.实例界面显示 二.源码界面显示 //定义的基类abstract class Shape{public abstract int Area();//基类中的抽象方法}//定义矩形的…

获得淘宝商品详情高级版 API 返回值实践流程

淘宝详情API接口的测试流程是一个系统而全面的过程&#xff0c;旨在确保API接口的稳定性和可靠性。以下是详细的测试流程&#xff0c;包括测试前的准备工作、测试步骤、测试后的总结&#xff0c;以及必要的测试工具和注意事项。 一、测试前的准备工作 了解API调用文档&#x…

LabVIEW 成绩统计系统

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

vue3实现登录获取token并自动刷新token进行JWT认证

在《django应用JWT(JSON Web Token)实战》介绍了如何通过django实现JWT&#xff0c;并以一个具体API接口实例的调用来说明JWT如何使用。本文介绍如何通过vue3的前端应用来使用JWT认证调用后端的API接口&#xff0c;实现一下的登录认证获取JWT进行接口认证。 一、账号密码登录获…

ViT模型技术学习

前言 最近多模态模型特别火&#xff0c;模型也越来越小&#xff0c;MiniCPM-2.6只有8B&#xff0c;里面采用的图片编码器是SigLipViT模型&#xff0c;一起从头学习ViT和Transformer&#xff01;本文记录一下学习过程&#xff0c;所以是自上而下的写&#xff0c;从ViT拆到Trans…

Python Memcached 的工作原理

Python 解释 Memcached 的工作原理 在现代 Web 应用程序中&#xff0c;性能和响应速度是影响用户体验的关键因素。随着应用的用户数量和数据量的增加&#xff0c;数据库查询次数变得更加频繁&#xff0c;服务器负载也随之增加。如果每次请求都要通过数据库处理&#xff0c;那么…

【vue】监听table水平滚动条切换tab后还原位置

有个需求就是切换tab后&#xff0c;原先的table水平滚动条要还原位置&#xff08;如下图&#xff09;&#xff0c;先说下思路&#xff0c;大致就是 切出页面时 把滚动距离保存到Storage 中&#xff0c;切回来时在恢复 直接上代码 首先table ref指定一下ref"jtable" …

使用Python编写你的第一个算法交易程序

背景 Background ​ 最近想学习一下量化金融&#xff0c;总算在盈透投资者教育&#xff08;IBKRCampus&#xff09;板块找到一篇比较好的算法交易入门教程。我在记录实践过程后&#xff0c;翻译成中文写成此csdn博客&#xff0c;分享给大家。 ​ 如果你的英语好可以直接看原文…

秋日相邀!与 deepin 一起逛 OSCAR 开源产业大会开源市集

查看原文 10 月 16 日&#xff0c;“2024 OSCAR 开源产业大会”将在北京开幕。这场大会不仅是开源领域一年一度的盛会&#xff0c;更是一个汇集众多行业专家、技术领袖和开源爱好者的交流平台。大会将围绕开源技术的最新发展、产业应用、风险治理以及未来趋势等议题展开深入讨…

TCP连接重置,到底是怎么回事?

号主&#xff1a;老杨丨11年资深网络工程师&#xff0c;更多网工提升干货&#xff0c;请关注公众号&#xff1a;网络工程师俱乐部 上午好&#xff0c;我的网工朋友 连接建立失败并不仅仅包含无响应问题&#xff0c;还有一种常见的情况&#xff0c;即RST&#xff08;Reset&…

kubernetes中微服务部署

微服务 问&#xff1a;用控制器来完成集群的工作负载&#xff0c;那么应用如何暴漏出去&#xff1f; 答&#xff1a;需要通过微服务暴漏出去后才能被访问 Service 是一组提供相同服务的Pod对外开放的接口借助Service&#xff0c;应用可以实现服务发现和负载均衡Service 默认只…

网优学习干货:王者荣耀游戏用户体验洞察及质差识别(1)

一、课题背景 二、课题目的 针对热点游戏&#xff08;王者荣耀&#xff09;进行业务质量评估&#xff0c;并通过对端到端定界分析&#xff0c;从无线、核心网、互联网维度识别影响用户体验关键因素&#xff0c;为游戏用户的体验优化提供依据。 三、课题实施进度 王者荣耀卡顿特…