Я создаю API для веб-просмотра, поток, который я ударил API отправить JSON и API обработать его. После успешного завершения API json API выдает полный HTML, и я загружаю HTML в iFrame, HTML-код - это запрос камеры на захват, но в ответ выдается «Ошибка Webcam.js: не найден поддерживаемый интерфейс веб-камеры». но когда я получаю прямой доступ к ссылке (без iFrame), он может обнаружить кулачок и открыть. HTML, который я использую, чтобы поразить API:
<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>
и исходный HTML на API:
<!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>
что-нибудь предлагалось?