diff --git a/package-lock.json b/package-lock.json index 91c0852..354c1fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@radix-ui/react-slot": "^1.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "color-2-name": "^1.4.4", "lucide-react": "^0.441.0", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -2521,6 +2522,16 @@ "node": ">=6" } }, + "node_modules/color-2-name": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/color-2-name/-/color-2-name-1.4.4.tgz", + "integrity": "sha512-CSF+PANU5YSZYviiU88GJBeJADD4g9mydxLRMYtMEqVxhcLyl72b6PkMQnvomZyUZZLbPhfXs42QZcR0We4JOA==", + "license": "ISC", + "engines": { + "node": ">=14.0.0", + "npm": ">=6.0.0" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", diff --git a/package.json b/package.json index 0df92a2..00f48c0 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@radix-ui/react-slot": "^1.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "color-2-name": "^1.4.4", "lucide-react": "^0.441.0", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/src/components/video-feed.tsx b/src/components/video-feed.tsx index cb182b1..dbf64e8 100644 --- a/src/components/video-feed.tsx +++ b/src/components/video-feed.tsx @@ -1,6 +1,7 @@ import { useEffect, useRef, useState, MouseEvent } from "react"; import { Button } from "./ui/button"; import { SwitchCamera } from "lucide-react"; +import { closest } from "color-2-name"; function VideoFeed() { const videoRef = useRef(null); @@ -52,7 +53,8 @@ function VideoFeed() { 1, 1 ).data; - const color = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`; + let [r, g, b] = pixelData; + const color = `rgb(${r}, ${g}, ${b})`; setPixelColor(color); } } @@ -119,6 +121,7 @@ function VideoFeed() { Pixel Coordinates: ({coordinates.x}, {coordinates.y})

Pixel Color: {pixelColor}

+

Closest: {`${closest(pixelColor).name}`}

);