mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 21:58:35 +00:00
43ee28b9d4
Some of the notable changes revolve around fixing issues with the Group Chat, refining the UX/UI, adding stream iso-recording, enabling camera zooming on Android, and allowing users to select multiple audio sources, disable audio, or disable the video.
Change list
Audio can be disabled and/or mixed with more than one audio input device
video can be disabled, allowing for audio-only publishing
avatar silhouette takes the place of a stream without a video
Some Android cameras can now zoom-in with a swipe up action.
The Create Invite Link option lets you select some advanced parameters, like bitrate and stereo, in a very easy way.
reduced the size of the preview window ; for camera and screens hare
made all OBS/invite links easier to copy, dragged into OBS v25, and seleced.
Most OBS/invite links can be right clicked to access custom menu
copy to clipboard links that are clicked
Viewers in Group Chat can magnify and increase the bitrate of one video at a time.
Pseudo-Fullscreen works in group chat now
Room names can be accessed via https://obs.ninja/myroomnamehere
You can record videos via the group control room; selectable bitrates. webm Format
filename of recorded files is the timestamp of the ended recording time; milliseconds
new iOS error messages
firefox shows camera labels now
Add a "secure" mode that increases verbosity and prevents a stream being accessed more than once
electron app interface works with the production code
It is harder to hit 'ready to go', before the camera is actually ready
expanded help information in a less annoying way
if you deny Screen-share permissions, it will let you try again without a page refresh
Custom generated invite links, if dragged into OBS v25, will be named according to the given label
Got rid of the cartoon cat; too much visual complexity
Numerous UX changes to the Control Room page
Codec remains set at VP8, but progress in OBS has made on its issues.
Added a new TURN video relay server to US West (LA). I've also increased the capacity of the existing US-Central server. 16x more capacity over all.
Video Control bar hidden in more cases; or delayed in showing
Increased readability of some fonts
Improved mobile layout and accessibility
Mute/Unmute button has been made more secure
No need to toggle mute in group chat to get the audio to work
pressing enter on input fields auto submits; no clicking needed
Dynamic bitrates improved
Group automixer improved a bit
no-cursor option works with Electron app now
cleaned up the Error page in OBS if it fails to load a video; no more 'leaked' streamIDs
renamed streamid, permaid, and roomid. They are now room, push, and view. backwards compatible tho still.
Invite to Room page is more mobile friendly and clean; less noise
iPad Pro treated like an iOS device; limits resolution to 720p
rounded corners of the big buttons because "looks more modern". ;/
Updated Licence and added a CLA
Added translations / languages via a template system
electron-app improvements, such as the ability to select OUTPUT AUDIO Destination
Fixed a few bugs reported over the last few days, since production release
and many others that I likely forgot about
300 lines
8.1 KiB
HTML
300 lines
8.1 KiB
HTML
<html>
|
|
<head><style>
|
|
html {
|
|
border:0;
|
|
margin:0;
|
|
}
|
|
|
|
video {
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=), none;
|
|
user-select: none;
|
|
|
|
}
|
|
body {
|
|
padding: 0 0px;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #141926;
|
|
background-color: -webkit-linear-gradient(to top, #181925, #141826, #0F2027); /* Chrome 10-25, Safari 5.1-6 */
|
|
background-color: linear-gradient(to top, #181825, #141926, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
font-size: 2em;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
display: flex;
|
|
flex-flow: column;
|
|
border:0;
|
|
margin:0;
|
|
|
|
}
|
|
button{
|
|
padding:10px;
|
|
font-size: 20px;
|
|
margin: auto auto;
|
|
}
|
|
#header{
|
|
height:80px;
|
|
width:100%;
|
|
background-color: #101520;
|
|
}
|
|
.inputfield{
|
|
font-size: 20px;
|
|
align-self:center;
|
|
height:30px;
|
|
width:780px;
|
|
margin: auto auto;
|
|
padding:20px
|
|
}
|
|
|
|
.formcss{
|
|
font-size: 20px;
|
|
align-self:center;
|
|
margin: auto auto;
|
|
}
|
|
label {
|
|
font: white;
|
|
font-size: 1em;
|
|
color: white;
|
|
}
|
|
input[type='checkbox'] {
|
|
-webkit-appearance:none;
|
|
width:30px;
|
|
height:30px;
|
|
background:white;
|
|
border-radius:5px;
|
|
border:2px solid #555;
|
|
cursor: pointer;
|
|
}
|
|
input[type='checkbox']:checked {
|
|
background: #1A1;
|
|
}
|
|
</style></head>
|
|
<body >
|
|
|
|
<div id="header" style="-webkit-app-region: drag;color:white;font-size:2em">OBS.Ninja</div>
|
|
<div class="formcss" >
|
|
<input type="checkbox" class="check" id="prefervp9" name="prefervp9" value="false" onclick="modURL(this);">
|
|
<label for="prefervp9">Force VP9 Codec</label>
|
|
<input type="checkbox" class="check" id="showcursor" name="showcursor" value="false" onclick="modURL(this);">
|
|
<label for="showcursor">Show Mouse Cursor</label>
|
|
<input type="checkbox" class="check" id="highbitrate" name="highbitrate" value="false" onclick="modURL(this);">
|
|
<label for="highbitrate">High Video Bitrate</label>
|
|
<input type="checkbox" class="check" id="stereo" name="stereo" value="false" onclick="modURL(this);">
|
|
<label for="stereo">Pro Audio Mode</label><br><br><br>
|
|
<div class="formcss">
|
|
<input type="text" id="changeText" class="inputfield" value="http://obs.ninja/?view=" onchange="modURL" onkeyup="enterPressed(event, gohere);" />
|
|
<button onclick="gohere();" id="gobutton">GO</button>
|
|
<br><br>
|
|
<label for="audioOutput">Audio output destination: </label><select id="audioOutput" style="max-width:400px"></select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
/*
|
|
* Copyright (c) 2020 Steve Seguin. All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by the APGLv3 open-source license
|
|
* that can be found in the LICENSE file in the root of the source
|
|
* tree. Alternative licencing options can be made available on request.
|
|
*
|
|
*/
|
|
|
|
var audioOutputSelect = document.querySelector('select#audioOutput');
|
|
audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);
|
|
audioOutputSelect.onclick = getPermssions;
|
|
audioOutputSelect.onchange = updateOutputTarget;
|
|
var listed = false;
|
|
|
|
function updateOutputTarget(e){
|
|
console.log("change audio: "+audioOutputSelect.value);
|
|
var url = document.getElementById('changeText').value;
|
|
url=updateURLParameter(url, "sink", audioOutputSelect.value);
|
|
document.getElementById('changeText').value = url;
|
|
}
|
|
|
|
function getPermssions(e){
|
|
if (listed==true){
|
|
return;
|
|
}
|
|
e.currentTarget.blur();
|
|
navigator.mediaDevices.getUserMedia({audio: true,video: false}).then(function(stream){
|
|
navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(console.error); // list all devices
|
|
stream.getTracks().forEach(track => {
|
|
track.stop();
|
|
});
|
|
listed=true;
|
|
audioOutputSelect.focus();
|
|
|
|
}).catch(function(){alert("Failed to list available output devices\n\nPlease ensure you allowed the microphone permissions.");});
|
|
}
|
|
|
|
function gotDevices(deviceInfos) {
|
|
for (let i = 0; i !== deviceInfos.length; ++i) {
|
|
const deviceInfo = deviceInfos[i];
|
|
const option = document.createElement('option');
|
|
option.value = deviceInfo.deviceId;
|
|
if (deviceInfo.kind === 'audiooutput'){
|
|
option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
|
|
audioOutputSelect.appendChild(option);
|
|
} else {
|
|
console.log('Some other kind of source/device: ', deviceInfo);
|
|
}
|
|
}
|
|
listed=true;
|
|
}
|
|
|
|
function enterPressed(event, callback){
|
|
if (event.keyCode === 13){ // Number 13 is the "Enter" key on the keyboard
|
|
event.preventDefault(); // Cancel the default action, if needed
|
|
callback();
|
|
}
|
|
}
|
|
|
|
(function (w) {
|
|
w.URLSearchParams = w.URLSearchParams || function (searchString) {
|
|
var self = this;
|
|
self.searchString = searchString;
|
|
self.get = function (name) {
|
|
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
|
|
if (results == null) {
|
|
return null;
|
|
}
|
|
else {
|
|
return decodeURI(results[1]) || 0;
|
|
}
|
|
};
|
|
}
|
|
|
|
})(window)
|
|
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|
var isMobile = false;
|
|
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){ // does not detect iPad Pros.
|
|
isMobile=true; // if iOS, default to H264? meh. let's not.
|
|
}
|
|
|
|
function updateURLParameter(url, param, paramVal){
|
|
var TheAnchor = null;
|
|
var newAdditionalURL = "";
|
|
var tempArray = url.split("?");
|
|
var baseURL = tempArray[0];
|
|
var additionalURL = tempArray[1];
|
|
var temp = "";
|
|
|
|
if (additionalURL){
|
|
var tmpAnchor = additionalURL.split("#");
|
|
var TheParams = tmpAnchor[0];
|
|
TheAnchor = tmpAnchor[1];
|
|
if (TheAnchor){additionalURL = TheParams;}
|
|
|
|
tempArray = additionalURL.split("&");
|
|
|
|
for (var i=0; i<tempArray.length; i++){
|
|
if(tempArray[i].split('=')[0] != param){
|
|
newAdditionalURL += temp + tempArray[i];
|
|
temp = "&";
|
|
}
|
|
}
|
|
} else {
|
|
var tmpAnchor = baseURL.split("#");
|
|
var TheParams = tmpAnchor[0];
|
|
TheAnchor = tmpAnchor[1];
|
|
|
|
if(TheParams){baseURL = TheParams;}
|
|
}
|
|
|
|
if (paramVal==false){
|
|
temp="";
|
|
if(TheAnchor){temp += "#" + TheAnchor;}
|
|
var rows_txt = temp
|
|
} else {
|
|
if(TheAnchor){paramVal += "#" + TheAnchor;}
|
|
var rows_txt = temp + "" + param + "=" + paramVal;
|
|
}
|
|
return baseURL + "?" + newAdditionalURL + rows_txt;
|
|
}
|
|
|
|
if (urlParams.has('name')){
|
|
var name = urlParams.get('name');
|
|
if (name!="OBSNinja"){
|
|
document.getElementById('changeText').value = "https://obs.ninja/?view="+name;
|
|
}
|
|
}
|
|
|
|
function modURL(ele=false){
|
|
var url = document.getElementById('changeText').value;
|
|
console.log(url);
|
|
if ((url.split("view").length>0) || (url.split("room").length>0)){
|
|
if (!document.getElementById("showcursor").checked){
|
|
url=updateURLParameter(url, "nocursor", "1");
|
|
} else {
|
|
url=updateURLParameter(url, "nocursor", false);
|
|
}
|
|
|
|
if (ele!=false){
|
|
if (ele.id =="prefervp9"){
|
|
if (document.getElementById("prefervp9").checked){
|
|
url=updateURLParameter(url, "codec", "vp9");
|
|
} else {
|
|
url=updateURLParameter(url, "codec", false);
|
|
}
|
|
}
|
|
|
|
if (ele.id =="highbitrate"){
|
|
if (document.getElementById("highbitrate").checked){
|
|
url=updateURLParameter(url, "bitrate", "10000");
|
|
} else {
|
|
url=updateURLParameter(url, "bitrate", false);
|
|
}
|
|
}
|
|
|
|
if (ele.id =="stereo"){
|
|
if (document.getElementById("stereo").checked){
|
|
url=updateURLParameter(url, "stereo", "1");
|
|
alert('Audio bitrate increased to 256kbps.\n\nPlease note: the Video Publisher must also have the stereo flag enabled for stereo to work.');
|
|
} else {
|
|
url=updateURLParameter(url, "stereo", false);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
document.getElementById('changeText').value = url;
|
|
console.log(url);
|
|
return url;
|
|
}
|
|
function gohere(){
|
|
var url = modURL(true);
|
|
window.location = url;
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|