search

OvidijusParsiunas / deep-chat

Fully customizable AI chatbot component for your website
https://deepchat.dev
MIT License
1.27k stars 175 forks source link

Speech-to-Text Error in Quasar Vue3 Android APK #104

Closed phatneglo closed 5 months ago

phatneglo commented 5 months ago

I am facing an issue with the speech-to-text feature in a Quasar Vue3 application integrated with Capacitor, exported as an Android APK. Despite having the necessary security permissions enabled, I'm consistently receiving an error message when attempting to use the microphone for speech-to-text in the deepchat feature.

Environment

Steps to Reproduce

  1. Develop a Quasar Vue3 project integrated with Capacitor.
  2. Export the project to an Android APK.
  3. Install the APK on a Samsung device using USB and Android Studio.
  4. Open the app and navigate to the deepchat feature.
  5. Ensure that security permissions for microphone access are enabled.
  6. Click on the microphone button to initiate speech-to-text.
  7. Encounter the error message.

Expected Behavior

The application should allow the use of the microphone for speech-to-text without encountering any errors, especially after permission has been granted.

Actual Behavior

An error message "Error, please try again" is displayed every time the microphone button is clicked for speech-to-text functionality, despite having the necessary permissions.

Additional Information

I am looking for any advice or solutions to troubleshoot this problem effectively. Any help would be greatly appreciated!

OvidijusParsiunas commented 5 months ago

Hi @phatneglo. Thankyou for raising the issue.

By default, Deep Chat uses the Web Speech API SpeechRecognition to enable Speech To Text functionality on the chat. Whilst it is supported on most browsers, I have a feeling that it does not run on native interfaces like Android apps. This is likely because they have their own unique APIs like SpeechRecognizer to tap into the device's capabilities.

I don't think anything can be done on the current web based Deep Chat component to make this work. However, you can try to fork/clone the component and build it yourself which is very easy to do and is detailed in the Create your own Deep Chat component section. There, you can try to edit the SpeechToText class by adding the Capacitor Speech Recognition plugin and changing the event listeners to use its supported methods. If you do this, there is a chance that it may work, but I am not fully sure as I have not used Capacitor before.

If the above does not work, you can perhaps try to convert your app to a PWA which should give it access to the Web Speech API that is used by default in Deep Chat.

phatneglo commented 5 months ago

thank you very much! very awesome plugin code bro. 💪

OvidijusParsiunas commented 5 months ago

I will close this issue, nevertheless feel free to comment below. For anything else you are more than welcome to create a new issue. Thanks!