File: js/page.js

Recommend this page to a friend!
  Classes of Andras Toth   Expert JS Camera Capture   js/page.js   Download  
File: js/page.js
Role: Unit test script
Content type: text/plain
Description: Unit test script
Class: Expert JS Camera Capture
Capture video and audio and save to files
Author: By
Last change: V 2.0.0

-add Jquery version
-some minor bug fixed
Date: 2 years ago
Size: 11,544 bytes
 

Contents

Class file image Download
/*! * ExpertCamJS 2.0.0 javascript video-camera handler * Author: Tóth András * Web: http://atandrastoth.co.uk * email: atandrastoth@gmail.com * Licensed under the MIT license */ (function(undefined) { 'use strict'; function Q(el) { if (typeof el === 'string') { var els = document.querySelectorAll(el); return typeof els === 'undefined' ? undefined : els.length > 1 ? els : els[0]; } return el; } var txt = 'innerText' in HTMLElement.prototype ? 'innerText' : 'textContent'; var play = Q('#play'), localVideo = Q('#local-video'), videoSelect = Q('#video-select'), audioSelect = Q('#audio-select'), shootImg = Q('#shoot-img'), shoot = Q('#shoot'), pause = Q('#pause'), record = Q('#record'), streaming = Q('#streaming'), streamVideo = Q('#stream-video'), streamText = Q('#result .caption h3')[1]; streamVideo.onended = function(e) { this.removeAttribute('src'); }; var isWebpSupport = !!navigator.webkitGetUserMedia || (navigator.mediaDevices && navigator.userAgent.indexOf('Edge') !== -1); var camera; var args = { getDevicesError: function(error) { var p, message = 'Error detected with the following parameters:\n'; for (p in error) { message += p + ': ' + error[p] + '\n'; } alert(message); }, getUserMediaError: function(error) { var p, message = 'Error detected with the following parameters:\n'; for (p in error) { message += p + ': ' + error[p] + '\n'; } alert(message); }, cameraError: function(error) { var p, message = "Error detected with the following parameters:\n"; if (error.name == "NotSupportedError" || (error.name == "PermissionDeniedError" && error.message == "Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).")) { var ans = confirm("Your browser does not support getUserMedia via HTTP!\n(see: https://goo.gl/Y0ZkNV).\n You want to see github demo page in a new window?"); if (ans) { window.open("https://andrastoth.github.io/expertcamjs/"); } } else { for (p in error) { message += p + ": " + error[p] + "\n"; } alert(message); } }, cameraSuccess: function() { toggleClass([streaming, record], 'disabled', false); } }; Page.On = function() { if (!camera) { camera = new ExpertCamJS('#camera-canvas').init(args).buildSelectMenu('#video-select', '#audio-select'); } else { camera.stop(); streamVideo.streamSrc(); } toggleClass([record, shoot, pause], 'disabled', true); toggleClass([localVideo, play], 'disabled', false); audioSelect.disabled = false; videoSelect.disabled = false; }; Page.Play = function() { if (videoSelect.selectedIndex !== 0 || audioSelect.selectedIndex !== 0) { camera.play(); toggleClass([shoot, pause, streaming], 'disabled', false); audioSelect.disabled = true; videoSelect.disabled = true; } }; Page.Streaming = function() { streamText[txt] = 'Captured stream'; streamVideo.controls = false; streamVideo.muted = true; if (camera && camera.getStream()) { streamVideo.streamSrc(camera.getStream()); } else { streamVideo.streamSrc(); } }; Page.Stop = function() { if (camera.isInitialized()) { camera.pause(); } }; Page.Shoot = function() { if (camera) { var src = camera.getLastImageSrc(); shootImg.setAttribute('src', src); } }; Page.LocalVideo = function() { if (camera) { toggleClass([record, streaming, play, pause], 'disabled', true); toggleClass([shoot], 'disabled', false); camera.playLocalVideo(); } }; Page.FullScreen = function() { if (camera) { camera.toggleFullScreen(); } }; Page.StartRecord = function() { streamVideo.removeAttribute('src'); var stream = camera.getStream(); if (stream) { toggleClass([record], 'disabled', true); var filename = (new Date().getTime().toString()); var multiStreamRecorder; var hasAudio = Boolean(stream.getAudioTracks().length); var hasVideo = Boolean(stream.getVideoTracks().length); if (hasAudio && hasVideo && !isWebpSupport) { multiStreamRecorder = new MediaStreamRecorder(stream); multiStreamRecorder.mimeType = 'video/webm'; multiStreamRecorder.width = camera.options.width; multiStreamRecorder.height = camera.options.height; } else if (hasAudio && hasVideo && isWebpSupport) { multiStreamRecorder = new MultiStreamRecorder(stream); multiStreamRecorder.video = camera.getVideo(); multiStreamRecorder.width = camera.options.width; multiStreamRecorder.height = camera.options.height; multiStreamRecorder.audioChannels = 1; } else if (hasAudio && !hasVideo) { multiStreamRecorder = new MediaStreamRecorder(stream); multiStreamRecorder.mimeType = 'audio/ogg'; multiStreamRecorder.audioChannels = 1; } else if (!hasAudio && hasVideo) { multiStreamRecorder = new MediaStreamRecorder(stream); multiStreamRecorder.mimeType = 'video/webm'; multiStreamRecorder.width = camera.options.width; multiStreamRecorder.height = camera.options.height; } multiStreamRecorder.ondataavailable = function(blob) { /*Without upload*/ var url = window.URL || window.webkitURL; if (isWebpSupport && hasAudio && hasVideo) { window.open(url.createObjectURL(blob.video)); window.open(url.createObjectURL(blob.audio)); } else { window.open(url.createObjectURL(blob)); } /*With upload*/ /* streamVideo.src = 'media/loading.webm'; streamText[txt] = 'Processing video'; streamVideo.controls = false; streamVideo.loop = true; var data = new FormData(); if (isWebpSupport && hasAudio && hasVideo) { data.append('audio-filename', filename + '.ogg'); data.append('audio-blob', blob.audio); data.append('video-filename', filename + '.webm'); data.append('video-blob', blob.video); } else if (hasVideo) { data.append('video-filename', filename + '.webm'); data.append('video-blob', blob); } else { data.append('audio-filename', filename + '.ogg'); data.append('audio-blob', blob); } xhr('save.php', data, function(fileURL) { if (validURL(fileURL)) { streamVideo.src = fileURL; streamText[txt] = 'Recorded stream'; streamVideo.controls = true; streamVideo.loop = false; streamVideo.muted = false; } else { alert(fileURL); } }); */ }; setTimeout(function() { multiStreamRecorder.stop(); }, 5E3); multiStreamRecorder.start(5E3); countDown(5E3); } }; Page.changeBlurCSS = function(el) { camera.cssFilter('blur', el.value.toString() + 'px'); document.querySelector('#blur-value')[txt] = 'Blur: ' + el.value.toString() + 'px'; }; Page.changeBrightnessCSS = function(el) { camera.cssFilter('brightness', el.value); document.querySelector('#brightness-value')[txt] = 'Brightness: ' + el.value.toString(); }; Page.changeGrayscaleCSS = function(el) { camera.cssFilter('grayscale', el.value); document.querySelector('#grayscale-value')[txt] = 'Grayscale: ' + el.value.toString(); }; Page.changeContrastCSS = function(el) { camera.cssFilter('contrast', el.value); document.querySelector('#contrast-value')[txt] = 'Contrast: ' + el.value.toString(); }; Page.changeInvertCSS = function(el) { camera.cssFilter('invert', el.value); document.querySelector('#invert-value')[txt] = 'Invert: ' + el.value.toString(); }; Page.changeSepiaCSS = function(el) { camera.cssFilter('sepia', el.value); document.querySelector('#sepia-value')[txt] = 'Sepia: ' + el.value.toString(); }; Page.changeHueCSS = function(el) { camera.cssFilter('hue-rotate', el.value.toString() + 'deg'); document.querySelector('#hue-value')[txt] = 'Hue: ' + el.value.toString() + 'deg'; }; Page.changeSaturateCSS = function(el) { camera.cssFilter('saturate', el.value); document.querySelector('#saturate-value')[txt] = 'Saturate: ' + el.value; }; function countDown(time) { var t = time; toggleClass([record], 'btn-danger', true); record.innerHTML = '<span>&nbsp;' + t / 1E3 + '&nbsp;</span>'; var count = setInterval(function() { t -= 1E3; record.innerHTML = '<span>&nbsp;' + t / 1E3 + '&nbsp;</span>'; if (t === 0) { window.scrollTo(0, offset(streamVideo).top - 100); clearInterval(count); toggleClass([record], 'disabled', false); record.innerHTML = '<span class="glyphicon glyphicon-record""></span>'; toggleClass([record], 'btn-danger', false); } }, 1E3); } function offset(el) { var rect = el.getBoundingClientRect(), scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, scrollTop = window.pageYOffset || document.documentElement.scrollTop; return { top: rect.top + scrollTop, left: rect.left + scrollLeft }; } function xhr(url, data, callback) { var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { callback(request.responseText); } }; request.open('POST', url); request.send(data); } function validURL(str) { return /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/.test(str); } function toggleClass(el, cl, bol) { el.forEach(function(element, index) { var list = element.classList; if (eval(bol)) { list.add(cl); } else { list.remove(cl); } }); } }).call(window.Page = window.Page || {});