mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 13:48:38 +00:00
625 lines
28 KiB
HTML
625 lines
28 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
|
|
<meta content="utf-8" http-equiv="encoding" />
|
|
<meta name="copyright" content="© 2020 Steve Seguin" />
|
|
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png" />
|
|
<link rel="icon" href="./images/favicon.ico" />
|
|
<link itemprop="thumbnailUrl" href="//images/obsNinja_logo_full.png" />
|
|
<!-- Primary Meta Tags -->
|
|
<title>OBS.Ninja</title>
|
|
<meta name="title" content="OBS.Ninja" />
|
|
<meta name="description" content="Bring live video from your smartphone, computer, or friends directly into OBS Studio. 100% free." />
|
|
<meta name="author" content="Steve Seguin" />
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:site_name" content="OBS.Ninja" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://obs.ninja/" />
|
|
<meta property="og:title" content="OBS.Ninja" />
|
|
<meta property="og:description" content="Bring live video from your smartphone, computer, or friends directly into OBS Studio. 100% free." />
|
|
<meta property="og:image" itemprop="image" content="https://obs.ninja/images/obsNinja_logo_full.png" />
|
|
<meta name="msapplication-TileImage" content="./images/obsNinja_logo_full.png" />
|
|
<meta property="og:image:type" content="image/png" />
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image" />
|
|
<meta property="twitter:url" content="https://obs.ninja/" />
|
|
<meta property="twitter:title" content="OBS.Ninja" />
|
|
<meta property="twitter:description" content="Bring live video from your smartphone, computer, or friends directly into OBS Studio. 100% free." />
|
|
<meta property="twitter:image" content="./images/obsNinja_logo_full.png" />
|
|
<meta name="msapplication-TileColor" content="#da532c" />
|
|
<meta name="theme-color" content="#ffffff" />
|
|
<!-- <script src="//console.re/connector.js" data-channel="obsninjaalpha" id="consolerescript"></script> -->
|
|
<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css">
|
|
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
|
|
<script type="text/javascript" src="./thirdparty/qrcode.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
|
|
<link rel="stylesheet" href="./main.css?ver=3" />
|
|
</head>
|
|
<body id="main" class="cat">
|
|
<span itemprop="image" itemscope itemtype="image/png">
|
|
<link itemprop="url" href="./images/obsNinja_logo_full.png" />
|
|
</span>
|
|
<link itemprop="thumbnailUrl" href="./images/obsNinja_logo_full.png" />
|
|
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
|
|
<link itemprop="url" href="./images/obsNinja_logo_full.png" />
|
|
</span>
|
|
<script language="javascript" type="text/javascript" src="./thirdparty/CodecsHandler.js?ver=8"></script>
|
|
<script language="javascript" type="text/javascript" src="./webrtc.js?ver=11"></script>
|
|
<input id="zoomSlider" type="range" style="display: none;" />
|
|
<div id="header">
|
|
<a id="logoname" href="./" style="text-decoration: none; color: white; margin: 2px;">
|
|
<span data-translate="logo-header">
|
|
<font id="qos">O</font>BS.Ninja
|
|
</span>
|
|
</a>
|
|
<div id="head1" style="display: inline-block; padding:1px; position: relative;">
|
|
<input id="joinroomID" name="joinroomID" size="22" placeholder="Join by Room Name here" />
|
|
<button style="padding:1px;margin:0;" onclick="jumptoroom();">GO</button>
|
|
</div>
|
|
<div id="head3" style="display: inline-block;" class="advanced">
|
|
<font style="color: #888;" id="copythisurl">
|
|
<span data-translate="copy-this-url">Copy this URL into an OBS "Browser Source"</span> <i style="color: #CCC;" class="las la-long-arrow-alt-right"></i>
|
|
</font>
|
|
<input
|
|
id="reshare"
|
|
data-drag="1"
|
|
onclick="popupMessage(event);copyFunction(this)"
|
|
class="task"
|
|
onmousedown="copyFunction(this)"
|
|
style="font-weight: bold; color: #afa; cursor: grab; background-color: #0000; font-size: 115%; min-width: 300px; max-width: 800px;"
|
|
/>
|
|
<i class="las la-paperclip task" style="color: #DDD;" onclick="popupMessage(event);copyFunction(document.getElementById('reshare'));" onmouseover="this.style.cursor='pointer'"></i>
|
|
</div>
|
|
<div id="head4" style="display: inline-block;" class="advanced">
|
|
<font style="font-size: 68%; color: white;">
|
|
|
|
<span data-translate="you-are-in-the-control-center">You are in the room's control center</span>:
|
|
|
|
<div id="dirroomid" style="font-size: 140%; color: #99c; display: inline-block;"></div>
|
|
</font>
|
|
</div>
|
|
<div id="head2" class="advanced" style="display: inline-block; text-decoration: none; font-size: 60%; color: white;">
|
|
<span data-translate="joining-room">You are joining room</span>:
|
|
|
|
<div id="roomid" style="display: inline-block;"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="controlButtons">
|
|
<div id="mutebutton" title="Mute the Mic" onclick="toggleMute()" class="advanced float" style="cursor: pointer;" alt="Toggle the mic">
|
|
<i id="mutetoggle" class="toggleSize las la-microphone my-float"></i>
|
|
</div>
|
|
<div id="mutevideobutton" title="Disable the Camera" onclick="toggleVideoMute()" class="advanced float" style="cursor: pointer;" alt="Toggle the camera">
|
|
<i id="mutevideotoggle" class="toggleSize las la-eye my-float"></i>
|
|
</div>
|
|
<div
|
|
id="helpbutton"
|
|
title="Show Help Info"
|
|
onclick="alert('Email steve@seguin.email if the system breaks or check https://reddit.com/r/obsninja for support.\n\nThere are some advanced options hidden away, such as persistent stream links and custom resolutions; see the Wiki.')"
|
|
class="advanced float"
|
|
style="cursor: pointer;"
|
|
alt="How to Use This with OBS"
|
|
>
|
|
<i class="toggleSize las la-question-circle my-float"></i>
|
|
</div>
|
|
<div id="hangupbutton" title="Hangup the Call" onclick="hangup()" class="advanced float" style="cursor: pointer;" alt="Disconnect and End">
|
|
<i class="toggleSize my-float las la-phone rotate225" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
<span title="Language Options" onclick="toggle(document.getElementById('languages'));" id="translateButton">
|
|
<i style="float: right; bottom: 0px; cursor: pointer; position: fixed; right: 10px; color: #d9e4eb; padding: 0; margin: 2px 2px 0 0; font-size: 140%;" class="las la-language" aria-hidden="true"></i>
|
|
</span>
|
|
<div id="mainmenu" class="row" style="opacity: 0; align: center;">
|
|
<div id="container-1" class="column columnfade" style="background-color: #ddd; overflow-y: auto;">
|
|
<h2>
|
|
<span data-translate="add-group-chat">Add Group Chat to OBS</span>
|
|
</h2>
|
|
<div class="container-inner">
|
|
<br />
|
|
<br />
|
|
<span data-translate="rooms-allow-for">Rooms allow for simplified group-chat and the advanced management of multiple streams at once.</span>
|
|
<br />
|
|
<br />
|
|
<p>
|
|
<b>
|
|
<span data-translate="room-name">Room Name</span>:
|
|
</b>
|
|
<input id="videoname1" placeholder="Enter a Room Name here" onkeyup="enterPressed(event, createRoom);" size="30" maxlength="50" style="font-size: 110%; padding: 5px;" />
|
|
<br />
|
|
<br />
|
|
</p>
|
|
<p>
|
|
<b>
|
|
<span data-translate="password-input-field">Password</span>:
|
|
</b>
|
|
<input id="passwordRoom" placeholder="Optional room password here" onkeyup="enterPressed(event, createRoom);" size="30" maxlength="50" style="font-size: 110%; padding: 5px;" />
|
|
<br />
|
|
<br />
|
|
</p>
|
|
<br />
|
|
<button onclick="createRoom()" class="gobutton">
|
|
<span data-translate="enter-the-rooms-control">Enter the Room's Control Center</span>
|
|
</button>
|
|
<br />
|
|
<button onclick="toggle(document.getElementById('roomnotes'),this);">
|
|
<span data-translate="show-tips">Show me some tips..</span>
|
|
</button>
|
|
<ul style="padding: 10px; margin: auto auto; max-width: 500px; display: none; text-align: left;" id="roomnotes">
|
|
<br />
|
|
<span data-translate="added-notes">
|
|
<u>
|
|
<i>Added Notes:</i>
|
|
</u>
|
|
<li>Invite only guests to the room you trust.</li>
|
|
<li>iOS devices will share just their audio with other guests; this is mainly a hardware limitation</li>
|
|
<li>The "Recording" option is considered experimental.</li>
|
|
</span>
|
|
</ul>
|
|
</div>
|
|
<div class="outer close">
|
|
<div class="inner">
|
|
<label class="labelclass">
|
|
<span data-translate="back">Back</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="container-3" class="column columnfade" onclick="previewWebcam()" style="background-color: #ddd; overflow-y: auto;">
|
|
<h2 id="add_camera">
|
|
<span data-translate="add-your-camera">Add your Camera to OBS</span>
|
|
</h2>
|
|
<div class="container-inner">
|
|
<br />
|
|
<p>
|
|
<video id="previewWebcam" oncanplay="updateStats();" muted controls autoplay playsinline style="max-width: 640px; max-width: 83vw; max-height: 30vh;"></video>
|
|
</p>
|
|
<div id="infof"></div>
|
|
<button onclick="publishWebcam()" id="gowebcam" class="gowebcam" disabled>
|
|
<span data-translate="waiting-for-camera">Waiting for Camera to Load</span>
|
|
</button>
|
|
<br />
|
|
<span class="videoMenu">
|
|
<i class="las la-video"></i><span data-translate="video-source"> Video Source </span>
|
|
|
|
<select id="videoSource" ></select>
|
|
<span id="gear_webcam" style="display: inline-block;" onclick="toggle(document.getElementById('videoSettings'));">
|
|
|
|
<i class="las la-cog" style="font-size: 170%; vertical-align: middle;" aria-hidden="true"></i>
|
|
</span>
|
|
</span>
|
|
<br />
|
|
<center>
|
|
<span id="videoSettings" style="display: none;">
|
|
<form id="webcamquality">
|
|
<input type="radio" id="fullhd" name="resolution" value="0" />
|
|
<label for="fullhd">
|
|
<span data-translate="max-resolution">Max Resolution</span>
|
|
</label> |
|
|
|
|
<input type="radio" checked id="halfhd" name="resolution" value="1" />
|
|
<label for="halfhd">
|
|
<span data-translate="balanced">Balanced</span>
|
|
</label> |
|
|
|
|
<input type="radio" id="nothd" name="resolution" value="2" />
|
|
<label for="nothd">
|
|
<span data-translate="smooth-cool">Smooth and Cool</span>
|
|
</label>
|
|
<div id="webcamstats" style="padding: 5px 0 0 0;"></div>
|
|
</form>
|
|
</span>
|
|
<br />
|
|
</center>
|
|
<div class="form-group multiselect">
|
|
<a class="form-control multiselect-trigger" tabindex="3">
|
|
<div id="audioTitle" class="title">
|
|
<i class="las la-microphone-alt"></i><span data-translate="select-audio-source"> Audio Source(s) </span>
|
|
<i class="chevron bottom" aria-hidden="true"></i>
|
|
<div class="meter" id="meter1"></div>
|
|
</div>
|
|
</a>
|
|
<ul id="audioSource" class="multiselect-contents">
|
|
<li>
|
|
<input type="checkbox" id="multiselect1" name="multiselect1" style="display: none;" checked value="ZZZ" />
|
|
<label for="multiselect1">
|
|
<span data-translate="no-audio">No Audio</span>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<br />
|
|
<span id="headphonesDiv" style="text-align:left; margin:17px 0; max-width: 550px; min-width: 420px; background-color: #f3f3f3; display: none; padding: 10px 10px; border: 1px solid #ccc; vertical-align: middle;">
|
|
<div id="audioTitle2" class="title">
|
|
<i class="las la-headphones"></i><span data-translate="select-output-source"> Audio Output Destination:</span></div>
|
|
<select id="outputSource" style="background-color: #FFF; padding:5px; display: display:inline-block;vertical-align: middle;"></select>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
<div class="outer close">
|
|
<div class="inner">
|
|
<label class="labelclass">
|
|
<span data-translate="back">Back</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="container-2" class="column columnfade" style="background-color: #ddd; overflow-y: auto;">
|
|
<h2 id="add_screen">
|
|
<span data-translate="remote-screenshare-obs">Remote Screenshare into OBS</span>
|
|
</h2>
|
|
<div class="container-inner">
|
|
<span data-translate="note-share-audio">
|
|
<p>
|
|
<video id="screenshare" autoplay="true" muted="true" loop src="./images/screenshare.webm" />
|
|
</p>
|
|
</span>
|
|
<br />
|
|
<button class='gobutton' style="padding: 10px; font-size: 120%;" onclick="publishScreen()">
|
|
<span data-translate="select-screen-to-share">SELECT SCREEN TO SHARE</span>
|
|
</button>
|
|
<span id="gear_screen" style="display: inline-block; cursor: pointer;" onclick="toggle(document.getElementById('videoSettings2'));">
|
|
|
|
<i class="las la-cog" style="font-size: 170%; vertical-align: middle;" aria-hidden="true"></i>
|
|
</span>
|
|
<center>
|
|
<span id="videoSettings2" style="margin: auto auto; display: none; background-color: white; vertical-aligh: middle; border: 3px solid #ccc; max-width: 500px; padding: 10px 10px 5px 10px; margin: 10px 0 5px 0;">
|
|
<form id="webcamquality2">
|
|
<input type="radio" id="fullhd2" name="resolution2" value="0" />
|
|
<label for="fullhd">
|
|
<span data-translate="max-resolution">1080p (hi-def)</span>
|
|
</label> |
|
|
|
|
<input type="radio" checked id="halfhd2" name="resolution2" value="1" />
|
|
<label for="halfhd">
|
|
<span data-translate="balanced">720p (balanced)</span>
|
|
</label> |
|
|
|
|
<input type="radio" id="nothd2" name="resolution2" value="2" />
|
|
<label for="nothd">
|
|
<span data-translate="smooth-cool">360p (smooth)</span>
|
|
</label>
|
|
<div id="webcamstats2" style="padding: 5px 0 0 0;"></div>
|
|
</form>
|
|
</span>
|
|
<br />
|
|
</center>
|
|
<p>
|
|
<span data-translate="audio-sources">Audio Sources</span>
|
|
<br />
|
|
<select id="audioSourceScreenshare" multiple style="height: 60px; width: 200px; resize: both; overflow: auto; padding: 5px;" onchange="requestAudioStream();">
|
|
<option value="screenshare" selected>
|
|
<span data-translate="screen-shrae-audio">Screen Share Audio (default)</span>
|
|
</option>
|
|
<option value="microphones">
|
|
<span data-translate="other-audio-sources">Other Audio Sources</span>
|
|
</option>
|
|
</select>
|
|
</p>
|
|
<br />
|
|
<span id="headphonesDiv2" style="background-color: #f3f3f3; display: none; padding: 5px 10px; border: 1px solid #ccc; vertical-align: middle;">
|
|
<i class="las la-headphones"></i><span data-translate="select-output-source"> Audio Output Destination:</span>:<br />
|
|
<select id="outputSourceScreenshare" style="background-color: #FFF; padding:5px; display: display:inline-block;vertical-align: middle;" onclick="requestOutputAudioStream();">
|
|
<option value="default">
|
|
<span data-translate="default">Default Device</span>
|
|
</option>
|
|
</select>
|
|
</span>
|
|
</div>
|
|
<div class="outer close">
|
|
<div class="inner">
|
|
<label class="labelclass">
|
|
<span data-translate="back">Back</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="container-4" class="column columnfade" style="background-color: #ddd; overflow-y: auto;">
|
|
<h2>
|
|
<span data-translate="create-reusable-invite">Create Reusable Invite</span>
|
|
</h2>
|
|
<div id="gencontent" class="container-inner">
|
|
<br />
|
|
<br />
|
|
<span data-translate="here-you-can-pre-generate">Here you can pre-generate a reusable Browser Source link and a related guest invite link.</span>
|
|
<br />
|
|
<br />
|
|
<p>
|
|
<input style="padding: 5px; font-size: 120%;" id="videoname4" onkeyup="enterPressed(event, generateQRPage);" placeholder="Give this media source a name (optional)" size="35" maxlength="70" style="padding: 5px;" />
|
|
<br />
|
|
<br />
|
|
</p>
|
|
<button style="padding: 20px;" class='gobutton' onclick="generateQRPage()">
|
|
<span data-translate="generate-invite-link">GENERATE THE INVITE LINK</span>
|
|
</button>
|
|
<br />
|
|
<br />
|
|
<div style="margin: 20px; max-width: 400px; text-align: left; margin: auto auto;">
|
|
<br />
|
|
<h4 style="padding: 0 0 10px 0;">
|
|
<i>
|
|
<span data-translate="advanced-paramaters">Advanced Options:</span>
|
|
</i>
|
|
</h4>
|
|
<br />
|
|
<input type="checkbox" id="invite_bitrate" />
|
|
<label for="invite_bitrate">
|
|
<span data-translate="unlock-video-bitrate">Unlock Video Bitrate (20mbps)</span>
|
|
</label>
|
|
<br />
|
|
<input type="checkbox" id="invite_vp9" />
|
|
<label for="invite_vp9">
|
|
<span data-translate="force-vp9-video-codec">Force VP9 Video Codec (less artifacting)</span>
|
|
</label>
|
|
<br />
|
|
<input type="checkbox" id="invite_stereo" />
|
|
<label for="invite_stereo">
|
|
<span data-translate="enable-stereo-and-pro">Enable Stereo and Pro HD Audio</span>
|
|
</label>
|
|
<br />
|
|
<br />
|
|
<label for="invite_quality" data-translate="video-resolution">Video Resolution: </label>
|
|
<select id="invite_quality" name="invite_quality">
|
|
<option value="-1" selected>User Selectable</option>
|
|
<option value="0">Maximum Resolution</option>
|
|
<option value="1">Balanced</option>
|
|
<option value="2">Smooth and Cool</option>
|
|
</select>
|
|
<br />
|
|
<br />
|
|
<input type="checkbox" id="invite_secure" />
|
|
<label for="invite_secure">
|
|
<span data-translate="high-security-mode">High Security Mode</span>
|
|
</label>
|
|
<br />
|
|
<input type="checkbox" id="invite_hidescreen" />
|
|
<label for="invite_hidescreen">
|
|
<span data-translate="hide-screen-share">Hide Screenshare Option</span>
|
|
</label>
|
|
<br />
|
|
<input type="checkbox" id="invite_remotecontrol" />
|
|
<label for="invite_remotecontrol">
|
|
<span data-translate="allow-remote-control">Remote Control Camera Zoom (android)</span>
|
|
</label>
|
|
<br />
|
|
<br />
|
|
<span data-translate="add-a-password-to-stream"> Add a password:</span>
|
|
<input id="invite_password" placeholder="Add an optional password" />
|
|
<br />
|
|
<br />
|
|
<span data-translate="add-the-guest-to-a-room"> Add the guest to a room:</span>
|
|
<input id="invite_joinroom" placeholder="Enter Room name here" oninput="document.getElementById('invitegroupchat').style.display='block';" />
|
|
<br />
|
|
<br />
|
|
<span id="invitegroupchat" style="display: none;">
|
|
<label for="invite_group_chat_type" data-translate="invite-group-chat-type">This room guest can:</label>
|
|
<select id="invite_group_chat_type" name="invite_group_chat_type">
|
|
<option value="0" selected data-translate="can-see-and-hear">Can see and hear the group chat</option>
|
|
<option value="1" data-translate="can-hear-only">Can only hear the group chat</option>
|
|
<option value="2" data-translate="cant-see-or-hear">Cannot hear or see the group chat</option>
|
|
</select>
|
|
</span>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<div>See the
|
|
<a style="text-decoration: none; color: blue;" target="_blank" href="https://docs.obs.ninja/advanced">documentation</a> for more options and info.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="outer close">
|
|
<div class="inner">
|
|
<label class="labelclass">
|
|
<span data-translate="back">Back</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p></p>
|
|
<div id="info" class="fullcolumn columnfade">
|
|
<center>
|
|
<div class="infoblob" align="left">
|
|
<span data-translate="info-blob">
|
|
<h2>What is OBS.Ninja</h2>
|
|
<br />
|
|
<li>100%
|
|
<b>free</b>; no downloads; no personal data collection; no sign-in
|
|
</li>
|
|
<li>Bring video from your smartphone, computer, or friends directly into your OBS video stream</li>
|
|
<li>We use cutting edge Peer-to-Peer forwarding technology that offers privacy and ultra-low latency</li>
|
|
<br />
|
|
<li>Youtube video
|
|
<i class="lab la-youtube"></i>
|
|
<a href="https://www.youtube.com/watch?v=6R_sQKxFAhg">Demoing it here</a>
|
|
</li>
|
|
<br />
|
|
<i>
|
|
<font style="color: red;">Known issues:</font>
|
|
</i>
|
|
<br />
|
|
<li>
|
|
|
|
<a href="https://github.com/steveseguin/obsninja/wiki/FAQ#mac-os">MacOS <i class="lab la-apple"></i> users</a> need to use OBS v23 or resort to
|
|
<a href="https://github.com/steveseguin/electroncapture">Window Capturing</a> a browser with OBS v25
|
|
|
|
</li>
|
|
<li>Some users will have
|
|
<a href="https://github.com/steveseguin/obsninja/wiki/FAQ#video-is-pixelated">"pixelation" problems</a> with videos. Adding
|
|
<b>&codec=vp9</b> to the OBS links will often correct it.
|
|
</li>
|
|
<br />
|
|
|
|
Site last updated: July 20th, 2020. The previous version can be found at
|
|
<a href="https://obs.ninja/v8/">https://obs.ninja/v8/</a> if you are having new issues.
|
|
|
|
|
|
<br />
|
|
<br />
|
|
<h3>
|
|
<i>
|
|
Check out the
|
|
<a href="https://www.reddit.com/r/OBSNinja/">sub-reddit</a>
|
|
<i class="lab la-reddit-alien"></i> for help and advanced info. I'm also on
|
|
|
|
<a href="https://discord.gg/EksyhGA">Discord</a> and you can email me at steve@seguin.email
|
|
|
|
</i>
|
|
</h3>
|
|
</span>
|
|
</div>
|
|
</center>
|
|
</div>
|
|
<form method="post" onsubmit="setFormSubmitting()" style="display: none;">
|
|
<input type="submit" />
|
|
</form>
|
|
<div id="credits" class="credits">
|
|
Icons made by
|
|
<a href="https://www.flaticon.com/authors/lucy-g" title="Lucy G">Lucy G</a> from
|
|
<a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by
|
|
|
|
<a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a> and by
|
|
|
|
<a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from
|
|
<a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div id="gridlayout"></div>
|
|
<div id="controls_blank" style="display: none;">
|
|
<center>
|
|
<br />
|
|
<b>
|
|
<span data-translate="remote-control-for-obs">Remote Control for OBS</span>
|
|
</b>
|
|
<br />
|
|
<button data-value="0" style="font-size: 112%;" onclick="directEnable(this);">
|
|
<span data-translate="add-to-group">Add to Group Scene</span>
|
|
</button>
|
|
<button style="font-size: 112%;" onclick="directMute(this);">
|
|
<span data-translate="mute">Mute</span>
|
|
</button>
|
|
<button style="font-size: 112%;" onclick="recordVideo(this)">
|
|
<span data-translate="record">Record</span>
|
|
</button>
|
|
<br />
|
|
<span data-translate="volume">Volume</span>:
|
|
<input type="range" min="1" max="100" value="100" onclick="directVolume(this);" />
|
|
<br />
|
|
<br />
|
|
<hr />
|
|
</center>
|
|
</div>
|
|
<nav id="context-menu" class="context-menu">
|
|
<ul class="context-menu__items">
|
|
<li class="context-menu__item">
|
|
<a href="#" class="context-menu__link" data-action="Open">
|
|
<i class="las la-external-link"></i>
|
|
<span data-translate="open-in-new-tab">Open in new Tab</span>
|
|
</a>
|
|
</li>
|
|
<li class="context-menu__item">
|
|
<a href="#" class="context-menu__link" data-action="Copy">
|
|
<i class="las la-paperclip"></i>
|
|
<span data-translate="copy-to-clipboard">Copy to Clipboard</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div id="messagePopup" class="popup-message"></div>
|
|
<div id="languages" class="popup-message" style="display: none; right: 0; bottom: 25px; position: absolute;">
|
|
<b>Available Languages:</b>
|
|
<br />
|
|
<u>
|
|
<a onclick="changeLg('ru');toggle(document.getElementById('languages'));" style="cursor: pointer;">Russian</a>
|
|
<br />
|
|
<a onclick="changeLg('fr');toggle(document.getElementById('languages'));" style="cursor: pointer;">French</a>
|
|
<br />
|
|
<a onclick="changeLg('en');toggle(document.getElementById('languages'));" style="cursor: pointer;">English</a>
|
|
<br />
|
|
<a onclick="changeLg('pt');toggle(document.getElementById('languages'));" style="cursor: pointer;">Portuguese </a>
|
|
<br />
|
|
<a onclick="changeLg('it');toggle(document.getElementById('languages'));" style="cursor: pointer;">Italian </a>
|
|
<br />
|
|
<a onclick="changeLg('de');toggle(document.getElementById('languages'));" style="cursor: pointer;">German </a>
|
|
<br />
|
|
<a onclick="changeLg('es');toggle(document.getElementById('languages'));" style="cursor: pointer;">Spanish </a>
|
|
<br />
|
|
<a onclick="changeLg('nl');toggle(document.getElementById('languages'));" style="cursor: pointer;">Dutch </a>
|
|
<br />
|
|
</u>
|
|
<br />
|
|
<a href="https://github.com/steveseguin/obsninja/tree/master/translations">Add More Here!</a>
|
|
<br />
|
|
</div>
|
|
<script>
|
|
var session = WebRTC.Media; // session is a required global variable if configuring manually. Run before loading main.js but after webrtc.js.
|
|
|
|
session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed
|
|
|
|
session.configuration = {
|
|
iceServers: [
|
|
{ urls: ["stun:stun.l.google.com:19302", "stun:stun4.l.google.com:19302"] }, // more than 4 stun+turn servers may cause issues
|
|
],
|
|
};
|
|
|
|
var turn = {};
|
|
turn.username = "steve";
|
|
turn.credential = "justtesting";
|
|
turn.urls = ["turn:turn.obs.ninja:443"]; // US CENTRAL
|
|
session.configuration.iceServers.push(turn);
|
|
|
|
turn = {};
|
|
turn.username = "steve";
|
|
turn.credential = "justtesting";
|
|
turn.urls = ["turn:turn2.obs.ninja:3478?transport=tcp"]; // US WEST
|
|
session.configuration.iceServers.push(turn);
|
|
|
|
// session.configuration.iceTransportPolicy = "relay"; // uncomment to enable "&privacy" and force the TURN server
|
|
|
|
///// The following lets you set the defaults
|
|
|
|
// session.webcamonly // true,false
|
|
// session.stereo // 0,1,2,3
|
|
// session.audiobitrate // int in kbps
|
|
// session.view // "xxxx"
|
|
// session.remote
|
|
// session.optimize
|
|
// session.disableOBS
|
|
// session.audio
|
|
// session.video
|
|
// session.forceios
|
|
// session.nocursor
|
|
// session.codec
|
|
// session.scale
|
|
// session.bitrate // int in kbps
|
|
// session.height // int
|
|
// session.width // int
|
|
// session.quality // int
|
|
// session.sink
|
|
// session.offsetChannel // int
|
|
// session.audioChannels // int
|
|
// session.security
|
|
// session.framerate // int
|
|
// session.sync
|
|
// session.buffer // int in milliseconds
|
|
// session.roomid // "yyyy"
|
|
// session.scene
|
|
// session.title // "zzzz"
|
|
</script>
|
|
<!--
|
|
// If you wish to change branding, blank offers a good clean start.
|
|
<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
|
|
-->
|
|
<script type="text/javascript" id="main-js" src="./main.js?ver=11"></script>
|
|
<script type="text/javascript" src="./animations.js?ver=1"></script>
|
|
</body>
|
|
</html>
|