使用集成了vue3网站的flutter应用程序访问移动终端摄像头

r9f1avp5  于 2023-02-19  发布在  Vue.js
关注(0)|答案(1)|浏览(414)

我正在努力整合一个相机功能。我有一个vue 3网站,应该嵌入在一个flutter应用程序。flutter应用程序应该只整合vue 3网站的移动视图。没有其他。我用了这个:https://inappwebview.dev/docs/intro/将网站嵌入到flutter应用程序中-目前为止这是有效的。我可以通过flutter应用程序与网站交互。
现在我又实现了一个新的路由,使用以下codepen来集成摄像头功能:https://codepen.io/ditarahma08/pen/GRRxZLW在浏览器中,在vue 3组件的本地开发过程中,相机流可以正常工作,并在浏览器中的vue应用上正确显示。但当我在flutter应用中托管网站时,视频流无法建立...
如果我启动flutter应用程序并导航到具有摄像头功能的路线,则摄像头流未建立,并且在运行flutter应用程序的控制台中,我收到以下错误:flutter: {message: [Vue warn]: Unhandled error during execution of native event handler at <Scanner> at <QPage> at <ScannerView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< [object Object] > > at <RouterView> at <QPageContainer class="bg-primary" > at <QLayout view="lHh Lpr lFf" > at <App>, messageLevel: 2}
现在我有点不知道这个问题是什么相关...这是否出现,因为这个codepen的例子只适用于我的MacBook前置摄像头,但不适用于我的iPhone前/后摄像头?我期待,它将连接到iPhone前置摄像头.
我想知道这是xCode模拟器、我的iPhone还是inappview插件的问题,inappview插件增加了一个额外的抽象层,禁用了视频流功能。是否有可能像我尝试的那样存档这个功能?这是我第一次使用flutter and vue。也许我在这里错过了一些基础知识。
也许有人有一些想法让我考虑,而试图解决这个问题。
提前感谢:)

wfsdck30

wfsdck301#

通过使用一个完整的二维码阅读器组件修复了我的问题。
我先试了这个:https://gruhn.github.io/vue-qrcode-reader/但我遇到了几个问题,它发现,这似乎是不兼容的vue3.
找到了这个库,它提供了几乎相同的功能(除了torch):)并且与vue3兼容:https://github.com/HJ29/vue3-qr-reader

相关问题