React

by Timar

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

let recordedChunks = [];
class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    }
  }
  
  componentDidMount(){
  	this.prepareMediaRecorder();
  }
  
  handleDataAvailable(event) {
    if (event.data.size > 0) {
      recordedChunks.push(event.data);
    } else {
      // ...
    }
  }

  download(e) {
    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();
    window.URL.revokeObjectURL(url);
  }
  
  var stream;
  async prepareMediaRecorder() {
     stream = await navigator.mediaDevices.getDisplayMedia({
      audio: true, 
      video: true
    });
    this.mediaRecorder = new MediaRecorder(stream);
    recordedChunks = [];
    this.mediaRecorder.ondataavailable = this.handleDataAvailable;
    this.mediaRecorder.onstop = this.download;
    const initialDelay = 0;
    this.mediaRecorder.start(initialDelay);
    let videoLength = 6000;
    setTimeout(() => {
      this.mediaRecorder.stop();
    }, videoLength); 
  }
  
  render() {
    return (
      <div>
      <p>Lorem Ipsum</p>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))