webkitSpeechRecognition not Working in WKWebView

Question

I am trying to get speech recognition working in a WKWebView but I am getting a "Speech recognition service permission check as failed" error.

It prompts for permission on the simulator but not on an actually device.

I thought it was supported on iOS 14.3 and higher. The App does allow mic permissions.

Here is what I am trying to use

var speechRecognition = new webkitSpeechRecognition(),
                response = {onChange: function() {}},
                allowEnd;
            speechRecognition.interimResults = true; 

            response.stop = function() {
                allowEnd = true;
                speechRecognition.stop();
            }
            response.cancel = function() {
                allowEnd = true;
                speechRecognition.abort();
            }

            speechRecognition.addEventListener('speechstart', function() {
                scope.$apply(function() {
                    response.speaking = true;
                });
            });

            speechRecognition.addEventListener('error', function(event) {
                _this.browserSupport.errorMessage = 'Something went wrong.  Try again later.';

                allowEnd = true;

                if (event) {
                    switch(event.error) {
                        case 'language-not-supported':
                            scope.$apply(function () {
                                _this.browserSupport.isSupported = false;
                            });
                            response.cancel();
                            break;
                        case 'not-allowed':
                            response.permissionDenied = true;
                            break;
                        case 'aborted':
                            break;
                        default:
                            console.error('Speech Recognition Error', event);
                    }
                }
            });


            speechRecognition.addEventListener('end', function(event) {
                if (!allowEnd && !scope.$$destroyed) {
                    speechRecognition.start();
                } else {
                    scope.$apply(function() {
                        response.listening = false;

                        if (response.onStop) {
                            response.onStop()
                        }
                    });
                }
            });

            speechRecognition.addEventListener('start', function() {
                scope.$apply(function() {
                    response.listening = true;
                });
            });

            speechRecognition.start();

Answer 1

@plato522 thanks, add permission declaration in info.plist file to solved the problem:

either by property/key

key: NSMicrophoneUsageDescription

key: NSCameraUsageDescription

key: NSSpeechRecognitionUsageDescription

or by source

<key>NSMicrophoneUsageDescription</key>
<string>your string</string>
<key>NSCameraUsageDescription</key>
<string>your string</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>your string</string>