elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-23 11:28:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Version 8 - release (part1)

Browse Source
This commit is contained in:
Steve Seguin 2020-06-28 02:52:53 -04:00 committed by GitHub
parent 832c584956
commit e61d6f4830
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 1176 additions and 816 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dock.html
View File

@ -139,8 +139,8 @@ function generateInvite(){
}
}
sendstr = 'https://' + location.host + location.pathname + '?push=' + sid + sendstr;
viewstr = 'https://' + location.host+ location.pathname + '?view=' + sid + viewstr + title;
sendstr = 'https://obs.ninja/?push=' + sid + sendstr;
viewstr = 'https://obs.ninja/?view=' + sid + viewstr + title;
getById("container-setup").style.display="none";
getById("container-links").style.display="block";

BIN
images/screenshare.webm Normal file
View File

Binary file not shown.

978
index.html
View File

@ -1,413 +1,593 @@
<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="&copy; 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="./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="256">
<meta property="og:image:height" content="256">
<!-- 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="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-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" />
</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=2"></script>
<script language="javascript" type="text/javascript" src="./webrtc.js?ver=3"></script>
<input id='zoomSlider'type="range" style="display:none">
<div id="header">
<font style="font-size:130%;">
<a href="./" style="text-decoration:none;color:white;margin: 2px;" id="logoname">
<span data-translate="logo-header"><font id="qos">O</font>BS.Ninja </a></span>
<div id="head1" style="display:inline-block;position:relative;">
<input id="joinroomID" name="joinroomID" size=26 placeholder=" Join by Room Name here"></input>
<button style="padding:0px;margin: 0 0;background-color:#CCC;" onclick="jumptoroom();">&nbsp;<span data-translate="GO">GO</span>&nbsp;</button>
</div>
<div id="head3" style="display:inline-block" class='advanced'>
<font style='font-size:80%;color:#888' id="copythisurl"> &nbsp; <span data-translate="copy-this-url">Copy this URL into an OBS "Browser Source"</span> => &nbsp; </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:#202;border: 2px solid black; padding:5px; font-size:115%; min-width:550px;max-width:700px;" />
<i class="fa fa-paperclip task" aria-hidden="true" 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;" > &nbsp; <span data-translate="you-are-in-the-control-center">You are in the room's control center</span>:&nbsp; <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>
</font>
<span onclick="toggle(document.getElementById('languages'));" id="translateButton" style="cursor:pointer;" ><i style="float:right; bottom:0px; cursor:pointer; position: absolute;right: 10px;color: #D9E4EB;padding: 0;margin:2px 2px 0 0 ; font-size: 140%;" class="fa fa-language" aria-hidden="true"></i></span>
<hr />
</div>
<div id="mutebutton" onclick="toggleMute()" class='advanced float3' style="cursor:pointer" alt="Toggle the mic">
<i id="mutetoggle" class="toggleSize fa fa-microphone my-float"></i>
</div>
<div id="mutevideobutton" onclick="toggleVideoMute()" class='advanced float4' style="cursor:pointer" alt="Toggle the camera">
<i id="mutevideotoggle" class="toggleSize fa fa-eye my-float"></i>
</div>
<div id="helpbutton" 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.')" class='advanced float2' style="cursor:pointer" alt="How to Use This with OBS">
<i class="toggleSize fa fa-question-circle my-float"></i>
</div>
<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>
<br />
<button onclick="createRoom()" class="gowebcam"><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>Anyone can enter a room if they know the name, so keep it unique</li>
<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>
<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="&copy; 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="./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="256" />
<meta property="og:image:height" content="256" />
<!-- 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" />
</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=5"></script>
<script language="javascript" type="text/javascript" src="./webrtc.js?ver=6"></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>
</ul>
</a>
<div id="head1" style="display: inline-block; position: relative;">
</div>
<div class="outer close">
<div class="inner">
<label class="labelclass"><span data-translate="back">Back<span></label>
</div>
<div id="head3" style="display: inline-block;" class="advanced">
<font style="color: #888;" id="copythisurl"> &nbsp;
<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> &nbsp;
</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;">
&nbsp;
<span data-translate="you-are-in-the-control-center">You are in the room's control center</span>:&nbsp;
<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>
<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 style=" background-color: #f3f3f3; display: inline-block; padding:5px 10px; border: 1px solid #ccc; vertical-align: middle;">
<span data-translate="video-source">Video source</span>: <select id="videoSource" style="background-color: #FFF; padding:5px; display: display:inline-block;vertical-align: middle;"></select>
<span id="gear_webcam" style="display:inline-block" onclick="toggle(document.getElementById('videoSettings'));">
&nbsp;&nbsp;<i class="fa fa-cog" style="font-size: 170%; vertical-align: middle;" aria-hidden="true"></i>
</span>
</span><br />
<center>
<span id='videoSettings' style="margin:auto auto; display:none; background-color: #f3f3f3; max-width:500px; padding:10px 0; margin: 0 0 5px 0;">
<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" style="padding:5px" class="title"><span data-translate="select-audio-source">Select Audio Source</span>:<i class="fa fa-chevron-down" aria-hidden="true"></i> </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>
<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>
<div class="outer close">
<div class="inner">
<label class="labelclass"><span data-translate="back">Back</span></label>
<div class="outer close">
<div class="inner">
<label class="labelclass">
<span data-translate="back">Back</span>
</label>
</div>
</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">
<p><span data-translate="note-share-audio">
<b>note</b>: Do not forget to click "Share audio" in Chrome.<br />(Firefox does not support audio sharing.)</p>
<p><img id="screenshare" /></p>
</span>
<br />
<button style="padding:13px;border:3px solid #CCC; font-size:140%; cursor:pointer; background-color:#FFF" 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'));">
&nbsp;&nbsp;<i class="fa fa-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 0 5px 0; 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> &nbsp;&nbsp;|&nbsp;&nbsp;
<input type="radio" checked id="halfhd2" name="resolution2" value="1">
<label for="halfhd"><span data-translate="balanced">720p (balanced)</span> </label> &nbsp;&nbsp;|&nbsp;&nbsp;
<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>
</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;" 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 /><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><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="fa fa-youtube-play" aria-hidden="true"></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><i class="fa fa-apple" aria-hidden="true"></i> <a href='https://github.com/steveseguin/obsninja/wiki/FAQ#mac-os'>MacOS 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: June 17th, 2020. The previous version can be found at <a href="https://obs.ninja/v6/">https://obs.ninja/v6/</a> if you are having new issues.
<br /><br />
<i><h3>Check out the <a href="https://www.reddit.com/r/OBSNinja/">sub-reddit</a> <i class="fa fa-reddit-alien" aria-hidden="true"></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>
<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 style="background-color: #f3f3f3; display: inline-block; padding: 5px 10px; border: 1px solid #ccc; vertical-align: middle;">
<span data-translate="video-source">Video source</span>:
<select id="videoSource" style="background-color: #FFF; padding:5px; display: display:inline-block;vertical-align: middle;"></select>
<span id="gear_webcam" style="display: inline-block;" onclick="toggle(document.getElementById('videoSettings'));">
&nbsp;&nbsp;
<i class="las la-cog" style="font-size: 170%; vertical-align: middle;" aria-hidden="true"></i>
</span>
</span>
<br />
<center>
<span id="videoSettings" style="margin: auto auto; display: none; background-color: #f3f3f3; max-width: 500px; padding: 10px 0; margin: 0 0 5px 0;">
<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" style="padding: 5px;" class="title">
<span data-translate="select-audio-source">Select Audio Source</span>:
<i class="las la-chevron-down" aria-hidden="true"></i>
</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>
</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'));">
&nbsp;&nbsp;
<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 0 5px 0; 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> &nbsp;&nbsp;|&nbsp;&nbsp;
<input type="radio" checked id="halfhd2" name="resolution2" value="1" />
<label for="halfhd">
<span data-translate="balanced">720p (balanced)</span>
</label> &nbsp;&nbsp;|&nbsp;&nbsp;
<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>
</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: June 28th, 2020. The previous version can be found at
<a href="https://obs.ninja/v7/">https://obs.ninja/v7/</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>
</p></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="var video = document.getElementById('videosource_'+this.parentNode.parentNode.dataset.UUID);recordVideo(event.currentTarget,video,this.parentNode.parentNode.dataset.UUID);"><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="fa fa-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="fa fa-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 />
</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:443"]; // 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.
</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 />
</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:443"]; // 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>
<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=5"></script>
<script type="text/javascript" src="./animations.js"></script>
</body>
<script type="text/javascript" src="./animations.js"></script>
</body>
</html>

254
main.css
View File

File diff suppressed because one or more lines are too long

605
main.js
View File

File diff suppressed because it is too large Load Diff

149
thirdparty/CodecsHandler.js vendored
View File

@ -3,23 +3,23 @@ The MIT License (MIT)
Copyright (c) 2012-2020 [Muaz Khan](https://github.com/muaz-khan)
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
// Sourced from: https://cdn.webrtc-experiment.com/CodecsHandler.js
// *FILE HAS BEEN HEAVILY MODIFIED BY STEVE SEGUIN. ALL RIGHTS RESERVED WHERE APPLICABLE *
@ -121,11 +121,11 @@ var CodecsHandler = (function() {
return info;
}
function extractSdp(sdpLine, pattern) {
var result = sdpLine.match(pattern);
return (result && result.length == 2)? result[1]: null;
}
function extractSdp(sdpLine, pattern) {
var result = sdpLine.match(pattern);
return (result && result.length == 2)? result[1]: null;
}
function disableNACK(sdp) {
if (!sdp || typeof sdp !== 'string') {
@ -169,30 +169,85 @@ var CodecsHandler = (function() {
return (result && result.length === 2) ? result[1] : null;
}
function setVideoBitrates(sdp, params, codec) { // modified + Improved by Steve.
if (codec){
codec = codec.toUpperCase();
} else{
codec="VP8";
}
var sdpLines = sdp.split('\r\n');
function getVideoBitrates(sdp) {
// Search for m line.
var mLineIndex = findLine(sdpLines, 'm=', 'video');
if (mLineIndex === null) {
return sdp;
}
// Figure out the first codec payload type on the m=video SDP line.
var videoMLine = sdpLines[mLineIndex];
var pattern = new RegExp('m=video\\s\\d+\\s[A-Z/]+\\s');
var sendPayloadType = videoMLine.split(pattern)[1].split(' ')[0];
var fmtpLine = sdpLines[findLine(sdpLines, 'a=rtpmap', sendPayloadType)];
var codecName = fmtpLine.split('a=rtpmap:' + sendPayloadType)[1].split('/')[0];
codec = codecName || codec; // Try to find first Codec; else use expected/default
var sdpLines = sdp.split('\r\n');
var mLineIndex = findLine(sdpLines, 'm=', 'video');
if (mLineIndex === null) {
return 2500;
}
var videoMLine = sdpLines[mLineIndex];
var pattern = new RegExp('m=video\\s\\d+\\s[A-Z/]+\\s');
var sendPayloadType = videoMLine.split(pattern)[1].split(' ')[0];
var fmtpLine = sdpLines[findLine(sdpLines, 'a=rtpmap', sendPayloadType)];
var codec = fmtpLine.split('a=rtpmap:' + sendPayloadType)[1].split('/')[0];
var codecIndex = findLine(sdpLines, 'a=rtpmap', codec+'/90000');
var codecPayload;
if (codecIndex) {
codecPayload = getCodecPayloadType(sdpLines[codecIndex]);
}
if (!codecPayload) {
return 2500;
}
var rtxIndex = findLine(sdpLines, 'a=rtpmap', 'rtx/90000');
var rtxPayload;
if (rtxIndex) {
rtxPayload = getCodecPayloadType(sdpLines[rtxIndex]);
}
if (!rtxIndex) {
return 2500;
}
var rtxFmtpLineIndex = findLine(sdpLines, 'a=fmtp:' + rtxPayload.toString());
if (rtxFmtpLineIndex !== null) {
try {
var maxBitrate = parseInt(sdpLines[rtxFmtpLineIndex].split("x-google-max-bitrate=")[1].split(";")[0]);
var minBitrate = parseInt(sdpLines[rtxFmtpLineIndex].split("x-google-min-bitrate=")[1].split(";")[0]);
} catch(e){
return 2500;
}
if (minBitrate>maxBitrate){
maxBitrate = minBitrate;
}
if (maxBitrate<1){maxBitrate=1;}
return maxBitrate
} else {
return 2500;
}
}
function setVideoBitrates(sdp, params, codec) { // modified + Improved by Steve.
if (codec){
codec = codec.toUpperCase();
} else{
codec="VP8";
}
var sdpLines = sdp.split('\r\n');
// Search for m line.
var mLineIndex = findLine(sdpLines, 'm=', 'video');
if (mLineIndex === null) {
return sdp;
}
// Figure out the first codec payload type on the m=video SDP line.
var videoMLine = sdpLines[mLineIndex];
var pattern = new RegExp('m=video\\s\\d+\\s[A-Z/]+\\s');
var sendPayloadType = videoMLine.split(pattern)[1].split(' ')[0];
var fmtpLine = sdpLines[findLine(sdpLines, 'a=rtpmap', sendPayloadType)];
var codecName = fmtpLine.split('a=rtpmap:' + sendPayloadType)[1].split('/')[0];
codec = codecName || codec; // Try to find first Codec; else use expected/default
params = params || {};
var xgoogle_min_bitrate = params.min.toString();
var xgoogle_max_bitrate = params.max.toString();
@ -311,7 +366,11 @@ var CodecsHandler = (function() {
return {
disableNACK: disableNACK,
getVideoBitrates: function(sdp) {
return getVideoBitrates(sdp);
},
setVideoBitrates: function(sdp, params, codec) {
return setVideoBitrates(sdp, params, codec);
},
@ -320,7 +379,7 @@ var CodecsHandler = (function() {
},
preferCodec: preferCodec,
forceStereoAudio: forceStereoAudio
};
})();

BIN
translations/IMG_1148.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 491 KiB

2
webrtc.js
View File

File diff suppressed because one or more lines are too long