141 lines
3.5 KiB
JavaScript
141 lines
3.5 KiB
JavaScript
let cameraStream = null;
|
|
let currentMode = 'camera';
|
|
let avatarData = null;
|
|
|
|
const runCode = async () => {
|
|
const cameraElement = document.querySelector("#camera");
|
|
|
|
const startCamera = async () => {
|
|
// Check permissions first
|
|
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") {
|
|
alert("Camera permissions denied");
|
|
return;
|
|
}
|
|
|
|
// Only proceed with camera if we're in camera mode
|
|
if (currentMode === 'avatar') {
|
|
displayAvatar();
|
|
return;
|
|
}
|
|
|
|
const videoElement = document.createElement("video");
|
|
videoElement.setAttribute("id", "cam");
|
|
videoElement.setAttribute(
|
|
"style",
|
|
`
|
|
height: 200px;
|
|
border-radius: 100px;
|
|
transform: scaleX(-1);
|
|
`
|
|
);
|
|
videoElement.setAttribute("autoplay", true);
|
|
videoElement.setAttribute("muted", true);
|
|
|
|
try {
|
|
cameraStream = await navigator.mediaDevices.getUserMedia({
|
|
audio: false,
|
|
video: true,
|
|
});
|
|
|
|
videoElement.srcObject = cameraStream;
|
|
|
|
// Clear any existing content
|
|
cameraElement.innerHTML = '';
|
|
cameraElement.appendChild(videoElement);
|
|
} catch (err) {
|
|
console.error("Error accessing camera:", err);
|
|
// Fallback to avatar if camera fails
|
|
displayAvatar();
|
|
}
|
|
};
|
|
|
|
const displayAvatar = () => {
|
|
// Stop any existing camera stream
|
|
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;
|
|
`
|
|
);
|
|
avatarImg.src = avatarData || 'default-avatar.png';
|
|
|
|
// Clear any existing content
|
|
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();
|
|
}
|
|
}
|
|
};
|
|
|
|
// Message listeners for camera/avatar control
|
|
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" });
|
|
}
|
|
});
|
|
|
|
// Initialize based on saved mode
|
|
chrome.storage.local.get(['mode', 'avatarData'], function(data) {
|
|
currentMode = data.mode || 'camera';
|
|
avatarData = data.avatarData;
|
|
|
|
if (currentMode === 'camera') {
|
|
startCamera();
|
|
} else {
|
|
displayAvatar();
|
|
}
|
|
});
|
|
};
|
|
|
|
runCode(); |