User permission check has failed

[ahsanbhatti98]

Issue Description:

After cloning the example code and running it successfully, I am encountering an issue on iOS versions greater than 17. Everything works fine on lower iOS versions (iOS 16 or 15) and on all Android devices. However, on iOS 17, the app is not recognizing the microphone.

Environment:

React Native version: 0.72.4 react-native-permissions version: 4.0.4 iOS version where the issue occurs: 17 and above

Steps to Reproduce:

Clone the example code. Run the application on iOS 17 or above. Observe the issue with microphone recognition.

Additional Information:

I have granted microphone and speech recognition permissions. The issue persists even after providing the necessary permissions.

Package.json

{ "name": "example", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "react": "18.2.0", "react-native": "0.72.4", "react-native-gesture-handler": "^2.12.1", "react-native-localize": "^3.0.2", "react-native-paper": "^5.10.4", "react-native-permissions": "^4.0.4", "react-native-reanimated": "^3.5.1", "react-native-safe-area-context": "^4.7.2", "react-native-toast-message": "^2.1.6", "react-native-voicebox-speech-rec": "^1.0.4", "react-native-volume-manager": "^1.10.0", "react-native-webview": "^13.6.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.11", "@tsconfig/react-native": "^3.0.0", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.76.8", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "engines": { "node": ">=16" } }

Info.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <!-- ... existing Info.plist content -->
  <key>NSMicrophoneUsageDescription</key>
  <string>Transcribe user's voice command to text</string>
  <key>NSSpeechRecognitionUsageDescription</key>
  <string>Transcribe user's voice command to text</string>
</dict>
</plist>

[ahsanbhatti98]

Please resolve this issue as soon as possible because this is the only blocker to live my app Please.

[ahsanbhatti98]

I think the problem is with webview or web speech api it doesn't seem to work in ios 17 or later versions

[anastobe]

yes exactly, i am facing the same issue my whole day sucks.

[chetanbhadarka]

did this dependency work for latest iOS and Android Versions?

I think the problem is with webview or web speech api it doesn't seem to work in ios 17 or later versions

[ahsanbhatti98]

did this dependency work for latest iOS and Android Versions?

I think the problem is with webview or web speech api it doesn't seem to work in ios 17 or later versions

Working for android but causing problem in new ios version

[sta-vanger]

Hello, I also encountered this problem. Hopefully this will be resolved. Thank you!

[sta-vanger]

@ahsanbhatti98 hello, did you find alternative library with similar functionality with this one?

[lym3074]

I have confirmed that there is no mediaDevice attribute related to webRTC inside the browser when calling the webView src via HTML.

However, when calling the webView src via uri, it is retrieved correctly.

I have saved the speechRecScript in HTML format inside the static folder and changed it to be called via a local uri.

this is SpeechRecView.js in node_modules > react-native-voicebox-speech-rec > dist> component

import React, { useCallback, useContext } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
import { SpeechRecContext } from '../context/SpeechRecProvider';
import { speechRecScript } from '../static/speechRecScript';
export const SpeechRecView = React.memo(() => {
    const { webViewRef, notifyListeners } = useContext(SpeechRecContext);
    const webViewSrc = Platform.select({
        ios: require("../static/speechRecScript.html"),
        android: {html: speechRecScript}
    })

    const onMessageReceived = useCallback((event) => {
        const message = JSON.parse(event.nativeEvent.data);
        notifyListeners({
            type: message.type,
            data: message.data,
        });
    }, [notifyListeners]);
    return (<View style={{ width: 0, height: 0, overflow: 'hidden' }}>
      <WebView ref={webViewRef} originWhitelist={['*']} source={webViewSrc} onMessage={onMessageReceived} onLoad={() => {
            console.log('🫵 🫵  Speech Rec Scrsssipt View Loaded 🫵 🫵 ');
        }}
        webviewDebuggingEnabled
        />
    </View>);
});

you can modify the source as shown in the following patch file. react-native-voicebox-speech-rec+1.0.4.patch