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}

为什么我的React-app中没有视频录制？

1 个答案: