为什么视频录制在我的 React 应用程序中不起作用？

Question

因此，我正在尝试将一项功能整合到客户的网站中，访问者可以在其网站上录制视频，然后将其下载/上传到他们的服务器上。

他们希望将其构建为一个反应组件，但我上周才开始学习反应，所以我有点困惑，但它不应该太复杂。

所以我有以下代码可以在简单的 html/js 文件中运行，如果你运行它，你会得到一个小的视频录制屏幕，你可以下载录制文件：

我也尝试将 de.js 的内容包含到 Def 类组件中，而不是导入它，但这也导致了相同的结果。

我试图找出任何其他更简单的方法来将视频录制和上传/下载功能放入反应组件中，但没有找到任何方法。我不太清楚如何为此使用流行的 RecordRTC 库。任何其他简单的解决方案都会很棒，我不受这种方式的约束，我只需要得到一些有用的东西。

任何帮助将不胜感激！！！

************************************ 编辑 ************ ******************************

如果我运行以下代码：

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;

然后运行 ​​发生的情况是，我确实从 Chrome 收到一条消息，请求允许使用网络摄像头，但屏幕上什么都看不到（甚至按钮都没有），而且它完全是空白的。我觉得这个问题可能是由于一些反应需要的绑定，但我不确定:(

错误日志现在显示：

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

这不是 React 问题 - 不全面支持 getUserMedia。 http://caniuse.com/#feat=stream

编辑：我的错误 - 你的错误消息实际上告诉你所有你需要知道的：Expected onClick listener to be a function, instead got type string - 你实际上是在传递一个字符串作为 onClick 处理程序，即onClick="startFunction()" - 你希望它是onClick={yourFunction}