แก้ปัญหาการถูกบล็อกการเปิดกล้องใน Google Apps Script

bysemicon -
0

 

DEMO


ตัวอย่างนี้เป็นโครงสร้างแบบมืออาชีพที่นิยมใช้จริงครับ

✅ Architecture


เหมาะกับ:

  • สแกน QR
  • ถ่ายรูป
  • เช็คชื่อ
  • Upload รูป
  • ระบบลงทะเบียน

✅ STEP 1 — Google Sheet

สร้าง Sheet ชื่อ:

Data

หัวตาราง:

เวลาชื่อรูป

✅ STEP 2 — Google Apps Script Backend

เปิด:

Extensions
→ Apps Script

✅ Code.gs

const SHEET_NAME = "Data";

function doPost(e) {

  try {

    const data =
      JSON.parse(e.postData.contents);

    const sheet =
      SpreadsheetApp
      .getActiveSpreadsheet()
      .getSheetByName(SHEET_NAME);

    //-----------------------------------
    // SAVE IMAGE TO DRIVE
    //-----------------------------------

    const base64 =
      data.image
      .replace(/^data:image\/png;base64,/, "");

    const blob =
      Utilities.newBlob(
        Utilities.base64Decode(base64),
        "image/png",
        "photo.png"
      );

    const file =
      DriveApp.createFile(blob);

    file.setSharing(
      DriveApp.Access.ANYONE_WITH_LINK,
      DriveApp.Permission.VIEW
    );

    const imageUrl =
      file.getUrl();

    //-----------------------------------
    // SAVE TO SHEET
    //-----------------------------------

    sheet.appendRow([
      new Date(),
      data.name,
      imageUrl
    ]);

    return ContentService
      .createTextOutput(
        JSON.stringify({
          success:true,
          url:imageUrl
        })
      )
      .setMimeType(
        ContentService.MimeType.JSON
      );

  } catch(err) {

    return ContentService
      .createTextOutput(
        JSON.stringify({
          success:false,
          error:err.toString()
        })
      );

  }

}

✅ Deploy GAS

Deploy
→ New deployment
→ Web app

ตั้งค่า:

Execute as : Me
Who has access : Anyone


แล้ว copy URL /exec

✅ STEP 3 — Frontend HTML

ไฟล์:

index.html

✅ Frontend Code

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0">

<title>Camera App</title>

<style>

body{
  font-family:sans-serif;
  text-align:center;
  padding:20px;
}

video,canvas{
  width:100%;
  max-width:400px;
  border-radius:10px;
}

button{
  padding:12px 20px;
  margin:10px;
  font-size:18px;
}

</style>

</head>

<body>

<h2>Camera Capture</h2>

<input
  type="text"
  id="name"
  placeholder="ชื่อ">

<br><br>

<video
  id="video"
  autoplay
  playsinline>
</video>

<br>

<button onclick="startCamera()">
เปิดกล้อง
</button>

<button onclick="capture()">
ถ่ายรูป
</button>

<canvas
  id="canvas"
  style="display:none;">
</canvas>

<script>

const GAS_URL =
"YOUR_GAS_WEBAPP_URL";

const video =
document.getElementById("video");

async function startCamera(){

  try{

    const stream =
      await navigator
      .mediaDevices
      .getUserMedia({
        video:{
          facingMode:"environment"
        },
        audio:false
      });

    video.srcObject = stream;

  }catch(err){

    alert(err);

  }

}

async function capture(){

  const canvas =
    document.getElementById("canvas");

  canvas.width =
    video.videoWidth;

  canvas.height =
    video.videoHeight;

  const ctx =
    canvas.getContext("2d");

  ctx.drawImage(
    video,
    0,
    0
  );

  const image =
    canvas.toDataURL("image/png");

  const name =
    document.getElementById("name").value;

  //-----------------------------------
  // SEND TO GAS
  //-----------------------------------

  const res =
    await fetch(GAS_URL,{

      method:"POST",

      body:JSON.stringify({
        name:name,
        image:image
      })

    });

  const data =
    await res.json();

  console.log(data);

  alert("บันทึกสำเร็จ");

}

</script>

</body>
</html>

✅ STEP 4 — Deploy Frontend ฟรี

เลือกได้เลย

✅ วิธีง่ายสุด

GitHub Pages หรือ Netlify หรือ Vercel

✅ วิธี Deploy Netlify ง่ายมาก

  1. สร้างโฟลเดอร์
  2. ใส่ index.html
  3. ลากโฟลเดอร์ลง Netlify
  4. ได้ URL ทันที

✅ ข้อดีของโครงสร้างนี้

Featureใช้งานได้
Camera✅
QR Scanner✅
Upload รูป✅
Mobile✅
iPhone✅
Android✅
Google Sheet✅
Google Drive✅



Download




Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า