爲什麼在我的React-app中沒有錄像功能？

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

這是不是一個做出反應的問題 - getUserMedia不全線支持 http://caniuse.com/#feat=stream

編輯：我的錯誤 - 你的錯誤信息實際上告訴你所有你需要知道：Expected onClick listener to be a function, instead got type string - 你從字面上傳遞一個字符串作爲的onClick處理程序，即onClick="startFunction()" - 你想讓它be onClick={yourFunction}