html5/node.js video capture and upload

app.js

/* global require */

const multipart = require('connect-multiparty')
const multipartMiddleware = multipart()
const path = require('path')
const os = require('os')
const fs = require('fs')

var express = require('express')
var app = express()
app.use(express.static('.'))


app.get('/', function (req, res) {
  res.redirect('/videoCapture.html')
})

app.post('/', multipartMiddleware, function(req, res) {
  console.log('files', req.files.data.path)
  let location = path.join(os.tmpdir(), 'upload.webm')
  fs.rename(req.files.data.path, location)
  console.log(`upload successful, file written to ${location}`)
  res.send(`upload successful, file written to ${location}`)
})

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

package.json

{
  "name": "",
  "version": "",
  "devDependencies": {
    "eslint": "^3.12.2",
  },
  "dependencies": {
    "connect-multiparty": "^2.0.0"
  }
}

videoCapture.html

<video autoplay></video>
<h3 id="status"></h3>
<input id="record" type="button" value="record" />
<input id="stop" type="button" value="stop" />
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="videoCapture.js"></script>

videoCapture.js

/* global MediaRecorder $ */
/*eslint no-console: 0*/

const record = document.getElementById('record')
const stop = document.getElementById('stop')

if (!navigator.mediaDevices){
  alert('getUserMedia support required to use this page')
}

const chunks = []
let onDataAvailable = (e) => {
  chunks.push(e.data)
}

// Not showing vendor prefixes.
navigator.mediaDevices.getUserMedia({
  audio: true,
  video: {
    width: { ideal: 1280 },
    height: { ideal: 720 }
  }
}).then((mediaStream) => {
  const recorder = new MediaRecorder(mediaStream)
  recorder.ondataavailable = onDataAvailable
  const video = document.querySelector('video')
  const url = window.URL.createObjectURL(mediaStream)
  video.src = url

  record.onclick = () => {
    recorder.start()
    document.getElementById('status').innerHTML = 'recorder started'
    console.log(recorder.state)
    console.log('recorder started')
  }

  stop.onclick = ()=> {
    recorder.stop()
    console.log(recorder.state)
    document.getElementById('status').innerHTML = 'recorder started'
    console.log('recorder stopped')
  }

  video.onloadedmetadata = (e) => {
    console.log('onloadedmetadata', e)
  }

  recorder.onstop = (e) => {
    console.log('e', e)
    console.log('chunks', chunks)
    const bigVideoBlob = new Blob(chunks, { 'type' : 'video/webm; codecs=webm' })
    let fd = new FormData()
    fd.append('fname', 'test.webm')
    fd.append('data', bigVideoBlob)
    $.ajax({
      type: 'POST',
      url: '/',
      data: fd,
      processData: false,
      contentType: false
    }).done(function(data) {
      console.log(data)
    })
  }
}).catch(function(err){
  console.log('error', err)
})

Used this today and it was really helpful. Thank you for sharing!

where is about node.js ?