Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

Question

I'm trying to build a snapchat clone using react with redux. I'm at a point where i can take the picture but the problem is when i take the picture, that picture doesn't get saved in it's current state and in the console this error "Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME" is thrown. when i tried to use redux dev tools, it showed that the image comes back as "nulldata:img/jpeg..."

I'm using chrome as my default browser.

this is a snippet of the code that i have to show the preview

function Preview() {
const cameraImage = useSelector(selectCameraImage);
const history = useHistory()
const dispatch = useDispatch()

useEffect(() => {
    if (!cameraImage) {
        history.replace('/')

    }
}, [cameraImage, history])

const closePreview = () => {
    dispatch(resetCameraImage());
}

return <div className="preview">
        <CloseIcon onClick={closePreview} className="preview__close"/>
        <img src={cameraImage} alt="" />
        </div>;

Answer 1

I am assuming you have a cameraSlice.js file. If so go there and change the initialState of the cameraImage from null to empty string like so ''. That should work. let me know

Answer 2

cameraSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  cameraImage: "",// instead of null use ""(though null works fine for me)
};

export const cameraSlice = createSlice({
  name: "camera",
  initialState,

  reducers: {
    resetCameraImage: (state) => {
      state.cameraImage = null;// try changing null to "" here too
    },
    setCameraImage: (state, action) => {
      state.cameraImage = action.payload;// take care to change the default += to just =, most probably the mistake you're making
    },
  },
});

export const { setCameraImage, resetCameraImage } = cameraSlice.actions;

export const selectCamera = (state) => state.camera.cameraImage;

export default cameraSlice.reducer;

WebcamCapture.js

import React, { useRef, useCallback } from "react";
import Webcam from "react-webcam";
import RadioButtonUncheckedOutlinedIcon from "@mui/icons-material/RadioButtonUncheckedOutlined";
import { useDispatch, useSelector } from "react-redux";
import { selectCamera, setCameraImage } from "./features/cameraSlice";

const videoConstraints = {
  width: 250,
  height: 400,
  facingMode: "user",
};

function WebcamCapture() {
  const webcamRef = useRef(null);
  const dispatch = useDispatch();
  const camImage = useSelector(selectCamera);

  const capture = useCallback(() => {
    const imageSrc = webcamRef.current.getScreenshot();
    dispatch(setCameraImage(imageSrc));
  }, [dispatch, webcamRef]);

  return (
    <div className="webcamCapture">
      <Webcam
        audio={false}
        height={videoConstraints.height}
        ref={webcamRef}
        screenshotFormat={videoConstraints}
        width={videoConstraints.width}
        videoConstraints={videoConstraints}
      />

      <RadioButtonUncheckedOutlinedIcon
        className="webcamCapture__button"
        onClick={capture}
        fontSize="large"
      />

      <img src={camImage} alt="" />
    </div>
  );
}

export default WebcamCapture;

This worked for me.