index.html

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Capture Photo</title>
  <style>
    /* Video display and styling */
    #video {
      width: 100%;
      height: auto;
      object-fit: cover;
      border: 2px solid #ccc;
    }

    #capture {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      background-color: #007BFF;
      color: white;
      border: none;
      font-size: 16px;
      cursor: pointer;
    }

    #capture:hover {
      background-color: #0056b3;
    }

    #capturedImage {
      max-width: 100%;
      margin-top: 20px;
      display: none;
    }

    #recapture {
      display: none;
      padding: 10px 20px;
      background-color: #28a745;
      color: white;
      border: none;
      font-size: 16px;
      cursor: pointer;
    }

    #recapture:hover {
      background-color: #218838;
    }

    .container {
      text-align: center;
      max-width: 600px;
      margin: 0 auto;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f4f4f9;
    }
  </style>
</head>
<body>

  <h1>Capture Photo</h1>
  <div class="container">
    <video id="video" autoplay muted playsinline></video>
    <button id="capture">Capture</button>
    <button id="swapCamera">Swap Camera</button>
    <canvas id="canvas" style="display:none;"></canvas>
    <img id="capturedImage" />
    <button id="recapture">Re-capture</button>
  </div>

  <script>
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    const captureButton = document.getElementById('capture');
    const swapCameraButton = document.getElementById('swapCamera');
    const capturedImage = document.getElementById('capturedImage');
    const recaptureButton = document.getElementById('recapture');

    let currentStream;
    let currentDeviceId = null;
    let videoWidth = 640; // Default video resolution
    let videoHeight = 480;

    // Function to start the video stream with higher resolution
    function startVideoStream(deviceId = null) {
      const constraints = {
        video: {
          deviceId: deviceId ? { exact: deviceId } : undefined,
          width: { ideal: 1920 }, // Request a higher resolution
          height: { ideal: 1080 }, // Request a higher resolution
        }
      };

      // Stop current stream if exists
      if (currentStream) {
        const tracks = currentStream.getTracks();
        tracks.forEach(track => track.stop());
      }

      navigator.mediaDevices.getUserMedia(constraints)
        .then(stream => {
          console.log('Camera stream started');
          currentStream = stream;
          video.srcObject = stream;

          // Ensure video starts playing once metadata is loaded
          video.onloadedmetadata = function () {
            console.log('Video metadata loaded, starting video playback');
            video.play();
            videoWidth = video.videoWidth;
            videoHeight = video.videoHeight;

            // Set canvas size to match video size
            canvas.width = videoWidth;
            canvas.height = videoHeight;
          };

          video.onerror = function (error) {
            console.error('Video stream error: ', error);
            alert('Error with video stream: ' + error.message);
          };
        })
        .catch(error => {
          console.error('Error accessing camera: ', error);
          alert('Error accessing camera: ' + error.message);
        });
    }

    // Function to get the list of available video devices (front/back cameras)
    function getVideoDevices() {
      return navigator.mediaDevices.enumerateDevices()
        .then(devices => {
          const videoDevices = devices.filter(device => device.kind === 'videoinput');
          return videoDevices;
        })
        .catch(err => {
          console.error('Error enumerating devices: ', err);
          alert('Error enumerating devices: ' + err.message);
        });
    }

    // Start video with default camera (usually front-facing)
    getVideoDevices().then(videoDevices => {
      if (videoDevices.length === 0) {
        alert('No video devices found.');
        return;
      }

      // Get the first video device (typically the front camera)
      currentDeviceId = videoDevices[0].deviceId;
      startVideoStream(currentDeviceId);
    });

    // Button to capture the image
    captureButton.addEventListener('click', () => {
      if (video.srcObject) {
        // Ensure the canvas matches the resolution of the video stream
        canvas.width = videoWidth;
        canvas.height = videoHeight;
        context.drawImage(video, 0, 0, canvas.width, canvas.height);

        // Convert to PNG image with high quality
        const imageData = canvas.toDataURL('image/png', 1.0); // High quality
        capturedImage.src = imageData;
        capturedImage.style.display = 'block';
        video.style.display = 'none';
        captureButton.style.display = 'none';
        recaptureButton.style.display = 'inline-block';  // Show the recapture button
      } else {
        alert('Video stream is not available.');
      }
    });

    // Button to swap the camera
    swapCameraButton.addEventListener('click', () => {
      getVideoDevices().then(videoDevices => {
        if (videoDevices.length < 2) {
          alert('No additional camera available.');
          return;
        }

        // Prevent fullscreen on iOS Safari/Chrome
        exitFullscreen();

        // Find the other camera (swap between the first and second device)
        const nextDeviceId = videoDevices.find(device => device.deviceId !== currentDeviceId).deviceId;
        currentDeviceId = nextDeviceId;

        // Restart the stream with the new camera
        startVideoStream(currentDeviceId);
      });
    });

    // Exit fullscreen if the browser has triggered it (for iOS Safari/Chrome)
    function exitFullscreen() {
      if (document.fullscreenElement || document.webkitFullscreenElement) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    }

    // Prevent fullscreen on touch events for iOS Safari/Chrome
    function preventFullscreen(event) {
      if (event.target === video) {
        event.preventDefault(); // Prevent fullscreen
      }
    }

    // Attach listeners to prevent fullscreen
    video.addEventListener('touchstart', preventFullscreen, { passive: false });
    video.addEventListener('click', preventFullscreen, { passive: false });

    // Ensure the video keeps playing after exiting fullscreen
    video.onfullscreenchange = function () {
      if (!document.fullscreenElement && !document.webkitFullscreenElement) {
        video.play();
      }
    };

    // Button to re-capture the image
    recaptureButton.addEventListener('click', () => {
      capturedImage.style.display = 'none';
      captureButton.style.display = 'inline-block';
      recaptureButton.style.display = 'none';
      video.style.display = 'block';
    });
  </script>

</body>
</html>
-->

<!-- CAN AUTO UPLOAD GOOGLE ACC THAT I LOGIN TO
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Capture and Upload Photo to Google Drive</title>
  <style>
    /* Styles here */
    #video, #capturedImage {
      width: 100%;
      max-width: 600px;
      margin: 10px auto;
      display: block;
      border: 1px solid #ccc;
    }
    #controls {
      text-align: center;
      margin: 20px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      margin: 5px;
    }
  </style>
</head>
<body>

  <h1>Capture and Upload Photo to Google Drive</h1>
  <div id="controls">
    <video id="video" autoplay playsinline></video>
    <button id="capture">Capture</button>
    <button id="swapCamera">Swap Camera</button>
    <canvas id="canvas" style="display:none;"></canvas>
    <img id="capturedImage" style="display:none;" />
    <button id="recapture" style="display:none;">Re-capture</button>
    <button id="authButton" onclick="handleAuthClick()">Sign In with Google</button>
  </div>

  // Include GIS client library
  <script src="https://accounts.google.com/gsi/client" async defer></script>
  <script src="https://apis.google.com/js/api.js"></script>

  <script>
    const CLIENT_ID = '236823481359-hec318cfi6l4dlori28m4o71b6q46ka7.apps.googleusercontent.com';
    const API_KEY = 'AIzaSyA0tbk_qHuSg1PfZEEw_kAftrrgUVdOBpY';
    const SCOPES = 'https://www.googleapis.com/auth/drive.file';

    let currentStream = null;
    let currentDeviceId = null;
    let tokenClient;
    let videoWidth = 640;
    let videoHeight = 480;

    // Initialize Google API client for Drive access
    function initGoogleAPI() {
      gapi.load('client', () => {
        gapi.client.init({
          apiKey: API_KEY,
          discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
        }).then(() => {
          console.log("Google API client loaded successfully.");
        }).catch(error => {
          console.error("Error initializing Google API client", error);
        });
      });
    }

    // Initialize the token client for OAuth
    function initTokenClient() {
      tokenClient = google.accounts.oauth2.initTokenClient({
        client_id: CLIENT_ID,
        scope: SCOPES,
        callback: (tokenResponse) => {
          console.log('Token acquired:', tokenResponse);
        },
      });
    }

    function handleAuthClick() {
      tokenClient.requestAccessToken({ prompt: '' });
    }

    function startVideoStream(deviceId = null) {
      const constraints = {
        video: {
          deviceId: deviceId ? { exact: deviceId } : undefined,
          width: { ideal: 1920 },
          height: { ideal: 1080 },
        }
      };

      // Stop previous video stream if any
      if (currentStream) {
        currentStream.getTracks().forEach(track => track.stop());
      }

      navigator.mediaDevices.getUserMedia(constraints)
        .then(stream => {
          currentStream = stream;
          document.getElementById('video').srcObject = stream;

          document.getElementById('video').onloadedmetadata = function() {
            videoWidth = this.videoWidth;
            videoHeight = this.videoHeight;
            this.play();
          };
        })
        .catch(error => {
          console.error('Error accessing camera:', error);
          alert('Error accessing camera: ' + error.message);
        });
    }

    function swapCamera() {
      navigator.mediaDevices.enumerateDevices()
        .then(devices => {
          const videoDevices = devices.filter(device => device.kind === 'videoinput');
          if (videoDevices.length < 2) {
            alert('No additional camera available.');
            return;
          }
          // Toggle between available cameras
          const nextDevice = videoDevices.find(device => device.deviceId !== currentDeviceId);
          currentDeviceId = nextDevice.deviceId;
          startVideoStream(currentDeviceId);
        })
        .catch(error => {
          console.error('Error enumerating devices:', error);
        });
    }

    function captureImage() {
      const canvas = document.getElementById('canvas');
      const context = canvas.getContext('2d');
      canvas.width = videoWidth;
      canvas.height = videoHeight;
      context.drawImage(document.getElementById('video'), 0, 0, canvas.width, canvas.height);

      const imageData = canvas.toDataURL('image/png');
      document.getElementById('capturedImage').src = imageData;
      document.getElementById('capturedImage').style.display = 'block';
      document.getElementById('video').style.display = 'none';
      document.getElementById('capture').style.display = 'none';
      document.getElementById('recapture').style.display = 'inline-block';

      uploadToGoogleDrive(imageData);
    }

    function uploadToGoogleDrive(imageData) {
      if (!gapi.client) {
        console.log('Google API client not initialized');
        alert('Please wait until Google API is initialized');
        return;
      }

      const boundary = '-------314159265358979323846';
      const delimiter = "\r\n--" + boundary + "\r\n";
      const closeDelimiter = "\r\n--" + boundary + "--";

      const metadata = {
        'name': 'captured_image.png',
        'mimeType': 'image/png'
      };

      const base64Data = imageData.split(',')[1];
      const multipartRequestBody =
        delimiter +
        'Content-Type: application/json; charset=UTF-8\r\n\r\n' +
        JSON.stringify(metadata) +
        delimiter +
        'Content-Type: image/png\r\n' +
        'Content-Transfer-Encoding: base64\r\n\r\n' +
        base64Data +
        closeDelimiter;

      gapi.client.request({
        'path': '/upload/drive/v3/files?uploadType=multipart',
        'method': 'POST',
        'headers': {
          'Authorization': `Bearer ${gapi.auth.getToken().access_token}`,
          'Content-Type': `multipart/related; boundary="${boundary}"`,
        },
        'body': multipartRequestBody
      }).then(response => {
        console.log('File uploaded successfully', response);
        alert('Image uploaded to Google Drive!');
      }).catch(error => {
        console.error('Error uploading file', error);
      });
    }

    document.getElementById('capture').addEventListener('click', captureImage);
    document.getElementById('swapCamera').addEventListener('click', swapCamera);
    document.getElementById('recapture').addEventListener('click', () => {
      document.getElementById('capturedImage').style.display = 'none';
      document.getElementById('capture').style.display = 'inline-block';
      document.getElementById('recapture').style.display = 'none';
      document.getElementById('video').style.display = 'block';
    });

    window.onload = function() {
      initGoogleAPI();
      initTokenClient();
      navigator.mediaDevices.enumerateDevices().then(devices => {
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        if (videoDevices.length > 0) {
          currentDeviceId = videoDevices[0].deviceId;
          startVideoStream(currentDeviceId);
        } else {
          alert('No video devices found.');
        }
      });
    };
  </script>

</body>
</html>
CAN AUTO UPLOAD GOOGLE ACC THAT I LOGIN TO-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Capture and Upload Photo to Centralized Imgur Account</title>
  <style>
    /* Your existing styles */
  </style>
</head>
<body>

  <h1>Capture and Upload Photo to Centralized Imgur Account</h1>
  <div class="container">
    <video id="video" autoplay muted playsinline></video>
    <button id="capture">Capture</button>
    <button id="swapCamera">Swap Camera</button>
    <canvas id="canvas" style="display:none;"></canvas>
    <img id="capturedImage" />
    <button id="recapture">Re-capture</button>
  </div>

  <script>
    // Imgur client ID and OAuth URLs
    const CLIENT_ID = '80cfe0d2cc13ec4'; // Replace with your Imgur Client ID
    const CLIENT_SECRET = '62f9e7a3edceea3f2df1e936ad32d5bd2b6e97e7'; // Replace with your Imgur Client Secret
    const OAUTH_URL = 'https://api.imgur.com/oauth2/authorize';
    const TOKEN_URL = 'https://api.imgur.com/oauth2/token';
    const SCOPES = 'account'; // Required scope to upload images to the account

    let accessToken = null;
    let currentStream;
    let videoWidth = 640;
    let videoHeight = 480;

    // Step 1: Redirect user to Imgur to authenticate and authorize the app
    function redirectToImgurAuth() {
      const redirectUri = encodeURIComponent('https://crystalfied.github.io'); // Update with your callback URL
      const authUrl = `${OAUTH_URL}?client_id=${CLIENT_ID}&response_type=code&state=123&scope=${SCOPES}&redirect_uri=${redirectUri}`;
      window.location.href = authUrl;
    }

    // Step 2: Handle the OAuth callback and exchange code for access token
    function getAccessTokenFromCode(code) {
      const data = new URLSearchParams();
      data.append('client_id', CLIENT_ID);
      data.append('client_secret', CLIENT_SECRET);
      data.append('code', code);
      data.append('grant_type', 'authorization_code');
      data.append('redirect_uri', 'https://crystalfied.github.io'); // Same as the callback URL

      fetch(TOKEN_URL, {
        method: 'POST',
        body: data
      })
      .then(response => response.json())
      .then(data => {
        accessToken = data.access_token;
        console.log('Access token received:', accessToken);
        alert('Authentication successful!');
      })
      .catch(error => {
        console.error('Error exchanging code for token:', error);
        alert('Failed to authenticate.');
      });
    }

    // Step 3: Upload image to the centralized Imgur account
    function uploadToImgur(imageData) {
      if (!accessToken) {
        alert('You need to authenticate first!');
        return;
      }

      fetch('https://api.imgur.com/3/upload', {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
        body: new FormData().append('image', imageData)
      })
      .then(response => response.json())
      .then(data => {
        console.log('Image uploaded successfully:', data);
        alert('Image uploaded to the centralized Imgur account!');
      })
      .catch(error => {
        console.error('Error uploading image:', error);
        alert('Failed to upload image.');
      });
    }

    // Capture image from video
    document.getElementById('capture').addEventListener('click', () => {
      const canvas = document.getElementById('canvas');
      const context = canvas.getContext('2d');
      canvas.width = videoWidth;
      canvas.height = videoHeight;
      context.drawImage(document.getElementById('video'), 0, 0, canvas.width, canvas.height);

      // Convert to Blob (form data for uploading)
      canvas.toBlob(blob => {
        uploadToImgur(blob); // Pass the Blob to upload function
      }, 'image/png');

      // Display the captured image
      const imageData = canvas.toDataURL('image/png');
      document.getElementById('capturedImage').src = imageData;
      document.getElementById('capturedImage').style.display = 'block';
      document.getElementById('video').style.display = 'none';
      document.getElementById('capture').style.display = 'none';
      document.getElementById('recapture').style.display = 'inline-block';
    });

    // Handle Re-capture
    document.getElementById('recapture').addEventListener('click', () => {
      document.getElementById('capturedImage').style.display = 'none';
      document.getElementById('capture').style.display = 'inline-block';
      document.getElementById('recapture').style.display = 'none';
      document.getElementById('video').style.display = 'block';
    });

    // Start the video stream
    function startVideoStream() {
      const constraints = { video: { width: 1920, height: 1080 } };
      navigator.mediaDevices.getUserMedia(constraints)
        .then(stream => {
          currentStream = stream;
          document.getElementById('video').srcObject = stream;
        })
        .catch(error => {
          console.error('Error accessing camera: ', error);
          alert('Error accessing camera: ' + error.message);
        });
    }

    // Swap camera functionality (front/back)
    document.getElementById('swapCamera').addEventListener('click', () => {
      navigator.mediaDevices.enumerateDevices().then(devices => {
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        const nextDeviceId = videoDevices[1]?.deviceId || videoDevices[0]?.deviceId;
        startVideoStream(nextDeviceId);
      });
    });

    // Initialize video stream on page load
    window.onload = function() {
      startVideoStream();

      // Check if there's an authorization code in the URL
      const urlParams = new URLSearchParams(window.location.search);
      const code = urlParams.get('code');

      // If there's an authorization code, exchange it for an access token
      if (code) {
        getAccessTokenFromCode(code);
      } else {
        // If no access token is found, prompt for authentication
        redirectToImgurAuth();
      }
    };
  </script>

</body>
</html>