GASでコードを作成し、Webアプリとしてデプロイする。
・カメラが起動する
・Take Photoを押すと、写真がグーグルドライブに保存される
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('Webcam App');
}
function saveImage(imageData) {
var decoded = Utilities.base64Decode(imageData.split(',')[1]);
var blob = Utilities.newBlob(decoded, 'image/png', 'webcam_image.png');
var folder = DriveApp.createFolder('Webcam Images');
var file = folder.createFile(blob);
return file.getUrl();
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>Webcam App</title>
</head>
<body>
<h1>Webcam App</h1>
<div id="error-message" style="color: red;"></div>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Take Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<div id="save-message"></div>
<script>
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById('snap');
const errorMessage = document.getElementById('error-message');
const saveMessage = document.getElementById('save-message');
const context = canvas.getContext('2d');
function startWebcam() {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
video.srcObject = stream;
errorMessage.textContent = '';
})
.catch(function(err) {
console.error("An error occurred: " + err);
errorMessage.textContent = "カメラにアクセスできません。権限を確認してください。";
});
}
startWebcam();
snap.addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
const imageData = canvas.toDataURL('image/png');
google.script.run
.withSuccessHandler(function(url) {
saveMessage.innerHTML = '画像が保存されました。<a href="' + url + '" target="_blank">こちら</a>から確認できます。';
})
.withFailureHandler(function(error) {
saveMessage.textContent = '画像の保存に失敗しました: ' + error;
})
.saveImage(imageData);
});
</script>
</body>
</html>
