Question

我为webview创建API，流程是我被API发送json和API处理它。在API成功处理之后，JSON API将提供完整的HTML，然后将HTML加载到iFrame上，该html代码是请求摄像头进行捕获，但响应为“ Webcam.js错误：未找到受支持的摄像头界面”。但是当我直接访问链接（没有iFrame）时，它可以检测到凸轮并打开。我用来打API的HTML：

<iframe  id="iframeHtml" width="100%" height="800px" allow="geolocation; microphone; camera"></iframe>
    <script type="text/javascript">

        $('#submit-btn').click(function (e) {
            var url = "Link";
            var token = $("#token").val();

            var userid = $("#userid").val();
            var useremail = $("#user_email").val();
            var password = $("#user_pwd").val();

            var jsonfield_data = "{\"JSONFile\": \n" +
                "{\"userid\": \""+userid+"\", \n" +
                "\"pwd\":\""+password+"\", \"email_user\": \""+useremail+"\" \n" +
                "}\n" +
                "}";

            var formData =  new FormData();

            formData.append('jsonfield', jsonfield_data);

            $.ajax({
                type: "POST",
                url: url,
                accepts: "application/json; text/plain,text/html, */*",

                dataType: "html",

                crossDomain: true,
                data: {
                    jsonfield: jsonfield_data
                },
                // data: formData,
                headers: {
                   // "Authorization": "Bearer " + token,
                    'Access-Control-Allow-Credentials' : true,
                    'Access-Control-Allow-Origin':'*',
                    'Access-Control-Allow-Methods':'GET',
                    'Access-Control-Allow-Headers':'text/html',

                },

                beforeSend: function (jqxhr) {
                    console.log(this.headers);
                },
                success: function (data) {
                    console.log(data);
                     document.getElementById("iframeHtml").src = 'data:text/html;charset=utf-8,' +  encodeURIComponent(data);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Cannot send Cross Domain AJAX requests: " + jqXHR.status);
                    document.getElementById("iframeHtml").src = 'data:text/html;charset=utf-8,' +  encodeURIComponent(jqXHR.responseText);
                }
            });
        })
    </script>

以及API上的源HTML：

<!doctype html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>WebcamJS Test Page</title>
    <style type="text/css">
        body { font-family: Helvetica, sans-serif; }
        h2, h3 { margin-top:0; }
        form { margin-top: 15px; }
        form > input { margin-right: 15px; }
        #results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
    </style>
</head>
<body>
    <div id="results"></div>


    <div id="my_camera"></div>

    <!-- First, include the Webcam.js JavaScript Library -->
    <script type="text/javascript" src="../js/webcam.min.js"></script>

    <!-- Configure a few settings and attach camera -->
    <script language="JavaScript">
        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach( '#my_camera' );
    </script>

    <!-- A button for taking snaps -->
    <form>
        <input type=button value="Take Snapshot" onClick="take_snapshot()">
    </form>

    <!-- Code to handle taking the snapshot and displaying it locally -->
    <script language="JavaScript">
        function take_snapshot() {
            // take snapshot and get image data
            Webcam.snap( function(data_uri) {
                // display results in page
                document.getElementById('results').innerHTML = 
                    '<h2>Here is your image:</h2>' + 
                    '<img src="'+data_uri+'"/>';
            } );
        }
    </script>

</body>
</html>

有没有建议？

在iFrame上加载HTML来访问相机用户

0 个答案: