1

I am using the WebEngineView QML type to render a locally hosted web page which uses the WebRTC HTML media audio capture feature on Qt 5.15.1 (Which is listed among the features available to WebEngineView.

The web page is hosted locally using an nginx server and works perfectly when accessed by other browsers.

When accessing it with WebEngineView, the microphone is not capturing most likely due to the permission to do so not being granted.

There are no errors of any kind that occur in the console when opening the web page with WebEngineView, it simply just does not capture audio from the system input source.

Does anybody know how to properly go about granting this particular feature permission via the Qt WebEngineView or by some other means?

Here's what my code looks like.

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15

import QtWebEngine 1.10

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    WebEngineView {
        id: view
        anchors.fill: parent
        url: "http://127.0.0.1/audio.html"
        Component.onCompleted: {


         /* heres my attempt to grant permission 
          to use the microphone, which did not 
          seem to have any affect */

            view.grantFeaturePermission("http://127.0.0.1",
                                    MediaAudioCapture, true)                                        
        }
    }
}

Does anybody know how to properly go about granting this particular feature permission via the Qt WebEngineView or by some other means?

** EDIT **

audio.html (relevant code)

<!DOCTYPE html>
<head></head><body><div id="results"></div><script>
window.rc = new webkitSpeechRecognition()
    rc.continuous = true;
    
    rc.onresult = function(result) {
    document.querySelector("#results").innerHTML = result.results[0][0].transcript;
    }
rc.start();


        
</script></body></html>
mike510a
  • 2,102
  • 1
  • 11
  • 27

1 Answers1

2

In qwebengineview whenever a feature like camera/microphone access is requested following signal is emitted.

featurePermissionRequested(url securityOrigin, Feature feature)

Therefore, you can grant permission for the permission requested feature inside the onFeaturePermissionRequested handler.

For an example, try the following and see how the feature permissions are automatically granted.

WebEngineView {
    id: webEngineView
    anchors.fill: parent
    url: "https://webcammictest.com/"

    onFeaturePermissionRequested: {
        webEngineView.grantFeaturePermission(securityOrigin, feature, true);
    }
}

If you want to add a feature permission granting pop-up like in your usual web browser, try adding the following example FeaturePermissionBar.qml to your code. It is the same as above with the addition of printing the feature message along with the Accept and Deny buttons.

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtWebEngine 1.1
import QtQuick.Layouts 1.0

Rectangle {
    property var requestedFeature;
    property url securityOrigin;
    property WebEngineView view;

    id: permissionBar
    visible: false
    height: acceptButton.height + 4


    function textForFeature(feature) {
        switch (feature) {
            case WebEngineView.Geolocation:              return 'Allow %1 to access your location information?'
            case WebEngineView.MediaAudioCapture:        return 'Allow %1 to access your microphone?'
            case WebEngineView.MediaVideoCapture:        return 'Allow %1 to access your webcam?'
            case WebEngineView.MediaAudioVideoCapture:   return 'Allow %1 to access your microphone and webcam?'
            case WebEngineView.DesktopVideoCapture:      return 'Allow %1 to capture video of your desktop?'
            case WebEngineView.DesktopAudioVideoCapture: return 'Allow %1 to capture audio and video of your desktop?'
            case WebEngineView.Notifications:            return 'Allow %1 to show notification on your desktop?'
            default: break
        }
        return 'Grant permission for %1 to unknown or unsupported feature [' + feature + ']?'
    }

    onRequestedFeatureChanged: {
        message.text = textForFeature(requestedFeature).arg(securityOrigin);
    }

    RowLayout {
        anchors {
            fill: permissionBar
            leftMargin: 5
            rightMargin: 5
        }
        Label {
            id: message
            Layout.fillWidth: true
        }

        Button {
            id: acceptButton
            text: "Accept"
            Layout.alignment: Qt.AlignRight
            onClicked: {
                view.grantFeaturePermission(securityOrigin, requestedFeature, true);
                permissionBar.visible = false;
            }
        }

        Button {
            text: "Deny"
            Layout.alignment: Qt.AlignRight
            onClicked: {
                view.grantFeaturePermission(securityOrigin, requestedFeature, false);
                permissionBar.visible = false
            }
        }
    }
}

Then for the main.qml try the following code. With that you can understand how to grant permissions and can apply it anywhere accordingly.

import QtQuick 2.13
import QtQuick.Window 2.13
import QtQml 2.0
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.0
import QtWebEngine 1.4

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    FeaturePermissionBar {
        id: permBar
        view: webEngineView
        anchors {
            left: parent.left
            right: parent.right
            top: parent.top
        }
        z: 3
    }

    WebEngineView {
        id: webEngineView
        anchors {
            fill: parent
            top: permBar.bottom
        }
        focus: true

        url: "https://webcammictest.com/"

        onFeaturePermissionRequested: {
            permBar.securityOrigin = securityOrigin;
            permBar.requestedFeature = feature;
            permBar.visible = true;
        }
    }

}
Yasara Yasawardhana
  • 31
  • 3