/*!
* 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> ' + t / 1E3 + ' </span>';
var count = setInterval(function() {
t -= 1E3;
record.innerHTML = '<span> ' + t / 1E3 + ' </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 || {});
|
Download
