Google Apps Script(GAS)を使ってWebアプリからカメラを操作したいけれど、権限の許可画面が表示されず撮影できない場合があります。本記事では、GASでカメラにアクセスする方法とよくある権限トラブルの対処法を解説します。
GASでカメラにアクセスする基本
まず、GASのWebアプリでカメラにアクセスするには、HTMLサービスを使ってブラウザ側でJavaScriptのMediaDevices APIを呼び出す必要があります。
GAS側では、doGet()関数でHTMLテンプレートを返すだけで十分です。以下の例では、ユーザーのカメラ映像を表示する基本構造を示します。
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}MediaDevices APIを使ったカメラ表示の例
HTML側でカメラ映像を取得するには、navigator.mediaDevices.getUserMediaを使用します。例えば次のように書きます。
<video id="camera" autoplay playsinline></video>
<script>
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => { document.getElementById('camera').srcObject = stream; })
.catch(err => { console.error('カメラアクセスに失敗:', err); });
</script>この方法で、ブラウザがカメラアクセスの許可を求める画面を表示します。
よくある権限トラブルと解決法
権限画面が表示されない原因としては、HTTPSでアクセスしていない、GASのWebアプリが正しく公開されていない、またはブラウザの設定でカメラがブロックされている場合があります。
解決策としては、まずWebアプリを「自分以外のユーザーにもアクセス可能」に設定し、HTTPSでアクセスしてください。また、ブラウザのカメラ権限を確認し、必要に応じて許可します。
カメラ撮影の保存方法
カメラ映像を取得したら、GAS側でサーバーに保存することも可能です。例えば、canvas.toDataURL()で画像データを取得し、google.script.runを使ってGAS関数に渡して保存します。
こうすることで、ユーザーが撮影した写真をGoogle Driveやスプレッドシートに自動で保存することができます。
セキュリティと注意点
ブラウザのカメラアクセスはセキュリティ上重要な操作です。HTTPS必須であり、ユーザーに明確に許可を求めるUIを用意しましょう。
また、GASはサーバー側でカメラ映像を直接取得することはできないため、必ずクライアント側で取得しサーバーに送信するフローを理解しておく必要があります。
まとめ
GASでWebアプリからカメラ撮影するには、HTMLサービスとMediaDevices APIを組み合わせることが基本です。権限トラブルが起きた場合は、HTTPS、Webアプリ公開設定、ブラウザ権限を確認してください。
さらに、撮影した画像はcanvas.toDataURL()を利用してGASに渡すことで保存可能です。これらの手順を踏めば、GASでカメラ撮影がスムーズに行えます。
コメント