Skip to content

Conversation

@jmschrack
Copy link

This exposes a getVideoTrack function to get the current VideoTrack. This way the end user can modify advanced constraints themselves.

Example of setting the Saturation value on a camera:

'use client'
import { useEffect, useRef,useState } from "react";
import { Camera } from "react-camera-pro"

export function Cam(){
    /**@type {import("react").MutableRefObject<import("react-camera-pro").CameraType>} */
    const camera = useRef(null);
    const [val,setVal]=useState(50);
   
    useEffect(()=>{
        if(camera.current){
            camera.current.getVideoTrack()?.applyConstraints({advanced:[{saturation:val}]});         
        }
    },[val])
    
    return (
      <div className="">
        <div className="h-32 w-32 max-h-32"><Camera ref={camera} aspectRatio={4/3}/></div>
        <input type="range" min={0} max={100} step={1}  className="range" value={val} onChange={(e)=>{setVal(e.target.valueAsNumber)}} />
      </div>
    );
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant