hunk.code_window:     autoStart: false,
     });
     const fullScreenHandle = useFullScreenHandle();
     useEffect(() => {
       navigator.mediaDevices
         .enumerateDevices()
         .then(handleDeviceInputs)
         .catch((err) => {
           setError(err.message);
         });
     }, []);
     useEffect(() => {
       if (webcamRef.current && webcamRef.current.stream) {
  
hunk.labels: keep keep keep keep keep replace replace replace replace replace replace keep keep keep keep
hunk.after_edit:     try {
         navigator.mediaDevices
           .enumerateDevices()
           .then(handleDeviceInputs)
           .catch((err) => {
             setError(err.message);
           });
       } catch (e) {
         log.debug("Error in calling enumerateDevices");
       }
  
hunk.file_path: app/client/src/widgets/CameraWidget/component/index.tsx
hunk.type: replace
file: import { getTypographyByKey } from "constants/DefaultTheme";
  import React from "react";
  import styled from "styled-components";
  
  const Container = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    ${(props) => getTypographyByKey(props, "p1")};
    color: ${(props) => props.theme.colors.numberedStep.number};
    height: 100%;
  `;
  
  const Line = styled.div`
    width: 1px;
    flex: 1;
    background-color: ${(props) => props.theme.colors.numberedStep.line};
  `;
  
  function NumberedStep(props: { current: number; total: number }) {
    const { current, total } = props;
    return (
      <Container>
        <span>
          {current}/{total}
        </span>
        <Line />
      </Container>
    );
  }
  
  export default NumberedStep;
  