File: js/pagejquery.js

Recommend this page to a friend!
  Classes of Andras Toth   Expert JS Camera Capture   js/pagejquery.js   Download  
File: js/pagejquery.js
Role: Example script
Content type: text/plain
Description: Example 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: 3 years ago
Size: 11,211 bytes
 

Contents

Class file image Download
/*! * ExpertCamJQuery 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'; var play = $('#play'), localVideo = $('#local-video'), videoSelect = $('#video-select'), audioSelect = $('#audio-select'), shootImg = $('#shoot-img'), shoot = $('#shoot'), pause = $('#pause'), record = $('#record'), streaming = $('#streaming'), streamVideo = $('#stream-video').get(0), streamText = $('#result .caption h3').eq(0); $(streamVideo).on('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 = $('#camera-canvas').ExpertCamJQuery(args).data().plugin_ExpertCamJQuery; camera.buildSelectMenu('#video-select', '#audio-select').init(); window.cc = camera; } else { camera.stop(); streamVideo.streamSrc(); } toggleClass([record, shoot, pause], 'disabled', true); toggleClass([localVideo, play], 'disabled', false); toggleClass([audioSelect, videoSelect], 'disabled', false); audioSelect.attr('disabled', false); videoSelect.attr('disabled', false); }; Page.Play = function() { if (videoSelect.get(0).selectedIndex !== 0 || audioSelect.get(0).selectedIndex !== 0) { camera.play(); toggleClass([shoot, pause, streaming], 'disabled', false); audioSelect.attr('disabled', true); videoSelect.attr('disabled', true); } }; Page.Streaming = function() { streamText.text('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.attr('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.text('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.text('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'); $('#blur-value').text('Blur: ' + el.value.toString() + 'px'); }; Page.changeBrightnessCSS = function(el) { camera.cssFilter('brightness', el.value); $('#brightness-value').text('Brightness: ' + el.value.toString()); }; Page.changeGrayscaleCSS = function(el) { camera.cssFilter('grayscale', el.value); $('#grayscale-value').text('Grayscale: ' + el.value.toString()); }; Page.changeContrastCSS = function(el) { camera.cssFilter('contrast', el.value); $('#contrast-value').text('Contrast: ' + el.value.toString()); }; Page.changeInvertCSS = function(el) { camera.cssFilter('invert', el.value); $('#invert-value').text('Invert: ' + el.value.toString()); }; Page.changeSepiaCSS = function(el) { camera.cssFilter('sepia', el.value); $('#sepia-value').text('Sepia: ' + el.value.toString()); }; Page.changeHueCSS = function(el) { camera.cssFilter('hue-rotate', el.value.toString() + 'deg'); $('#hue-value').text('Hue: ' + el.value.toString() + 'deg'); }; Page.changeSaturateCSS = function(el) { camera.cssFilter('saturate', el.value); $('#saturate-value').text('Saturate: ' + el.value); }; function countDown(time) { var t = time; toggleClass([record], 'btn-danger', true); record.html('<span>&nbsp;' + t / 1E3 + '&nbsp;</span>'); var count = setInterval(function() { t -= 1E3; record.html('<span>&nbsp;' + t / 1E3 + '&nbsp;</span>'); if (t === 0) { window.scrollTo(0, offset(streamVideo).top - 100); clearInterval(count); toggleClass([record], 'disabled', false); record.html('<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).each(function(index, element) { if (eval(bol)) { element.addClass(cl); } else { element.removeClass(cl); } }); } }).call(window.Page = window.Page || {});