JS and html camera permission

[luftscreenmx]

Hello, I have an html with JS to use the camera and filters on the face, how can I import values ​​and permissions to use them in the flipabit web viewer? Thank youjs.zip (867.2 KB)

[luftscreenmx]

or this web:
https://desarrollosinteractivos.live/filtros/

[Vladimir_PV]

браузеры работают не со всеми библиотеками
попробуйте вариант с QML
browsers do not work with all libraries
try the QML option
kamera.flp (8.7 KB)

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtMultimedia 5.12
import QtGraphicalEffects 1.12

Item {
    // Камера
    Camera {
        id: camera
        position: Camera.FrontFace
    }

    // Вывод видеопотока
    VideoOutput {
        id: videoOutput
        anchors.fill: parent
        source: camera
    }

    // Кнопки фильтров
    Button {
        id: btnFilter1
        text: "Фильтр 1"
        anchors.top: parent.top
        anchors.left: parent.left
        onClicked: {
            filter1.visible = true
            filter2.visible = false
            filter3.visible = false
        }
    }

    Button {
        id: btnFilter2
        text: "Фильтр 2"
        anchors.top: parent.top
        anchors.left: btnFilter1.right
        onClicked: {
            filter1.visible = false
            filter2.visible = true
            filter3.visible = false
        }
    }

    Button {
        id: btnFilter3
        text: "Фильтр 3"
        anchors.top: parent.top
        anchors.left: btnFilter2.right
        onClicked: {
            filter1.visible = false
            filter2.visible = false
            filter3.visible = true
        }
    }

    // Фильтры
    ShaderEffect {
        id: filter1
        anchors.fill: videoOutput
        visible: false
        vertexShader: "
            uniform highp mat4 qt_Matrix;
            attribute highp vec4 qt_Vertex;
            attribute highp vec2 qt_MultiTexCoord0;
            varying highp vec2 coord;
            void main() {
                coord = qt_MultiTexCoord0;
                gl_Position = qt_Matrix * qt_Vertex;
            }
        "
        fragmentShader: "
            uniform sampler2D source;
            uniform lowp float qt_Opacity;
            varying highp vec2 coord;
            void main() {
                lowp vec4 tex = texture2D(source, coord);
                gl_FragColor = vec4(0.5, 0.5, 0.5, qt_Opacity) * tex;
            }
        "
        property variant source: ShaderEffectSource {
            sourceItem: videoOutput
            hideSource: true
        }
    }

    ShaderEffect {
        id: filter2
        anchors.fill: videoOutput
        visible: false
        vertexShader: "
            uniform highp mat4 qt_Matrix;
            attribute highp vec4 qt_Vertex;
            attribute highp vec2 qt_MultiTexCoord0;
            varying highp vec2 coord;
            void main() {
                coord = qt_MultiTexCoord0;
                gl_Position = qt_Matrix * qt_Vertex;
            }
        "
        fragmentShader: "
            uniform sampler2D source;
            uniform lowp float qt_Opacity;
            varying highp vec2 coord;
            void main() {
                lowp vec4 tex = texture2D(source, coord);
                gl_FragColor = vec4(1.0 - tex.r, 1.0 - tex.g, 1.0 - tex.b, qt_Opacity);
            }
        "
        property variant source: ShaderEffectSource {
            sourceItem: videoOutput
            hideSource: true
        }
    }

    ShaderEffect {
        id: filter3
        anchors.fill: videoOutput
        visible: false
        vertexShader: "
            uniform highp mat4 qt_Matrix;
            attribute highp vec4 qt_Vertex;
            attribute highp vec2 qt_MultiTexCoord0;
            varying highp vec2 coord;
            void main() {
                coord = qt_MultiTexCoord0;
                gl_Position = qt_Matrix * qt_Vertex;
            }
        "
        fragmentShader: "
            uniform sampler2D source;
            uniform lowp float qt_Opacity;
            varying highp vec2 coord;
            void main() {
                lowp vec4 tex = texture2D(source, coord);
                gl_FragColor = vec4(tex.r * 0.5, tex.g * 0.5, tex.b * 0.5, qt_Opacity);
            }
        "
        property variant source: ShaderEffectSource {
            sourceItem: videoOutput
            hideSource: true
        }
    }
}