Capture Video

[LazerJesus]

I want to capture a video from the webcam and sent the file to aws s3.
Can I do this with this component and how would you suggest I go about this?

[Extra-lightwill]

+1

[Extra-lightwill]

@FinnFrotscher Have you managed to integrate video capturing functionality??

[LazerJesus]

I did but i am not sure whether i used this component.
also I saved the files to my own server. not aws. still interested?
@Extra-lightwill

[Extra-lightwill]

@FinnFrotscher I am building a prototype so yes still interested...

[LazerJesus]

ok ill look into my code tomorrow and upload the relevant bits.

[Extra-lightwill]

@FinnFrotscher Have you got a link?

[LazerJesus]

I am using WebRTC (RecordRTC) and getUserMedia.
This is a little bit chaotic but it does the job.
I had to clean it up a little so dont expect it to work copy&paste out of the box.
the important function for you is setupVideo()

import RecordRTC from 'recordrtc'
import Video from '../../components/Video'

export default class Record extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stream: null,
      url:'',
      videoRecorder:'',
      isRecording: false,
      isUploading: false,
      isPreview: false,
      isDone: false,
      pausing: false,
    }
 
  hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia);
  }
setupVideo(callback){
    navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    //check if stream has already been captured
    if (this.state.stream) {
      console.log(this.state.stream);
      this.setState({
        url: window.URL.createObjectURL(this.state.stream)
      }, callback);
    } else {
      navigator.getUserMedia({
          audio: true,
          video: {
            frameRate: { ideal: 20, max: 30 }},
            height:'480px', width:'640px'
        }, (stream) => {
          this.setState({
            stream: stream,
            url: window.URL.createObjectURL(stream)
          }, callback);
        },(err) => { console.log(err.name) })
    }
  }
  pauseRecording(){
    this.state.videoRecorder.pauseRecording()
    this.setState({
      pausing: true,
    });
  }
  startRecording(){
    if (this.state.pausing) {
      this.state.videoRecorder.resumeRecording()
      this.setState({
        pausing: false,
      });
      return
    }
    this.setState({
      videoRecorder:'',
      isUploading:  false,
      pausing:  false,
      isPreview: false,
      hasRecording: false,
    }, this.setupVideo.bind(this, () => {
      const videoRecorder = RecordRTC(this.state.stream, {
        type: 'video',
        video: {
          width: 640,
          height: 480
         },
         canvas: {
          width: 640,
          height: 480
        }
       })
      videoRecorder.startRecording()
      this.setState({
        videoRecorder: videoRecorder,
        isRecording: true,
      });
    }))
  }
  stopRecording(){
    window.dispatchEvent(new CustomEvent('stopRecording'));
    this.state.videoRecorder.stopRecording((url) => {
      this.setState({
        isRecording: false,
        pausing:  false,
        hasRecording:  true,
      });
    })
  }

startPreview(){
    this.state.videoRecorder.getDataURL((url) => {
      this.setState({
        url : url,
        isPreview: true
      });
    })
  }
  uploadFile(){
    this.setState({
      pausing:  false,
      isRecording: false,
      isUploading:  1,
      isPreview: false,
    });

    this.state.videoRecorder.getDataURL((data) => {

      var uploadData = {
        fileName: id
        file: data,
        isBase64: true,
        streams: 'dynamic',
        chunkSize: 'dynamic',
      }

      var uploadInstance = Videos.insert(uploadData, false);

      uploadInstance.on('progress', (progress, file) => {
        this.setState({
          isUploading:  progress,
        });
      });

      uploadInstance.on('end', (error, fileObj) => {
        if (error) {
          console.log('Error during upload: ' + error.reason);
        } else {
          console.log(fileObj.meta._id, fileObj.meta.try)
          this.setState({
            id: fileObj._id,
            isDone: true
          });
        }
      });
      uploadInstance.start()
    })
  }
  render(){
    return (  <Video
                ref='video'
                isPreview={this.state.isPreview}
                url={this.state.url}/>)
}

[Extra-lightwill]

@FinnFrotscher Great, that's massively helpful. Appreciate it!

[Extra-lightwill]

@FinnFrotscher Just out of interest, what does your video.js file look like? Assuming you're using react, there are some react-specific video repos, but I'm leaning towards going for something more established e.g. https://github.com/Selz/plyr or https://github.com/videojs/video.js/.. Wondering whether this is the right choice or not based on your experience?

[LazerJesus]

plain old html video tag.

import React from 'react'

export default class Video extends React.Component {
  render() {
    // console.log(this.props);
    return (
      <video
        id='video'
        style={{height:'480px', width:'640px'}}
        ref='video'
        preload='auto'
        controls={this.props.isPreview}
        autoPlay={!this.props.isPreview}
        src={this.props.url} />
    )
  }
}

[a22munir]

Hey @FinnFrotscher I am trying to get your code to work but running into errors. Do you have a repo with a component that has all the code for turning this into a video capture component?

[syam1123]

@mozmorris Have you managed to add the record video feature in react-webcam?

[shane-hogan]

How can we capture video with react-webcam?

[mozmorris]

@shane-hogan see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/captureStream. There's also a guide https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element