React-appでビデオ録画が動作しないのはなぜですか？

Question

私は訪問者が自分のサイトにビデオを録画し、それをダウンロードしてサーバーにアップロードできるクライアント用の機能をWebサイトに組み込もうとしています。このコンポーネントを反応させるが、私はまだ始まったばかりな学習として構築するために彼らが望む

ので、私はしかし、それはあまりにも複雑ではありません混乱して少しだ先週反応します。

だから私はあなたがそれを実行する場合は、少しビデオ録画画面を取得し、あなたが録音をダウンロードすることができる場所の外に反応し、単純なHTML/JSファイルで動作する次のコードを持っている：

私も含めてみましたde.jsの内容をインポートするのではなく、Defクラスのコンポーネントに追加しましたが、これも同じ結果につながりました。

私が反応する成分の中にビデオ録画やアップロード/ダウンロード機能を得るために、他のより良い簡単な方法を把握しようとしているが、いずれも見つかっていません。私はこのために人気のあるRecordRTCライブラリをどのように使用するのかよく分かりません。他の単純な解決策は素晴らしいだろう、私はこれを行うこの方法に縛られていない、私はちょうど動作するものを得る必要があります。

ご迷惑をおかけして申し訳ございません。

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

私は以下のコードを実行した場合：

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="startFunction()"、のonClickハンドラとして文字列を渡している - あなたはそれがしたいですbe onClick={yourFunction}