How to switch cameras in PWA app built with reactjs?

Question

I have a code which records or uploads the videos. The app is built using create-react-app and is a PWA. I have used facingMode constraint but it still doesnt switch cameras on mobile phone (Samung fold 2) even in motorola phone it doesnt have the same affect. Here is the code:

import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

import config from '../../config';


const MediaRecorderCapture = props => {
  const [mediaRecorder, setMediaRecorder] = useState({});
  const [isRecording, setIsRecording] = useState(false);
  const [showRear, setShowRear] = useState(false);
  const recorderRef = useRef();
  const playerRef = useRef();

  /**
   * Initialize the MediaRecorder on component mount
   */
  useEffect(() => {
    console.log("reinitializing..")
    initializeMediaRecorder();
  }, [showRear])

  /**
   * Upon MedaRecorder being set, monitor the following events
   */
  useEffect(() => {
    let chunks = [];

    mediaRecorder.ondataavailable = e => chunks.push(e.data)

    mediaRecorder.onstop = e => {
      let blob = new Blob(chunks, { type: 'video/mp4' });
      chunks = [];

      let url = (window.URL || window.webkitURL).createObjectURL(blob);
      handleVideoRecorder(blob);
      // uploadVideo(blob);
      // setPlaybackPreview(url);
      // createDownloadLink(url);
    }

    mediaRecorder.onerror = e => {
      console.log('Error recording stream');
      console.log(e.error);
    }

    console.log('MediaRecorder ready');
  }, [mediaRecorder]);



  // const createDownloadLink = url => {
  //   const link = Download;
  //   const linkContainer = document.getElementById('download-link');
  //   ReactDOM.render(link, linkContainer);
  // }

  /**
   * Helper function to console out change in state of the MediaRecorder
   */
  useEffect(() => {
    console.log(`MediaRecorder state: ${mediaRecorder.state}`)
  }, [mediaRecorder.state])

  /**
   * Start recording the stream
   */
  const start = async () => {
    if (mediaRecorder.state === 'recording') return;
    mediaRecorder.start();
    setIsRecording(true);
  }

  /**
   * Stop recording the stream
   */
  const stop = async () => {
    if (mediaRecorder.state === 'inactive') return;
    mediaRecorder.stop();
    setIsRecording(false);
    await initializeMediaRecorder();
  }

  /**
   * Set the playback player's source to the url of the newly recorderd stream
   * @param {string} url 
   */
  const setPlaybackPreview = url => {
    if (!playerRef.current) return;
    console.log(`Playback URL: ${url}`);
    playerRef.current.src = url;
  }

  /**
   * Get a media device stream (webcam)
   */
  const getStream = () => {
    return new Promise(async (resolve, reject) => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: true,
          video: {
            facingMode: showRear ? 'environment' : 'user'
          }
        });
        console.log('Stream fetched and rear camera? ', showRear);
        resolve(stream);
      }
      catch (err) {
        console.log('Error in fetching stream')
        reject(err);
      }
    })
  }

  /**
   * Set the live stream retrieved from the media device
   * to the designated player to preview
   * @param {object} stream 
   */
  const setRecordingStreamPreview = stream => {
    if (!recorderRef.current) return;
    recorderRef.current.srcObject = stream;
    console.log("recordref ", recorderRef.current.srcObject)

  }

  /**
   * Create MediaRecorder object from a given stream
   * @param {object} stream 
   */
  const createMediaRecorder = stream => {
    return new Promise((resolve, reject) => {
      try {
        const mediaRecorder = new MediaRecorder(stream);
        console.log('New MediaRecorder created');
        resolve(mediaRecorder);
      }
      catch (err) {
        console.log('Error in creating new MediaRecorder');
        reject(err);
      }
    })
  }

  /**
   * Initialize MediaRecorder
   */
  const initializeMediaRecorder = async () => {
    return new Promise(async (resolve, reject) => {
      try {
        const stream = await getStream();
        console.log(stream);
        setRecordingStreamPreview(stream);
        const mediaRecorder = await createMediaRecorder(stream);
        setMediaRecorder(mediaRecorder);
        resolve(mediaRecorder);
      }
      catch (err) {
        console.log('Error in initializing MediaRecorder of fetching media devices stream')
        reject(err);
      }
    })
  }

  const handleFileChange = evt => {
    props.handleFileChange(evt);
  }

  const handleVideoRecorder = blob => {
    props.handleVideoRecorder(blob);
  }

  const handleRearCamera = _ => {
    setShowRear(!showRear);
  }

  return (
    <>

I am initializing the media once the flag is set as well. Any idea why this is not working please? Guys, I am really stuck with this. Thanks

How to switch cameras in PWA app built with reactjs?

Answers (1)

Related Questions