diff --git a/animations.js b/animations.js index 45b886f..d97fab2 100644 --- a/animations.js +++ b/animations.js @@ -1,28 +1,14 @@ - -/* We need to create dynamic keyframes to show the animation from full-screen to normal. So we create a stylesheet in which we can insert CSS keyframe rules */ $("body").append(''); - -/* Click on the container */ $(".column").on('click', function() { - /* The position of the container will be set to fixed, so set the top & left properties of the container */ - if ( $(this).hasClass( "skip-animation" )){ return; } - - var bounding_box = $(this).get(0).getBoundingClientRect(); $(this).css({ top: bounding_box.top + 'px', left: bounding_box.left -20+ 'px' }); - - /* Set container to fixed position. Add animation */ $(this).addClass('in-animation').removeClass('pointer'); - - /* An empty container has to be added in place of the lightbox container so that the elements below don't come up - Dimensions of this empty container is the same as the original container */ $("#empty-container").remove(); $('
').insertAfter(this); - /* To animate the container from full-screen to normal, we need dynamic keyframes */ var styles = ''; styles = '@keyframes outlightbox {'; styles += '0% {'; @@ -43,97 +29,57 @@ $(".column").on('click', function() { styles += '}'; styles += '}'; - /* Add keyframe to CSS */ $("#lightbox-animations").empty(); $("#lightbox-animations").get(0).sheet.insertRule(styles, 0); - - /* Hide the window scrollbar */ $("body").css('overflow', 'hidden'); }); - -/* Click on close button when full-screen */ $(".close").on('click', function(e) { $(this).hide(); $(".container-inner").hide(); - $("body").css('overflow', 'auto'); - var bounding_box = $(this).parent().get(0).getBoundingClientRect(); $(this).parent().css({ top: bounding_box.top + 'px', left: bounding_box.left + 'px' }); - - /* Show animation */ $(this).parent().addClass('out-animation'); - - - try{ - - var oldstream = getById('previewWebcam').srcObject; - - if (oldstream){ - log("old stream found"); - oldstream.getTracks().forEach(function(track) { - track.stop(); - oldstream.removeTrack(track); - log("stopping old track"); - }); - } - activatedPreview=false; - } catch (e){ - errorlog(e); - } - log("Cleaned up Video"); + cleanupMediaTracks(); e.stopPropagation(); }); -/* On animationend : from normal to full screen & full screen to normal */ -$(".column").on('animationend', function(e) { -/* On animation end from normal to full-screen */ -if(e.originalEvent.animationName == 'inlightbox') { - $(this).children(".close").show(); - $(this).children(".container-inner").show(); -} -/* On animation end from full-screen to normal */ -else if(e.originalEvent.animationName == 'outlightbox') { - /* Remove fixed positioning, remove animation rules */ - $(this).removeClass('in-animation').removeClass('out-animation').removeClass('columnfade').addClass('pointer'); - - /* Remove the empty container that was earlier added */ - $("#empty-container").remove(); - - /* Delete the dynamic keyframe rule that was earlier created */ - $("#lightbox-animations").get(0).sheet.deleteRule(0); -} +$(".column").on('animationend', function(e){ + if (e.originalEvent.animationName == 'inlightbox') { + $(this).children(".close").show(); + $(this).children(".container-inner").show(); + } + 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); + } }); $('#audioSource').on('mousedown touchend focusin focusout', function(e) { var state = $('#multiselect-trigger').data('state') || 0; if( state == 0 ) { - ////open the dropdown $('#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();; } - // e.preventDefault(); }); $('#audioSource3').on('mousedown touchend focusin focusout', function(e) { - var state = $('#multiselect-trigger3').data('state') || 0; + var state = $('#multiselect-trigger3').attr('data-state') || 0; if( state == 0 ) { - ////open the dropdown - $('#multiselect-trigger3').data('state', '1').addClass('open').removeClass('closed'); + $('#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();; } - // e.preventDefault(); }); -// multiselect dropdowns $('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) { var state = $(this).data('state') || 0; if( state == 0 ) { @@ -154,24 +100,22 @@ $('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) }); // multiselect dropdowns $('#multiselect-trigger3').on('mousedown touchend focusin focusout', function(e) { - var state = $(this).data('state') || 0; + var state = $(this).attr('data-state') || 0; + if( state == 0 ) { // open the dropdown - $(this).data('state', '1').addClass('open').removeClass('closed'); + 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();; } else { // close the dropdown - $(this).data('state', '0').addClass('closed').removeClass('open'); + $(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();; } e.preventDefault(); }); - - - - diff --git a/cap.webm b/cap.webm new file mode 100644 index 0000000..e8c0f07 Binary files /dev/null and b/cap.webm differ diff --git a/convert.html b/convert.html new file mode 100644 index 0000000..b4482a4 --- /dev/null +++ b/convert.html @@ -0,0 +1,74 @@ + + +
+

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

+ +


+

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. +

+ +

+ + + \ No newline at end of file diff --git a/devices.json.html b/devices.json.html new file mode 100644 index 0000000..e5f80e6 --- /dev/null +++ b/devices.json.html @@ -0,0 +1,24 @@ + + + + + + \ No newline at end of file diff --git a/iframe.html b/iframe.html index 854c5a4..da7c053 100644 --- a/iframe.html +++ b/iframe.html @@ -203,6 +203,16 @@ function loadIframe(){ // this is pretty important if you want to avoid camera button.onclick = function(){iframe.contentWindow.postMessage({"automixer":false}, '*');}; iframeContainer.appendChild(button); + var button = document.createElement("button"); + button.innerHTML = "ENABLE TALLY LIGHT"; + button.onclick = function(){iframe.contentWindow.postMessage({"sceneState":true}, '*');}; + iframeContainer.appendChild(button); + + var button = document.createElement("button"); + button.innerHTML = "STOP TALLY LIGHT"; + button.onclick = function(){iframe.contentWindow.postMessage({"sceneState":false}, '*');}; + iframeContainer.appendChild(button); + var button = document.createElement("button"); button.innerHTML = "Add Target Video"; button.onclick = function(){iframe.contentWindow.postMessage({"target":"*", "add":true, "settings":{"style":{"width":"640px", "height":"360px", "float":"left", "border":"10px solid red", "display":"block"}}}, '*');}; // target can be a stream ID or * for all. @@ -304,7 +314,33 @@ function loadIframe(){ // this is pretty important if you want to avoid camera } - + if ("sensors" in e.data){ + console.log(e.data); + if (document.getElementById("sensors")){ + outputWindow = document.getElementById("sensors"); + } else { + var outputWindow = document.createElement("div"); + outputWindow.style.border="1px dotted black"; + iframeContainer.appendChild(outputWindow); + outputWindow.id = "sensors"; + } + outputWindow.innerHTML = "child-page-action: sensors

"; + + for (var key in e.data.sensors.lin) { + outputWindow.innerHTML += key + " linear: " + e.data.sensors.lin[key] + "
"; + } + for (var key in e.data.sensors.acc) { + outputWindow.innerHTML += key + " acceleration: " + e.data.sensors.acc[key] + "
"; + } + for (var key in e.data.sensors.gyro) { + outputWindow.innerHTML += key + " gyro: " + e.data.sensors.gyro[key] + "
"; + } + for (var key in e.data.sensors.mag) { + outputWindow.innerHTML += key + " magnet: " + e.data.sensors.mag[key] + "
"; + } + outputWindow.style.border="1px black"; + + } }); } diff --git a/images/hd.svg b/images/hd.svg new file mode 100644 index 0000000..c107866 --- /dev/null +++ b/images/hd.svg @@ -0,0 +1,2 @@ + background Layer 1 + HQ diff --git a/images/mic-animate.gif b/images/mic-animate.gif new file mode 100644 index 0000000..ac8de0d Binary files /dev/null and b/images/mic-animate.gif differ diff --git a/images/mic-slash.gif b/images/mic-slash.gif new file mode 100644 index 0000000..227e427 Binary files /dev/null and b/images/mic-slash.gif differ diff --git a/images/mic.gif b/images/mic.gif new file mode 100644 index 0000000..640d9fa Binary files /dev/null and b/images/mic.gif differ diff --git a/images/obsNinja_logo_full.png b/images/obsNinja_logo_full.png index aa6e1f1..09f509c 100644 Binary files a/images/obsNinja_logo_full.png and b/images/obsNinja_logo_full.png differ diff --git a/images/old_logo.png b/images/old_logo.png new file mode 100644 index 0000000..aa6e1f1 Binary files /dev/null and b/images/old_logo.png differ diff --git a/images/sd.svg b/images/sd.svg new file mode 100644 index 0000000..7c3fa3e --- /dev/null +++ b/images/sd.svg @@ -0,0 +1,2 @@ + background Layer 1 + LQ diff --git a/index.html b/index.html index 2a0d05d..2cba57e 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ } - + @@ -47,12 +47,12 @@ - - - + + + @@ -62,8 +62,8 @@ - - + +
- You are joining room: + You are in room:
@@ -109,7 +109,7 @@
-
+
@@ -118,14 +118,29 @@
+
+ +
+
+ +
+ + Rooms allow for group-chat and the tools to manage multiple guests.

- +
- - + - - + + + + + + + + + +
+ Room Name:
+ Password: - +
-
- -

- -
+ + + + Guests can only see the Director's video + +
+ + + + Preferred Video Codec + +
+ +

+ +

@@ -204,9 +245,12 @@

- +

+ @@ -220,8 +264,8 @@ Video Source - - + +    @@ -253,7 +297,7 @@
Audio Source(s) -
+
    @@ -361,7 +405,9 @@

    Create Reusable Invite

    +
    +

    Here you can pre-generate a reusable Browser Source link and a related guest invite link. @@ -429,6 +475,12 @@ Remote Control Camera Zoom (android)
    +
    + + +
    Add a password: @@ -461,13 +513,43 @@
-
+ +
+ +

Stream Media File



- SELECT THE VIDEO FILE TO SHARE

+ SELECT THE VIDEO FILES TO SHARE

+

+

Keep this tab visible if using Chrome, else the video playback will stop

+

(Media file streaming is still quite experimental)

+
+ +
+
+ +
+
+
+ +
+

Share Website

+ +
+
+
+
+ Enter the URL website you wish to share.

+
+ +
+ Remote website must be CORS/IFrame compatible with full SSL-encryption enabled. +
@@ -478,7 +560,17 @@
- + +
+

Run a Speed Test

+ +
+ +
+

Browse the Guides

+ +
+

@@ -494,7 +586,7 @@
  • Youtube video - Demoing it here + Demoing it here

  • @@ -502,22 +594,23 @@
  • - MacOS users will need to use OBS v23 or resort to - Window Capturing with the provided Electron-Capture app for the time being. + MacOS users currently need to use a + preview version of OBS Studio 26 or resort to + window-capturing with the provided Electron-Capture app.
  • If you have "pixel smearing" or corrupted video, try adding &codec=vp9 or &codec=h264 to the OBS view link. Using Wi-Fi will make the issue worse.
  • - iOS devices may have occasional audio or camera issues, such as no sound. Fully close Safari and reopen it if nothing else seems to work. + iOS devices may have occasional audio or camera issues, such as no sound or distorted sound. Partially fixed in iOS 14.3
  • The VP9 codec on Chromium-based browsers seems to lag when screen-sharing at the moment. Use the OBS Virtual Camera as a capture source instead.

  • - 🎈 Site Updated: November 24th, 2020. The previous version can be found at - https://obs.ninja/v12/ if you are having new issues. + 🎁 Site Updated: Jan 2nd, 2021. The previous version can be found at + https://obs.ninja/v134/ if you are having new issues.

    @@ -539,67 +632,454 @@
    Icons made by - Lucy G from - www.flaticon.com is licensed by + Lucy G from + www.flaticon.com is licensed by CC 3.0 BY and by - Gregor Cresnar from - www.flaticon.com + Gregor Cresnar from + www.flaticon.com
    -
    +
    + + + + +
    + -
    - + + +
    - -
    @@ -649,50 +1142,8 @@ - - -