BubbleCam/camera.js

let cameraStream = null;
let currentMode = 'camera';
let avatarData = null;

const runCode = async () => {
  const cameraElement = document.querySelector("#camera");

  const startCamera = async () => {

    try {
      const permissions = await navigator.permissions.query({
        name: "camera",
      });

      if (permissions.state === "prompt") {
        await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
        return;
      }

      if (permissions.state === "denied") {
        console.log("Camera permissions denied, falling back to avatar");
        currentMode = 'avatar';
        displayAvatar();
        return;
      }

      
      if (currentMode === 'avatar') {
        displayAvatar();
        return;
      }

      const videoElement = document.createElement("video");
      videoElement.setAttribute("id", "cam");
      videoElement.setAttribute(
        "style",
        `
        height: 200px;
        width: 200px;
        border-radius: 100px;
        transform: scaleX(-1);
        object-fit: cover;
        `
      );
      videoElement.setAttribute("autoplay", true);
      videoElement.setAttribute("muted", true);

      cameraStream = await navigator.mediaDevices.getUserMedia({
        audio: false,
        video: {
          width: { ideal: 400 },
          height: { ideal: 400 },
          facingMode: "user"
        }
      });

      videoElement.srcObject = cameraStream;
      
      cameraElement.innerHTML = '';
      cameraElement.appendChild(videoElement);
    } catch (err) {
      console.error("Error accessing camera:", err);
      currentMode = 'avatar';
      displayAvatar();
    }
  };

  const displayAvatar = () => {
    if (cameraStream) {
      stopCamera();
    }

    const avatarImg = document.createElement("img");
    avatarImg.setAttribute("id", "avatar");
    avatarImg.setAttribute(
      "style",
      `
      height: 200px;
      width: 200px;
      border-radius: 100px;
      object-fit: cover;
      background-color: #5d3fbd;
      `
    );
    
   
    if (avatarData) {
      avatarImg.src = avatarData;
    } else {
      
      avatarImg.src = 'avatar.png';
      avatarImg.onerror = () => {
     
        avatarImg.style.backgroundColor = '#5d3fbd';
        avatarImg.style.display = 'flex';
        avatarImg.style.justifyContent = 'center';
        avatarImg.style.alignItems = 'center';
        avatarImg.src = '';
        
        // Create a text element for initials
        const initialsElem = document.createElement('div');
        initialsElem.textContent = 'BC';
        initialsElem.style.color = 'white';
        initialsElem.style.fontSize = '60px';
        initialsElem.style.fontWeight = 'bold';
        
        cameraElement.innerHTML = '';
        cameraElement.appendChild(initialsElem);
      };
    }
    
    
    cameraElement.innerHTML = '';
    cameraElement.appendChild(avatarImg);
  };


  const stopCamera = () => {
    if (cameraStream) {
      cameraStream.getTracks().forEach(track => {
        track.stop();
        console.log("Camera track stopped:", track);
      });
      cameraStream = null;

      const cameraElement = document.getElementById("purple-camera");
      if (cameraElement) {
        cameraElement.remove();
      }
      const videoElement = document.getElementById("cam");
      if (videoElement) {
        videoElement.remove();
      }
    }
  };

  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === "stop-camera") {
      stopCamera();
      sendResponse({ status: "camera-stopped" });
    }
    else if (message.type === "mode-change") {
      currentMode = message.mode;
      if (currentMode === 'camera') {
        startCamera();
      } else {
        displayAvatar();
      }
      sendResponse({ status: "mode-changed" });
    }
    else if (message.type === "avatar-update") {
      avatarData = message.avatarData;
      if (currentMode === 'avatar') {
        displayAvatar();
      }
      sendResponse({ status: "avatar-updated" });
    }
  });

 
  chrome.storage.local.get(['mode', 'avatarData'], function(data) {
    currentMode = data.mode || 'camera';
    avatarData = data.avatarData;
    
    if (currentMode === 'camera') {
      startCamera();
    } else {
      displayAvatar();
    }
  });
};


document.addEventListener('DOMContentLoaded', runCode);