Skip to content

Instantly share code, notes, and snippets.

@rissem
Created January 5, 2017 21:53
Show Gist options
  • Save rissem/d51b1997457a7f6dc4cf05064f5fe984 to your computer and use it in GitHub Desktop.
Save rissem/d51b1997457a7f6dc4cf05064f5fe984 to your computer and use it in GitHub Desktop.
html5/node.js video capture and upload
/* 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!')
})
{
"name": "",
"version": "",
"devDependencies": {
"eslint": "^3.12.2",
},
"dependencies": {
"connect-multiparty": "^2.0.0"
}
}
<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>
/* 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)
})
@caike
Copy link

caike commented Oct 26, 2018

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

@chlg
Copy link

chlg commented Apr 10, 2019

where is about node.js ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment