diff --git a/.gitignore b/.gitignore index 1f4a6f4..327fcdc 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,5 @@ style.min.css node_modules .env + +uploads/ diff --git a/package-lock.json b/package-lock.json index dfe01b6..fb15e28 100644 --- a/package-lock.json +++ b/package-lock.json @@ -132,6 +132,11 @@ "normalize-path": "2.1.1" } }, + "append-field": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/append-field/-/append-field-0.1.0.tgz", + "integrity": "sha1-bdxY+gg8e8VF08WZWygwzCNm1Eo=" + }, "argparse": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.9.tgz", @@ -718,6 +723,33 @@ "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=", "dev": true }, + "busboy": { + "version": "0.2.14", + "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz", + "integrity": "sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=", + "requires": { + "dicer": "0.2.5", + "readable-stream": "1.1.14" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "readable-stream": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", + "requires": { + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "0.0.1", + "string_decoder": "0.10.31" + } + } + } + }, "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -1000,6 +1032,27 @@ } } }, + "cloudinary": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-1.9.1.tgz", + "integrity": "sha512-VfeDkEmamZ5R5BWpMs4rPLwaVDjONE2zxLOrqV+lKzLeqn2TTvEAy/CRQxUmcdxFLJ96gl62LUn+IoUMiYiuYw==", + "requires": { + "lodash": "3.10.1", + "q": "1.4.1" + }, + "dependencies": { + "lodash": { + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz", + "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=" + }, + "q": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/q/-/q-1.4.1.tgz", + "integrity": "sha1-VXBbzZPF82c1MMLCy8DCs63cKG4=" + } + } + }, "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", @@ -1076,7 +1129,6 @@ "version": "1.5.2", "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.5.2.tgz", "integrity": "sha1-cIl4Yk2FavQaWnQd790mHadSwmY=", - "dev": true, "requires": { "inherits": "2.0.3", "readable-stream": "2.0.6", @@ -1087,7 +1139,6 @@ "version": "2.0.6", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz", "integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=", - "dev": true, "requires": { "core-util-is": "1.0.2", "inherits": "2.0.3", @@ -1422,6 +1473,33 @@ "defined": "1.0.0" } }, + "dicer": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.2.5.tgz", + "integrity": "sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=", + "requires": { + "readable-stream": "1.1.14", + "streamsearch": "0.1.2" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "readable-stream": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", + "requires": { + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "0.0.1", + "string_decoder": "0.10.31" + } + } + } + }, "diff": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/diff/-/diff-3.3.1.tgz", @@ -4179,6 +4257,28 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" }, + "multer": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/multer/-/multer-1.3.0.tgz", + "integrity": "sha1-CSsmcPaEb6SRSWXvyM+Uwg/sbNI=", + "requires": { + "append-field": "0.1.0", + "busboy": "0.2.14", + "concat-stream": "1.5.2", + "mkdirp": "0.5.1", + "object-assign": "3.0.0", + "on-finished": "2.3.0", + "type-is": "1.6.15", + "xtend": "4.0.1" + }, + "dependencies": { + "object-assign": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz", + "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=" + } + } + }, "nan": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.7.0.tgz", @@ -6313,6 +6413,11 @@ "readable-stream": "2.3.3" } }, + "streamsearch": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz", + "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo=" + }, "string-width": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", @@ -6822,8 +6927,7 @@ "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", - "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", - "dev": true + "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, "umd": { "version": "3.0.1", diff --git a/package.json b/package.json index d5bc80b..411c7c7 100644 --- a/package.json +++ b/package.json @@ -7,13 +7,14 @@ "test": "NODE_ENV=test mocha ./tests/* ", "test:watch": "NODE_ENV=test mocha ./tests/* --watch", "devbug": "elm-live src/elm/Main.elm --output=public/elm.js --dir=public --open --debug --pushstate & npm run css-watch", - "dev": "elm-live src/elm/Main.elm --output=public/elm.js --dir=public --open --pushstate & npm run css-watch", + "dev-front-end": "elm-live src/elm/Main.elm --output=public/elm.js --dir=public --open --pushstate & npm run css-watch", "build": "npm run css-build; elm-make src/elm/Main.elm --output=public/elm.js --yes", "css-watch": "postcss ./src/css/index.css --output ./public/style.min.css --watch --config ./postcss.config.js", "css-build": "postcss ./src/css/index.css --output ./public/style.min.css --config ./postcss.config.js", "dev-server": "NODE_ENV=development nodemon ./src/server/start", "heroku-postbuild": "npm run build", - "start": "node ./src/server/start" + "start": "node ./src/server/start", + "dev": "npm run dev-server & npm run dev-front-end" }, "repository": { "type": "git", @@ -38,8 +39,10 @@ "airtable": "^0.5.2", "autoprefixer": "^7.1.6", "body-parser": "^1.18.2", + "cloudinary": "^1.9.1", "elm": "^0.18.0", "express": "^4.16.2", + "multer": "^1.3.0", "postcss-clean": "^1.1.0", "postcss-cli": "^4.1.1", "postcss-custom-media": "^6.0.0", diff --git a/public/index.html b/public/index.html index 0d5edca..5d100f7 100644 --- a/public/index.html +++ b/public/index.html @@ -12,10 +12,14 @@ - + +

+ + + - --> diff --git a/public/video.js b/public/video.js new file mode 100644 index 0000000..87332b2 --- /dev/null +++ b/public/video.js @@ -0,0 +1,61 @@ +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/mp4' }) + let fd = new FormData() + fd.append('videoData', bigVideoBlob) + fetch("/api/v1/video-upload", { + method: 'POST', + body: fd + }) + .then(response => response.json()) + .then(response => console.log('Success', response)) + .catch(error => console.log('Error', error)) + } +}).catch(function(err){ + console.log('error', err) +}) diff --git a/src/server/app.js b/src/server/app.js index 5bc2125..4aff492 100644 --- a/src/server/app.js +++ b/src/server/app.js @@ -3,11 +3,14 @@ const path = require("path"); const express = require("express"); const bodyParser = require("body-parser"); const api_router = require("./routers/api_router"); +var multer = require('multer') +var upload = multer({ dest: 'uploads/' }) const app = express(); app.use(express.static(path.join(__dirname, "../../public"))); app.use(bodyParser.json()); +app.use(upload.single('videoData')); app.use(express.static("public")); app.use("/api/v1/", api_router); diff --git a/src/server/routers/api_router.js b/src/server/routers/api_router.js index f83c804..966b1c9 100644 --- a/src/server/routers/api_router.js +++ b/src/server/routers/api_router.js @@ -1,6 +1,14 @@ const router = require("express").Router(); const Airtable = require("airtable"); const base = Airtable.base(process.env.AIRTABLE_BASE); +const fs = require('fs') +const cloudinary = require('cloudinary'); + +cloudinary.config({ + cloud_name: process.env.CLOUDINARY_CLOUDNAME, + api_key: process.env.CLOUDINARY_API_KEY, + api_secret: process.env.CLOUDINARY_API_SECRET +}); Airtable.configure({ endpointUrl: "https://api.airtable.com", @@ -16,4 +24,16 @@ router.route("/help_form").post((req, res, next) => { }); }); +router.route("/video-upload").post((req, res, next) => { + fs.rename(req.file.path, `${req.file.path}.mp4`, function (err) { + // cloudinary documentation is wrong here, for uploader.upload the callback is the second argument and the options are the third + // the callback also has the arguments the wrong way round with the 'result' going first and the 'err' last + cloudinary.uploader.upload(`${req.file.path}.mp4`, function(result, err) { + if (err) { console.log('err', err); }; + console.log('result', result); + return res.json({ success: true }); + }, { resource_type: "video" }); + }); +}); + module.exports = router;