{"id":21965319,"url":"https://github.com/bytebigboss/mediapicker","last_synced_at":"2026-04-14T04:31:59.389Z","repository":{"id":240555842,"uuid":"802954425","full_name":"ByteBigBoss/MediaPicker","owner":"ByteBigBoss","description":"The MediaPicker project is a comprehensive solution designed to enable users to capture media (camera, audio, and speaker input) from their devices and apply filters to videos. This project aims to provide a robust and flexible framework for integrating media capturing and processing capabilities into various applications.","archived":false,"fork":false,"pushed_at":"2024-07-01T21:21:23.000Z","size":10923,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T07:45:30.943Z","etag":null,"topics":["javascript","media","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ByteBigBoss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-19T17:48:33.000Z","updated_at":"2024-07-01T21:21:27.000Z","dependencies_parsed_at":"2024-11-29T12:38:31.785Z","dependency_job_id":"8e260d59-b930-4939-b8bc-341b4e2dce6b","html_url":"https://github.com/ByteBigBoss/MediaPicker","commit_stats":null,"previous_names":["bytebigboss/mediapicker"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ByteBigBoss/MediaPicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ByteBigBoss%2FMediaPicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ByteBigBoss%2FMediaPicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ByteBigBoss%2FMediaPicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ByteBigBoss%2FMediaPicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ByteBigBoss","download_url":"https://codeload.github.com/ByteBigBoss/MediaPicker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ByteBigBoss%2FMediaPicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31782736,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","media","react"],"created_at":"2024-11-29T12:38:23.986Z","updated_at":"2026-04-14T04:31:59.371Z","avatar_url":"https://github.com/ByteBigBoss.png","language":"JavaScript","readme":"# MediaPicker Project\n\n## Overview\n\nThe MediaPicker project is a comprehensive solution designed to enable users to capture media (camera, audio, and speaker input) from their devices and apply filters to videos. This project aims to provide a robust and flexible framework for integrating media capturing and processing capabilities into various applications.\n\n![Project Design UI/UX](https://github.com/ByteBigBoss/MediaPicker/blob/main/public/MediaPicker.png)\n\n## Features\n\n- **Camera Integration**: Capture video directly from the device's camera.\n- **Audio Recording**: Record audio using the device's microphone.\n- **Speaker Input**: Capture audio output from the device's speaker.\n- **Video Filters**: Apply a variety of filters to enhance or modify the captured video.\n- **Cross-Platform Support**: Compatible with multiple platforms, ensuring a wide range of device compatibility.\n\n## Installation\n\nTo install the MediaPicker project, follow these steps:\n\n1. **Clone the Repository**:\n    ```bash\n    git clone https://github.com/ByteBigBoss/MediaPicker.git\n    ```\n\n2. **Navigate to the Project Directory**:\n    ```bash\n    cd MediaPicker\n    ```\n\n3. **Install Dependencies**:\n    - For Node.js (if applicable):\n        ```bash\n        npm install\n        ```\n\n4. **Build the Project**:\n    ```bash\n    npm run build\n    ```\n\n## Contributing\n\nWe welcome contributions to enhance the MediaPicker project. To contribute, please follow these steps:\n\n1. **Fork the Repository**: Click the \"Fork\" button on the top right corner of this page.\n2. **Clone Your Fork**:\n    ```bash\n    git clone https://github.com/ByteBigBoss/MediaPicker.git\n    ```\n3. **Create a Branch**:\n    ```bash\n    git checkout -b feature/your-feature-name\n    ```\n4. **Make Your Changes**: Implement your feature or fix a bug.\n5. **Commit Your Changes**:\n    ```bash\n    git commit -m \"Add feature/fix: description of the change\"\n    ```\n6. **Push to Your Fork**:\n    ```bash\n    git push origin feature/your-feature-name\n    ```\n7. **Create a Pull Request**: Open a pull request to the main repository.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.\n\n## Contact\n\nFor any questions or issues, please open an issue on the [GitHub repository](https://github.com/ByteBigBoss/MediaPicker) or contact the project maintainers.\n\n\n## Usage\n\nAfter installation, you can start using the MediaPicker project in your application. Below is an example of how to integrate and use the various features:\n\n1. **Create `getMediaDevices.js` Utility File**:\n    ```javascript\n    // utils/getMediaDevices.js\n    export const getMediaDevices = async () =\u003e {\n      const devices = await navigator.mediaDevices.enumerateDevices();\n      return {\n        videoDevices: devices.filter(device =\u003e device.kind === 'videoinput'),\n        audioInputDevices: devices.filter(device =\u003e device.kind === 'audioinput'),\n        audioOutputDevices: devices.filter(device =\u003e device.kind === 'audiooutput'),\n      };\n    };\n    ```\n    \n2. **Create `MediaPicker.js` Component**:\n\n    ```javascript\n    // components/MediaPicker.js\n    import React, { useEffect, useState, useRef } from \"react\";\n    import { getMediaDevices } from \"../utils/getMediaDevices\";\n    import styled from \"styled-components\";\n    import {\n      Paintbrush,\n      Blend,\n      CircleOff,\n      Mic,\n      Video as VideoIC,\n      VideoOff,\n      MicOff,\n    } from \"lucide-react\";\n\n    const Container = styled.div`\n      display: flex;\n      flex-direction: row;\n      column-gap: 30px;\n      padding: 4rem 4rem;\n      justify-content: center;\n      overflow: auto;\n    `;\n\n    const Select = styled.select`\n      margin: 10px 0;\n      padding: 10px;\n      border-radius: 5px;\n      width: 100%;\n      font-size: 16px;\n    `;\n\n    const Filters = styled.div`\n      display: flex;\n      gap: 26px;\n    `;\n\n    const Section = styled.section`\n      width: 100%;\n      max-width: 340px;\n      height: fit-content;\n      background-color: #0d150e;\n      border: 1px solid #ffffff1f;\n      min-height: 200px;\n      border-radius: 24px;\n      box-sizing: border-box;\n      padding: 24px;\n      display: flex;\n      flex-direction: column;\n    `;\n\n    const VideoSection = styled.section`\n      width: 100%;\n      max-width: 340px;\n      height: fit-content;\n      background-color: #0d150e;\n      border: 1px solid #ffffff1f;\n      min-height: 200px;\n      border-radius: 24px;\n      box-sizing: border-box;\n      padding: 24px;\n      display: flex;\n      align-items: center;\n      flex-direction: column;\n    `;\n\n    const ImageContainer = styled.div`\n      width: 200px;\n      height: 200px;\n      border-radius: 100%;\n      position: relative;\n      margin-top: 26px;\n    `;\n    const Video = styled.video`\n      position: absolute;\n      width: 100%;\n      max-width: 200px;\n      height: 200px;\n      max-height: 200px;\n      background-size: cover;\n      border-radius: 100%;\n    `;\n\n    const IconContainer = styled.div`\n      display: flex;\n      color: #3ce666;\n      gap: 30px;\n      margin-top: 50px;\n      margin-bottom: 26px;\n    `;\n\n    const IconBox = styled.button`\n      background-color: #dff2e41f;\n      padding: 8px 14px;\n      border-radius: 6px;\n    `;\n\n    const FilterIconBox = styled.button`\n      width: 80px;\n      height: 80px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border: 1px #ffffff1f solid;\n      border-radius: 6px;\n    `;\n\n    const FilterIconContainer = styled.div`\n      display: flex;\n      color: #3ce666;\n      gap: 30px;\n      margin-top: 20px;\n      margin-bottom: 26px;\n    `;\n\n    const Title = styled.div`\n      color: white;\n      font-size: 1.5rem;\n      text-align: start;\n    `;\n\n    const SelectSet = styled.div`\n      display: flex;\n      flex-direction: column;\n      row-gap: 20px;\n      width: 100%;\n      margin-top: 20px;\n    `;\n\n    const MediaPicker = () =\u003e {\n      const [videoDevices, setVideoDevices] = useState([]);\n      const [audioInputDevices, setAudioInputDevices] = useState([]);\n      const [audioOutputDevices, setAudioOutputDevices] = useState([]);\n      const [selectedVideoDevice, setSelectedVideoDevice] = useState(\"\");\n      const [selectedAudioInputDevice, setSelectedAudioInputDevice] = useState(\"\");\n      const [selectedAudioOutputDevice, setSelectedAudioOutputDevice] =\n        useState(\"\");\n      const [stream, setStream] = useState(null);\n      const [isVideoOn, setIsVideoOn] = useState(true);\n      const [isAudioOn, setIsAudioOn] = useState(true);\n      const videoRef = useRef(null);\n      const [filterBtn, setFilterBtn] = useState(3);\n\n      useEffect(() =\u003e {\n        const fetchDevices = async () =\u003e {\n          const { videoDevices, audioInputDevices, audioOutputDevices } =\n            await getMediaDevices();\n          setVideoDevices(videoDevices);\n          setAudioInputDevices(audioInputDevices);\n          setAudioOutputDevices(audioOutputDevices);\n        };\n\n        fetchDevices();\n      }, []);\n\n      useEffect(() =\u003e {\n        if (stream) {\n          videoRef.current.srcObject = stream;\n        }\n      }, [stream]);\n\n      const handleDeviceChange = async (name, value) =\u003e {\n        if (name === \"videoSource\") {\n          setSelectedVideoDevice(value);\n        } else if (name === \"audioInputSource\") {\n          setSelectedAudioInputDevice(value);\n        } else if (name === \"audioOutputSource\") {\n          setSelectedAudioOutputDevice(value);\n          const videoElement = videoRef.current;\n          if (\"sinkId\" in videoElement) {\n            videoElement.setSinkId(value);\n          }\n        }\n        await getStream();\n      };\n\n      const getStream = async () =\u003e {\n        const constraints = {\n          video: {\n            deviceId: selectedVideoDevice\n              ? { exact: selectedVideoDevice }\n              : undefined,\n          },\n          audio: {\n            deviceId: selectedAudioInputDevice\n              ? { exact: selectedAudioInputDevice }\n              : undefined,\n          },\n        };\n        try {\n          const newStream = await navigator.mediaDevices.getUserMedia(constraints);\n          if (stream) {\n            stream.getTracks().forEach((track) =\u003e track.stop());\n          }\n          setStream(newStream);\n        } catch (error) {\n          console.error(\"Error accessing media devices.\", error);\n        }\n      };\n\n      const toggleVideo = () =\u003e {\n        if (stream) {\n          stream.getVideoTracks().forEach((track) =\u003e {\n            track.enabled = !track.enabled;\n            setIsVideoOn(track.enabled);\n          });\n        }\n      };\n\n      const toggleAudio = () =\u003e {\n        if (stream) {\n          stream.getAudioTracks().forEach((track) =\u003e {\n            track.enabled = !track.enabled;\n            setIsAudioOn(track.enabled);\n          });\n        }\n      };\n\n      const handleVolumeChange = (event) =\u003e {\n        const audioTrack = stream.getAudioTracks()[0];\n        const audioContext = new AudioContext();\n        const mediaStreamSource = audioContext.createMediaStreamSource(\n          new MediaStream([audioTrack])\n        );\n        const gainNode = audioContext.createGain();\n        gainNode.gain.value = event.target.value;\n        mediaStreamSource.connect(gainNode);\n        gainNode.connect(audioContext.destination);\n      };\n\n      const applyVideoFilter = (filter) =\u003e {\n        videoRef.current.style.filter = filter;\n      };\n\n      return (\n        \u003cContainer className=\"\"\u003e\n          \u003cSection\u003e\n            \u003cdiv className=\"text-white\"\u003e\n              \u003cTitle className=\"\"\u003eSelect Devices\u003c/Title\u003e\n            \u003c/div\u003e\n\n            \u003cSelectSet\u003e\n              \u003cSelect\n                name=\"videoSource\"\n                onChange={(e) =\u003e handleDeviceChange(e.target.name, e.target.value)}\n                value={selectedVideoDevice}\n              \u003e\n                \u003coption value=\"\"\u003eSelect Camera\u003c/option\u003e\n                {videoDevices.map((device) =\u003e (\n                  \u003coption key={device.deviceId} value={device.deviceId}\u003e\n                    {device.label || `Camera ${device.deviceId}`}\n                  \u003c/option\u003e\n                ))}\n              \u003c/Select\u003e\n              \u003cSelect\n                name=\"audioInputSource\"\n                onChange={(e) =\u003e handleDeviceChange(e.target.name, e.target.value)}\n                value={selectedAudioInputDevice}\n              \u003e\n                \u003coption value=\"\"\u003eSelect Microphone\u003c/option\u003e\n                {audioInputDevices.map((device) =\u003e (\n                  \u003coption key={device.deviceId} value={device.deviceId}\u003e\n                    {device.label || `Microphone ${device.deviceId}`}\n                  \u003c/option\u003e\n                ))}\n              \u003c/Select\u003e\n              \u003cSelect\n                name=\"audioOutputSource\"\n                onChange={(e) =\u003e handleDeviceChange(e.target.name, e.target.value)}\n                value={selectedAudioOutputDevice}\n              \u003e\n                \u003coption value=\"\"\u003eSelect Speaker\u003c/option\u003e\n                {audioOutputDevices.map((device) =\u003e (\n                  \u003coption key={device.deviceId} value={device.deviceId}\u003e\n                    {device.label || `Speaker ${device.deviceId}`}\n                  \u003c/option\u003e\n                ))}\n              \u003c/Select\u003e\n            \u003c/SelectSet\u003e\n          \u003c/Section\u003e\n          \u003cVideoSection\u003e\n            \u003cImageContainer\u003e\n              \u003cVideo ref={videoRef} autoPlay playsInline /\u003e\n            \u003c/ImageContainer\u003e\n\n            \u003cIconContainer\u003e\n              \u003cIconBox onClick={toggleVideo}\u003e\n                {isVideoOn ? \u003cVideoIC /\u003e : \u003cVideoOff /\u003e}\n              \u003c/IconBox\u003e\n\n              \u003cIconBox onClick={toggleAudio}\u003e\n                {isAudioOn ? \u003cMic /\u003e : \u003cMicOff /\u003e}\n              \u003c/IconBox\u003e\n            \u003c/IconContainer\u003e\n          \u003c/VideoSection\u003e\n\n          \u003cSection\u003e\n            \u003cTitle\u003eVolume\u003c/Title\u003e\n            \u003cinput\n              type=\"range\"\n              min=\"0\"\n              max=\"2\"\n              step=\"0.1\"\n              onChange={handleVolumeChange}\n              className=\"text-yellow-50\"\n              style={{ marginBottom: \"50px\", marginTop: \"20px\" }}\n            /\u003e\n\n            \u003cTitle\u003eFilter\u003c/Title\u003e\n            \u003cFilters\u003e\n              \u003cFilterIconContainer\u003e\n                \u003cFilterIconBox onClick={() =\u003e { applyVideoFilter(\"grayscale(100%)\"); setFilterBtn(1) }} className={`${filterBtn == 1 ? \"bg-[#3CE666] text-white\" : \"bg-[#0D150E]\"}`}\u003e\n                  \u003cBlend /\u003e\n                \u003c/FilterIconBox\u003e\n              \u003c/FilterIconContainer\u003e\n              \u003cFilterIconContainer\u003e\n                \u003cFilterIconBox onClick={() =\u003e { applyVideoFilter(\"sepia(100%)\"); setFilterBtn(2) }} className={`${filterBtn == 2 ? \"bg-[#3CE666] text-white\" : \"bg-[#0D150E]\"}`}\u003e\n                  \u003cPaintbrush /\u003e\n                \u003c/FilterIconBox\u003e\n              \u003c/FilterIconContainer\u003e\n              \u003cFilterIconContainer\u003e\n                \u003cFilterIconBox onClick={() =\u003e { applyVideoFilter(\"none\"); setFilterBtn(3) }} className={`${filterBtn == 3 ? \"bg-[#3CE666] text-white\" : \"bg-[#0D150E]\"}`}\u003e\n                  \u003cCircleOff /\u003e\n                \u003c/FilterIconBox\u003e\n              \u003c/FilterIconContainer\u003e\n            \u003c/Filters\u003e\n          \u003c/Section\u003e\n        \u003c/Container\u003e\n      );\n    };\n\n    export default MediaPicker;\n    ```\n\n3. **Create `page.js` for Application Entry Point**:\n\n    ```javascript\n    \"use client\"\n    import React from 'react';\n    import MediaPicker from '../../components/MediaPicker';\n\n    const App = () =\u003e {\n      return (\n        \u003cdiv className='w-full'\u003e\n          \u003cdiv className='flex flex-col items-center w-full text-white'\u003e\n            \u003ch1 className='text-[2rem] font-medium'\u003eMedia Picker\u003c/h1\u003e\n            \u003ch3 className='text-[1rem] opacity-80'\u003eDeveloped by @bytebigboss\u003c/h3\u003e\n          \u003c/div\u003e\n          \u003cMediaPicker /\u003e\n        \u003c/div\u003e\n      );\n    };\n\n    export default App;\n    ```\n\n4. **Running the Application**:\n\n    - Ensure you have all necessary dependencies installed, including `react`, `styled-components`, and `lucide-react`.\n    - Start your development server using a command like `npm run dev` or `yarn start` depending on your package manager.\n    - Open your browser and navigate to the application to see the MediaPicker in action.\n\n5. **Using the Features**:\n\n    - **Select Devices**: Use the dropdown menus to select your desired camera, microphone, and speaker.\n    - **Toggle Video/Audio**: Click the video and audio icons to enable/disable the respective streams.\n    - **Adjust Volume**: Use the volume slider to adjust the microphone volume.\n    - **Apply Filters**: Click on the filter icons to apply grayscale, sepia, or remove any filters from the video stream.\n\nThis comprehensive setup ensures a fully functional media picker with device selection, control over video and audio streams, volume adjustment, and video filters. Customize the styles and behavior further as needed for your specific use case.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytebigboss%2Fmediapicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbytebigboss%2Fmediapicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytebigboss%2Fmediapicker/lists"}