Why isn't video recording working in my React-app?

Question

so I am trying to incorporate a feature into a website for a client where visitors can record video on their site and then download it/upload it onto their server.

They wish for this to be built as a react component but I just started learning react last week so I'm a tad confused however it shouldn't be too complex.

So I have the following code which works in simple html/js files, outside of react where if you run it you get a little video recording screen and you can download the recording:

I also tried including the contents of de.js into the Def class component instead of importing it but this also led to the same result.

I have tried to figure out any other better easier ways to get video recording and uploading/downloading functionality into a react-component but haven't found any. I can't quite figure out how to use the popular RecordRTC library for this. Any other simple solution would be great, I'm not bound to this way of doing this, I just need to get something that works.

Any help would be GREATLY appreciated!!!

********************************** EDIT **************************************

If I run the below code:

import React, { Component } from 'react';
import './Def.css';

class Def extends Component {
  render() {
    const constraints = {
  "video": {
    width: {
      max: 400
    }
  },
  "audio": true
};

var theStream;
var theRecorder;
var recordedChunks = [];

function startFunction() {
  navigator.mediaDevices.getUserMedia(constraints)
    .then(gotMedia)
    .catch(e => {
      console.error('getUserMedia() failed: ' + e);
    });
}

function gotMedia(stream) {
  theStream = stream;
  var video = document.querySelector('video');
  video.src = URL.createObjectURL(stream);
  try {
    var recorder = new MediaRecorder(stream, {
      mimeType: "video/webm"
    });
  } catch (e) {
    console.error('Exception while creating MediaRecorder: ' + e);
    return;
  }

  theRecorder = recorder;
  recorder.ondataavailable =
    (event) => {
      recordedChunks.push(event.data);
    };
  recorder.start(100);
}

function stopFile() {
  theRecorder.stop();
}

function download() {
  theRecorder.stop();
  theStream.getTracks().forEach(track => {
    track.stop();
  });

  var blob = new Blob(recordedChunks, {
    type: "video/webm"
  });
  var url = URL.createObjectURL(blob);
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = 'test.webm';
  a.click();
  // setTimeout() here is needed for Firefox.
  setTimeout(function () {
    URL.revokeObjectURL(url);
  }, 100);
}
    return (
  <div>
          <button onClick={startFunction()} >Record</button>
          <button onClick={download()}> Download!</button>
  </div>
    );
  }
}

export default Def;

And then run What happens is that I do get a message from Chrome that asks for permission to use the webcam but nothing is visible on the screen (not even the buttons) and it is completely blank. I feel like this issue might be due to some bindings which react needs but I am not sure :(

The error log now says:

bundle.js:33208 Uncaught TypeError: Cannot read property 'stop' of undefined
    at download (bundle.js:33208)
    at Def.render (bundle.js:33249)
    at bundle.js:26631
    at measureLifeCyclePerf (bundle.js:25910)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (bundle.js:26630)
    at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:26657)
    at ReactCompositeComponentWrapper.performInitialMount (bundle.js:26197)
    at ReactCompositeComponentWrapper.mountComponent (bundle.js:26093)
    at Object.mountComponent (bundle.js:18474)
    at ReactCompositeComponentWrapper.performInitialMount (bundle.js:26206)

Answer 1

this isn't a React issue - getUserMedia isn't supported across the board. http://caniuse.com/#feat=stream

edit: my mistake - your error message actually tells you all you need to know: Expected onClick listener to be a function, instead got type string - you're literally passing in a string as the onClick handler, ie onClick="startFunction()" - you want it to be onClick={yourFunction}