element!\n*************************************************************/\n\nclass VideoInput extends HTMLElement {\n\n constructor() {\n /*\n * Constructor! Default values!\n */\n super();\n this._isRecording = false;\n this._mediablob = [];\n this._allblobs = []\n this._width = 640;\n this._height = 480;\n this._labelloc = \"bottom\";\n this._label = \"\";\n this._posturl = \"\";\n this._maxtime = 0;\n this._timercounter = 0;\n this._interval = 0;\n }\n\n static get observedAttributes() { return [\"vidwidth\", \"vidheight\", \"labelloc\", \"label\", \"action\", \"maxtime\"]; }\n\n attributeChangedCallback(name, oldValue, newValue) {\n /*\n * Saves attributes.\n */\n if (name === \"vidwidth\") {\n this._width = newValue;\n } else if (name === \"vidheight\") {\n this._height = newValue;\n } else if (name === \"labelloc\") {\n if (newValue === \"top\" | newValue === \"bottom\" | newValue === \"hidden\") {\n this._labelloc = newValue;\n }\n } else if (name === \"label\") {\n this._label = newValue;\n } else if (name === \"action\") {\n this._posturl = newValue;\n } else if (name === \"maxtime\") {\n this._maxtime = newValue;\n }\n this._updateRendering();\n }\n\n startTimer() {\n /*\n * Starts the timer *if* we are giving videos a time limit.\n */\n if (this._maxtime > 0) {\n timerid = this.id\n timercount = 0;\n timermaxtime = this._maxtime;\n intervaltracker = setInterval(timerstep, 1000);\n }\n }\n\n resetTimerLabel() {\n /*\n * Resets the timer label. This gets called when we complete a recording.\n */\n this._updateRendering()\n }\n\n connectedCallback() {\n this._updateRendering();\n }\n\n updateLabel(labeltext) {\n /*\n * Updates the label above/below the video field.\n */\n let gvlabel = document.querySelector(\"#\" + this.id + \"label\");\n gvlabel.innerHTML = labeltext;\n }\n\n async submit() {\n /*\n * Submits the video as a POST request. Note that buttons become disabled\n * when this happens as the form has effectively been submitted, albeit\n * asynchronously.\n */\n\n // Disables buttons; commented out disabling \"download\" based on user feedback.\n\n //let gvbutton1 = document.querySelector(\"#\" + this.id + \"download\")\n let gvbutton2 = document.querySelector(\"#\" + this.id + \"play\")\n let gvbutton3 = document.querySelector(\"#\" + this.id + \"submit\")\n let gvbutton4 = document.querySelector(\"#\" + this.id + \"recordbutton\")\n\n //gvbutton1.disabled = true;\n gvbutton2.disabled = true;\n gvbutton3.disabled = true;\n gvbutton4.disabled = true;\n\n // Creates a FormData objects and includes the file name (based on the\n // video-input element's ID) and adds the recording as a file.\n var fd = new FormData();\n const blob = new Blob(this._allblobs, {type: 'video/webm'});\n fd.append('fname', this.id + '.webm');\n fd.append('data', blob);\n\n const xhr = new XMLHttpRequest();\n xhr.open('POST', this._posturl);\n xhr.send(fd);\n\n // Updates the form field to say we're uploading the file.\n this.updateLabel(\"Uploading response... This can take a few minutes.\");\n\n // Once the file is uplaoded, we update the label.\n xhr.onload = () => {\n console.log(xhr.responseText);\n this.updateLabel(\"Upload complete! Thank you.\")\n\n }\n\n }\n\n async initializeRecording() {\n /*\n * Initialize the recording.\n */\n try {\n let constraints = getConstraints(this._width, this._height);\n const stream = await navigator.mediaDevices.getUserMedia(constraints);\n handleSuccess(stream, \"#gum\" + this.id);\n this.isRecording = true;\n this.startTimer();\n } catch (e) {\n console.error('navigator.getUserMedia error:', e);\n }\n }\n\n saveBlob(blob) {\n /*\n * Saves the recording from the global scope to the element itself.\n */\n this._mediablob = blob;\n }\n\n saveBlobArrays(blobs) {\n /*\n * Saves the recording from the global scope to the element itself.\n */\n this._allblobs = blobs;\n }\n\n async downloadblob() {\n /*\n * Enables you to download the blob as a \"webm\" file.\n */\n const blob = new Blob(this._allblobs, {type: 'video/webm'});\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.style.display = 'none';\n a.href = url;\n a.download = this.id + '.webm';\n document.body.appendChild(a);\n a.click();\n setTimeout(() => {\n document.body.removeChild(a);\n window.URL.revokeObjectURL(url);\n }, 100);\n }\n\n getBlob() {\n /*\n * Access the blob.\n */\n return this._mediablob;\n }\n\n getAllBlobs() {\n /*\n * Access the blobs.\n */\n return this._allblobs;\n }\n\n deleteRecording() {\n /*\n * Clears the blobs from memory. We don't currently use this.\n */\n this._mediablob = [];\n this._allblobs = [];\n playRec(this.id);\n }\n\n _updateRendering() {\n let innhtml = \"• recording
\";\n\n let form_field_label = \"\" + this._label + \"\"\n if (this._maxtime > 0) {\n form_field_label += \"
Max Time: \" + this._maxtime + \" seconds\";\n }\n\n let button_row = \"\"\n\n if (this._labelloc !== \"hidden\") {\n if (this._labelloc === \"top\") {\n innhtml = \"\" + form_field_label + \"
\" + button_row + \"
\" + innhtml\n } else {\n innhtml = innhtml + \"\" + form_field_label + \"
\" + button_row + \"
\"\n }\n }\n\n this.innerHTML = innhtml;\n\n }\n}\n\ncustomElements.define('video-input', VideoInput);\n"
},
{
"path": "videostyle.css",
"content": "video {\n background:black;\n padding:0px;\n margin:0px;\n}\n\n.videofieldlabel {\n color:black;\n /*background:black;*/\n padding:0px;\n margin:0px;\n margin-bottom:10px;\n}\n\nvideo-input button {\n margin-top:10px;\n margin-right:5px;\n border:1px solid gray;\n padding:5px;\n border-radius:3px;\n min-width:100px;\n}\n\n.recordersign {\n background:white;\n position:relative;\n top:25px;\n left:5px;\n font-family:arial;\n font-size:10px;\n margin-top:-20px;\n border-radius:3px;\n padding:3px;\n width:70px;\n visibility:hidden;\n}\n"
}
]