From 5b86a4f9062c3d42cf1063ed0aba246439e87b9b Mon Sep 17 00:00:00 2001 From: Steve Seguin Date: Wed, 27 Jan 2021 10:05:42 -0500 Subject: [PATCH] version v15.1 --- animations.js | 119 +- convert.html | 106 +- dock.html | 31 +- electron.html | 8 +- index.html | 594 +- main.css | 180 +- main.js | 18149 ++++++++++++++++++----------------- thirdparty/StreamSaver.js | 4 + thirdparty/mitm.html | 7 + thirdparty/polyfill.min.js | 4 + thirdparty/sw.js | 4 + webrtc.js | 2 +- 12 files changed, 10171 insertions(+), 9037 deletions(-) create mode 100644 thirdparty/StreamSaver.js create mode 100644 thirdparty/mitm.html create mode 100644 thirdparty/polyfill.min.js create mode 100644 thirdparty/sw.js diff --git a/animations.js b/animations.js index 888d039..af6129f 100644 --- a/animations.js +++ b/animations.js @@ -1,37 +1,33 @@ $("body").append(''); $(".column").on('click', function() { - if ($(this).hasClass("skip-animation")){ + if ( $(this).hasClass( "skip-animation" )){ return; } - - const bounding_box = $(this).get(0).getBoundingClientRect(); - $(this).css({ top: `${bounding_box.top}px`, left: `${bounding_box.left - 20}px` }); + var bounding_box = $(this).get(0).getBoundingClientRect(); + $(this).css({ top: bounding_box.top + 'px', left: bounding_box.left -20+ 'px' }); $(this).addClass('in-animation').removeClass('pointer'); $("#empty-container").remove(); $('
').insertAfter(this); - - const styles = ` - @keyframes outlightbox { - 0% { - height: 100%; - width: 100%; - top: 0px; - left: 0px; - } - 50% { - height: 200px; - top: ${bounding_box.y}px; - } - - 100% { - height: 200px; - width: ${bounding_box.width}px; - top: ${bounding_box.y}px; - left: ${bounding_box.x}px; - } - } - `; + var styles = ''; + styles = '@keyframes outlightbox {'; + styles += '0% {'; + styles += 'height: 100%;'; + styles += 'width: 100%;'; + styles += 'top: 0px;'; + styles += 'left: 0px;'; + styles += '}'; + styles += '50% {'; + styles += 'height: 200px;'; + styles += 'top: ' + bounding_box.y + 'px;'; + styles += '}'; + styles += '100% {'; + styles += 'height: 200px;'; + styles += 'width: '+bounding_box.width+'px;'; + styles += 'top: ' + bounding_box.y + 'px;'; + styles += 'left: ' + bounding_box.x + 'px;'; + styles += '}'; + styles += '}'; $("#lightbox-animations").empty(); $("#lightbox-animations").get(0).sheet.insertRule(styles, 0); @@ -42,20 +38,19 @@ $(".close").on('click', function(e) { $(this).hide(); $(".container-inner").hide(); $("body").css('overflow', 'auto'); - - const bounding_box = $(this).parent().get(0).getBoundingClientRect(); - $(this).parent().css({ top: `${bounding_box.top}px`, left: `${bounding_box.left}px` }); + var bounding_box = $(this).parent().get(0).getBoundingClientRect(); + $(this).parent().css({ top: bounding_box.top + 'px', left: bounding_box.left + 'px' }); $(this).parent().addClass('out-animation'); cleanupMediaTracks(); e.stopPropagation(); }); $(".column").on('animationend', function(e){ - if (e.originalEvent.animationName === 'inlightbox') { + if (e.originalEvent.animationName == 'inlightbox') { $(this).children(".close").show(); $(this).children(".container-inner").show(); } - else if (e.originalEvent.animationName === 'outlightbox') { + else if (e.originalEvent.animationName == 'outlightbox') { $(this).removeClass('in-animation').removeClass('out-animation').removeClass('columnfade').addClass('pointer'); $("#empty-container").remove(); $("#lightbox-animations").get(0).sheet.deleteRule(0); @@ -63,64 +58,64 @@ $(".column").on('animationend', function(e){ }); -$('#audioSource').on('mousedown touchend focusin focusout', (_e) => { - const state = $('#multiselect-trigger').data('state') || 0; - if (state === 0) { - $('#multiselect-trigger').data('state', '1').addClass('open').removeClass('closed'); - $('#multiselect-trigger').find('.chevron').removeClass('bottom'); - $('#multiselect-trigger').parent().find('.multiselect-contents').show(); - $('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show(); - $('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').show(); - } +$('#audioSource').on('mousedown touchend focusin focusout', function(e) { + var state = $('#multiselect-trigger').data('state') || 0; + if( state == 0 ) { + $('#multiselect-trigger').data('state', '1').addClass('open').removeClass('closed'); + $('#multiselect-trigger').find('.chevron').removeClass('bottom'); + $('#multiselect-trigger').parent().find('.multiselect-contents').show(); + $('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();; + $('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();; + } }); -$('#audioSource3').on('mousedown touchend focusin focusout', (_e) => { - const state = $('#multiselect-trigger3').attr('data-state') || 0; - if (state === 0) { - $('#multiselect-trigger3').attr('data-state', '1').addClass('open').removeClass('closed'); - $('#multiselect-trigger3').find('.chevron').removeClass('bottom'); - $('#multiselect-trigger3').parent().find('.multiselect-contents').show(); - $('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show(); - $('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').show(); - } +$('#audioSource3').on('mousedown touchend focusin focusout', function(e) { + var state = $('#multiselect-trigger3').attr('data-state') || 0; + if( state == 0 ) { + $('#multiselect-trigger3').attr('data-state', '1').addClass('open').removeClass('closed'); + $('#multiselect-trigger3').find('.chevron').removeClass('bottom'); + $('#multiselect-trigger3').parent().find('.multiselect-contents').show(); + $('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();; + $('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();; + } }); $('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) { - const state = $(this).data('state') || 0; - if( state === 0 ) { + var state = $(this).data('state') || 0; + if( state == 0 ) { // open the dropdown $(this).data('state', '1').addClass('open').removeClass('closed'); $(this).find('.chevron').removeClass('bottom'); $(this).parent().find('.multiselect-contents').show(); - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show(); - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show(); + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();; + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();; } else { // close the dropdown $(this).data('state', '0').addClass('closed').removeClass('open'); $(this).find('.chevron').addClass('bottom'); - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide(); - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide(); + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();; + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();; } e.preventDefault(); }); // multiselect dropdowns $('#multiselect-trigger3').on('mousedown touchend focusin focusout', function(e) { - const state = $(this).attr('data-state') || 0; + var state = $(this).attr('data-state') || 0; - if(state === 0) { + if( state == 0 ) { // open the dropdown - errorlog(`STATE: ${state}`); + errorlog("STATE: "+state); $(this).attr('data-state', '1').addClass('open').removeClass('closed'); $(this).find('.chevron').removeClass('bottom'); $(this).parent().find('.multiselect-contents').show(); - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show(); - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show(); + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();; + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();; } else { // close the dropdown $(this).attr('data-state', '0').addClass('closed').removeClass('open'); $(this).find('.chevron').addClass('bottom'); - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide(); - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide(); + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();; + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();; } e.preventDefault(); }); diff --git a/convert.html b/convert.html index b4482a4..17275a8 100644 --- a/convert.html +++ b/convert.html @@ -1,20 +1,76 @@ - + + + + + + +
-

This tool can be used to convert WebM videos of dynamic resolution to MP4 files of a fixed 1280x720 resolution.

Just select a video file and wait. It takes about 60-seconds to transcode 1-second of video. Very sloowww...
-

You can use FFMpeg locally to achieve much faster results.

-

This tool performs the following action in your browser: fmpeg -i input.webm -vf scale=1280:720 output.mp4

+

Web-based Media Conversion Tools

+
+

Transcodes WebM files to MP4 files with a fixed 1280x720 resolution. (very slow!)


+

This tool performs the following action in your browser: fmpeg -i input.webm -vf scale=1280:720 output.mp4

 -
-

Bonus: This option converts MKV files to MP4 files without transcoding.

fmpeg -i INPUTFILE -vcodec copy -acodec copy output.mp4 -

-

You can use FFMpeg locally to achieve much faster results with either option.

-

This option converts WebM files to MP4 files without transcoding, and attempting to force high resolutions. -

-

+
+

Remuxes MKV files to MP4 files without transcoding.


fmpeg -i INPUTFILE -vcodec copy -acodec copy output.mp4 +
+ +
+ +

Remuxes WebM files to MP4 files without transcoding (attempts to force high resolutions, also)

+ + +
+

Remuxes WebM to Audio-only files (opus or wav)

+ + +
+ + \ No newline at end of file diff --git a/dock.html b/dock.html index 5a525b5..e29e66a 100644 --- a/dock.html +++ b/dock.html @@ -117,22 +117,25 @@ function generateInvite(){ if (getById("invite_vp9").checked){ viewstr+="&codec=vp9"; } + if (getById("invite_h264").checked){ + viewstr+="&codec=h264"; + } if (getById("invite_stereo").checked){ viewstr+="&stereo"; sendstr+="&stereo"; } - if (getById("invite_secure").checked){ - sendstr+="&secure"; - } + //if (getById("invite_secure").checked){ + // sendstr+="&secure"; + //} if (getById("invite_hidescreen").checked){ sendstr+="&webcam"; } - if (getById("invite_remotecontrol").checked){ // - var remote_gen_id = generateStreamID(); - sendstr+="&remote="+remote_gen_id; // security - viewstr+="&remote="+remote_gen_id; - } + //if (getById("invite_remotecontrol").checked){ // + // var remote_gen_id = generateStreamID(); + // sendstr+="&remote="+remote_gen_id; // security + // viewstr+="&remote="+remote_gen_id; + //} if (getById("invite_joinroom").value.trim().length){ sendstr+="&room="+getById("invite_joinroom").value.replace(/[\W]+/g,"_"); @@ -231,7 +234,9 @@ document.addEventListener("dragstart", event => {
- + +
+

@@ -245,17 +250,11 @@ document.addEventListener("dragstart", event => {

- - -

- -
-
- +

diff --git a/electron.html b/electron.html index 9500a34..a12ff59 100644 --- a/electron.html +++ b/electron.html @@ -125,7 +125,7 @@ input[type='checkbox']:checked {
- + @@ -164,9 +164,9 @@ input[type='checkbox']:checked { * */ -//if (navigator.userAgent.indexOf('Mac OS X') != -1){ -// document.getElementById("warning4mac").style.display="block"; -//} +if (navigator.userAgent.indexOf('Mac OS X') != -1){ + document.getElementById("warning4mac").style.display="block"; +} var audioOutputSelect = document.querySelector('select#audioOutput'); audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype); diff --git a/index.html b/index.html index 1bac4ef..9bdf4be 100644 --- a/index.html +++ b/index.html @@ -52,7 +52,9 @@ - + + + @@ -63,7 +65,7 @@ - +