Я использую Google Picker API в Google Script (HTML) - для захвата изображений с веб-камеры,
Но он показывает только пустой экран .
Я получил ошибку - Отказался отображать [url] в кадре, потому что он установил 'X-Frame-Options' на 'same origin'.
picker.html
<code><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Picker Example</title>
<style>
body {
display: flex
}
#views {
border-collapse: collapse;
margin: 10px;
}
#views tr {
border: 0;
border-top: 1px solid #e0e0e0;
}
#views td {
border-bottom:1px solid #e0e0e0;
border-spacing: 0;
padding: 5px
}
</style>
<script type="text/javascript">
// The Browser API key obtained from the Google Developers Console.
var developerKey = '*******Developer Key Here***********';
// The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
var clientId = "*******Client ID ***********";
// Scope to use to access user's photos.
var scope = [
'https://www.googleapis.com/auth/drive',
'https://www.googleapis.com/auth/photos',
'https://www.googleapis.com/auth/youtube'
];
var authApiLoaded = false;
var pickerApiLoaded = false;
var oauthToken;
var viewIdForhandleAuthResult;
// Use the API Loader script to load google.picker and gapi.auth.
function onApiLoad() {
gapi.load('auth', {'callback': onAuthApiLoad});
gapi.load('picker', {'callback': onPickerApiLoad});
}
function onAuthApiLoad() {
authApiLoaded = true;
}
function onPickerApiLoad() {
pickerApiLoaded = true;
}
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
oauthToken = authResult.access_token;
createPicker(viewIdForhandleAuthResult, true);
}
}
// Create and render a Picker object for picking user Photos.
function createPicker(viewId, setOAuthToken) {
if (authApiLoaded && pickerApiLoaded) {
var picker;
var origin = (window.location.protocol + '//' + window.location.host)
if(authApiLoaded && oauthToken && setOAuthToken) {
picker = new google.picker.PickerBuilder(origin).
addView(viewId).
setOAuthToken(oauthToken).
setDeveloperKey(developerKey).
setCallback(pickerCallback).
build();
console.log('picker if',picker)
} else {
picker = new google.picker.PickerBuilder().
addView(viewId).
setDeveloperKey(developerKey).
setCallback(pickerCallback).
build();
console.log('picker else',picker)
}
picker.setVisible(true);
}
}
// A simple callback implementation.
function pickerCallback(data) {
var url = 'nothing';
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
var doc = JSON.stringify(data[google.picker.Response.DOCUMENTS][0], null, " ");
}
var message = 'You picked: <br>' + doc;
document.getElementById('result').innerHTML = message;
}
</script>
</head>
<body>
<a href="https://github.com/howdy39/google-picker-api-demo"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<table id="views">
<tr>
<td rowspan="3">Other(require authorization)</td>
<td><a href="#WEBCAM" target="_parent" id="WEBCAM">Webcam photos.</a></td>
</tr>
</table>
<pre id="result">
<! - Скрипт Google API Loader. ->
Array.prototype.forEach.call (document.querySelectorAll ('# views a'), function (ele) {
ele.onclick = function () {
var viewIds = {
"WEBCAM": google.picker.ViewId.WEBCAM,
}
var id = this.id;
var viewId = viewIds [id];
var setOAuthToken = true;
if (id === 'IMAGE_SEARCH' || id === 'MAPS' || id === 'VIDEO_SEARCH') {
setOAuthToken = false;
createPicker (viewId, setOAuthToken);
} еще {
if (authApiLoaded &&! oauthToken) {
viewIdForhandleAuthResult = viewId;
window.gapi.auth.authorize (
{
'client_id': clientId,
«объем»: объем,
«немедленный»: ложный
},
handleAuthResult
);
} еще {
createPicker (viewId, setOAuthToken);
}
}
вернуть ложь;
}
});
In code.gs
function doGet(e) {
return HtmlService
.createHtmlOutputFromFile('picker.html')
.setTitle("AMB Form")
}
Я уже настроил происхождение JavaScript на консоли разработчика Google.
Я следовал - https://github.com/howdy39/google-picker-api-demo