1
0
Fork 0
mirror of https://github.com/DanielnetoDotCom/YouPHPTube synced 2025-10-06 03:50:04 +02:00

Add WebRTC

This commit is contained in:
Daniel Neto 2025-01-12 19:51:04 -03:00
parent e5c41d4ff3
commit 5dc7bee07c
16 changed files with 285 additions and 164 deletions

View file

@ -5,7 +5,7 @@
</a>
</li>
<li>
<a href="<?php echo "{$global['webSiteRootURL']}plugin/Live"; ?>" data-toggle="tooltip" title="<?php echo __('Go Live'); ?>" data-placement="left"
<a href="#" onclick="avideoModalIframeFull(webSiteRootURL + 'plugin/WebRTC/');return false;" data-toggle="tooltip" title="<?php echo __('Go Live'); ?>" data-placement="left"
class="faa-parent animated-hover">
<i class="fa-solid fa-camera"></i> <?php echo __('Go Live'); ?>
</a>

View file

@ -1,80 +0,0 @@
<div class="tabbable-line ">
<ul class="nav nav-tabs">
<li class="active" data-toggle="tooltip" data-placement="bottom" title="<?php echo __('Stream Software'); ?>">
<a data-toggle="tab" href="#tabStreamSoftware">
<i class="fa-solid fa-key"></i>
<?php echo __('Stream Software'); ?>
</a>
</li>
<li class="" data-toggle="tooltip" data-placement="bottom" title="<?php echo __('Webcam'); ?>">
<a data-toggle="tab" href="#tabWebcam">
<i class="fa-solid fa-camera"></i>
<?php echo __('Webcam'); ?>
</a>
</li>
</ul>
<div class="tab-content">
<div id="tabStreamSoftware" class="tab-pane fade in active">
<div class="panel panel-default <?php echo getCSSAnimationClassAndStyle('animate__fadeInLeft', 'live'); ?>" id="RTMPSettings">
<div class="panel-heading">
<i class="fas fa-hdd"></i> <?php echo __("RTMP Settings"); ?> (<?php echo $channelName; ?>)
<div class="pull-right">
<?php
echo getTourHelpButton('plugin/Live/tabs/help.json', 'btn btn-default btn-xs', 'Live Configuration Help');
?>
</div>
</div>
<div class="panel-body" style="overflow: hidden;">
<div class="form-group" id="ServerURL">
<label for="server"><i class="fa fa-server"></i> <?php echo __("Server URL"); ?>:</label>
<?php
getInputCopyToClipboard('server', Live::getRTMPLinkWithOutKey(User::getId()));
?>
</div>
<div class="form-group" id="ServerName">
<label for="streamkey"><i class="fa fa-key"></i> <?php echo __("Stream name/key"); ?>: </label>
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default" href="<?php echo $global['webSiteRootURL']; ?>plugin/Live/?resetKey=1" data-toggle="tooltip" title="<?php echo __("This also reset the Chat and views counter"); ?>"><i class="fa fa-refresh"></i> <?php echo __("Reset Key"); ?></a>
</span>
<?php
getInputCopyToClipboard('streamkey', $key);
?>
</div>
</div>
<?php
if (!empty($onliveApplicationsButtons)) {
?>
<div class="panel panel-default">
<div class="panel-heading">
<?php echo __('Active Livestreams'); ?>
</div>
<div class="panel-body myUsedKeys<?php echo $key; ?>">
<?php echo implode('', $onliveApplicationsButtons); ?>
</div>
</div>
<?php
}
?>
<div class="form-group <?php echo getCSSAnimationClassAndStyle('animate__fadeInLeft', 'live'); ?>" id="ServerURLName">
<label for="serverAndStreamkey"><i class="fa fa-key"></i> <?php echo __("Server URL"); ?> + <?php echo __("Stream name/key"); ?>:</label>
<?php
getInputCopyToClipboard('serverAndStreamkey', Live::getRTMPLink(User::getId()));
?>
</div>
</div>
<div class="panel-footer">
<!-- Insert the recommended settings panel here -->
<?php include __DIR__ . '/recommended_stream_settings.php'; ?>
</div>
</div>
</div>
<div id="tabWebcam" class="tab-pane fade ">
<?php
include $global['systemRootPath'] . 'plugin/WebRTC/panel.php';
?>
</div>
</div>
</div>

View file

@ -39,8 +39,11 @@ if (AVideoPlugin::isEnabledByName('Rebroadcaster')) {
</style>
<?php
include $global['systemRootPath'] . 'plugin/Live/tabs/tabStreamSettings.old.php';
//include $global['systemRootPath'] . 'plugin/Live/tabs/tabStreamSettings.new.php';
if(AVideoPlugin::isEnabledByName('WebRTC')){
include $global['systemRootPath'] . 'plugin/Live/tabs/tabStreamSettings.webcam.php';
}else{
include $global['systemRootPath'] . 'plugin/Live/tabs/tabStreamSettings.software.php';
}
?>
<div class="tabbable-line <?php echo getCSSAnimationClassAndStyle('animate__fadeInLeft', 'live'); ?>">
<ul class="nav nav-tabs">

View file

@ -0,0 +1,28 @@
<div class="tabbable-line ">
<ul class="nav nav-tabs">
<li class="active" data-toggle="tooltip" data-placement="bottom" title="<?php echo __('Stream Software'); ?>">
<a data-toggle="tab" href="#tabStreamSoftware">
<i class="fa-solid fa-key"></i>
<?php echo __('Stream Software'); ?>
</a>
</li>
<li class="" data-toggle="tooltip" data-placement="bottom" title="<?php echo __('Webcam'); ?>">
<a data-toggle="tab" href="#tabWebcam">
<i class="fa-solid fa-camera"></i>
<?php echo __('Webcam'); ?>
</a>
</li>
</ul>
<div class="tab-content">
<div id="tabStreamSoftware" class="tab-pane fade in active">
<?php
include $global['systemRootPath'] . 'plugin/Live/tabs/tabStreamSettings.software.php';
?>
</div>
<div id="tabWebcam" class="tab-pane fade ">
<?php
include $global['systemRootPath'] . 'plugin/WebRTC/panel.php';
?>
</div>
</div>
</div>

View file

@ -27,11 +27,13 @@ class WebRTC extends PluginAbstract
return "webrtc-e578-4b91-96bb-4baaae5c0884";
}
public function getPluginVersion() {
public function getPluginVersion()
{
return "1.0";
}
public function getEmptyDataObject() {
public function getEmptyDataObject()
{
global $global;
$obj = new stdClass();
@ -40,33 +42,62 @@ class WebRTC extends PluginAbstract
return $obj;
}
function executeEveryMinute() {
function executeEveryMinute()
{
self::startIfIsInactive();
}
static function startIfIsInactive(){
if(!self::checkIfIsActive()){
static function startIfIsInactive()
{
if (!self::checkIfIsActive()) {
self::startServer();
}
}
static function checkIfIsActive(){
static function checkIfIsActive()
{
$json = self::getJson();
if(!empty($json)){
return ($json->phpTimestamp > strtotime('-2 min')) ? $json->phpTimestamp : false;
}
return false;
}
public function getPluginMenu() {
global $global;
$btn = '<button onclick="avideoModalIframe(webSiteRootURL+\'plugin/WebRTC/status.php\')" class="btn btn-primary btn-sm btn-xs btn-block"><i class="fa-solid fa-list-check"></i> Server Status</button>';
return $btn;
}
static function getJson()
{
global $global;
$file = "{$global['systemRootPath']}plugin/WebRTC/WebRTC2RTMP.json";
if(file_exists($file)){
if (file_exists($file)) {
$content = file_get_contents($file);
if(!empty($content)){
if (!empty($content)) {
$json = json_decode($content);
if(!empty($json)){
return $json->phpTimestamp > strtotime('-2 min');
if (!empty($json)) {
return $json;
}
}
}
return false;
}
static function getLog()
{
global $global;
$file = "{$global['systemRootPath']}videos/WebRTC2RTMP.log";
if (file_exists($file)) {
return file_get_contents($file);
}
return false;
}
static function startServer(){
static function startServer()
{
_error_log('Starting WebRTC Server');
global $global;
$obj = AVideoPlugin::getDataObject('WebRTC');
@ -88,22 +119,4 @@ class WebRTC extends PluginAbstract
return false;
}
}
static function killProcessOnPort() {
$obj = AVideoPlugin::getDataObject('WebRTC');
$port = intval($obj->port);
if (!empty($port)) {
echo 'Searching for port: ' . $port . PHP_EOL;
//$command = 'netstat -ano | findstr ' . $port;
//exec($command, $output, $retval);
$pid = getPIDUsingPort($port);
if (!empty($pid)) {
echo 'Server is already runing on port '.$port.' Killing, PID ' . $pid . PHP_EOL;
killProcess($pid);
} else {
echo 'No Need to kill, port NOT found' . PHP_EOL;
}
}
}
}

Binary file not shown.

View file

@ -93,6 +93,9 @@ function stopStreamToServer() {
}
}
function isWebcamServerConnected() {
return $('body').hasClass('WebcamServerConnected');
}
function setIsWebcamServerConnected() {
console.log('Connection success');
@ -290,5 +293,4 @@ $(document).ready(function () {
startWebRTC(); // Call the startWebRTC function
}
});
requestNotifications();
});

View file

@ -1,44 +1,44 @@
<?php
require_once __DIR__ . '/../../videos/configuration.php';
AVideoPlugin::loadPlugin("Live");
$_GET['avideoIframe'] = 1;
$_page = new Page(array('Webcam'));
if (empty($_REQUEST['avideoIframe'])) {
?>
<div class="container">
<?php
include __DIR__ . '/panel.php';
?>
</div>
<style>
body {
overflow: hidden;
}
video {
position: fixed;
top: 0;
left: 0;
}
</style>
<?php
} else {
include __DIR__ . '/video.php';
?>
<?php
include __DIR__ . '/video.php';
?>
<div id="webcamMedias">
<?php
?>
</div>
<div id="webcamMediaControls" class="showWhenWebRTCIsConnected">
<div id="webcamMediaControls" class="showWhenWebRTCIsConnected">
<?php
include __DIR__ . '/panel.medias.php';
include __DIR__ . '/panel.buttons.php';
?>
</div>
<div id="webcamMediaControlsMessage" class="alert alert-danger showWhenWebRTCIsNotConnected text-center">
</div>
<div id="webcamMediaControlsMessage" class="alert alert-danger showWhenWebRTCIsNotConnected text-center" style="display: none;">
<div class="fa-3x">
<i class="fa-solid fa-triangle-exclamation fa-fade"></i>
</div>
<strong>Error:</strong> Unable to connect to the Webcam server.<br>
<span>Please verify the server status and resolve any issues.</span>
</div>
</div>
<script>
<script>
$(document).ready(function() {
startWebRTC();
});
</script>
</script>
<?php
}
$_page->print();
?>

View file

@ -3,7 +3,7 @@
<i class="fa fa-play"></i> Go Live
</button>
<button type="button" class="btn btn-default oval-menu animate__animated animate__bounceIn" onclick="toggleMediaSelector();" style=" -webkit-animation-delay: .2s; animation-delay: .2s;">
<i class="fa-solid fa-ellipsis-vertical"></i>
<i class="fa-solid fa-gear"></i>
</button>
</div>
<div class="text-center showWhenIsLive" style="display: none;">

View file

@ -2,7 +2,7 @@
<div class="panel-heading">
</div>
<div class="panel-body" style="position:relative;">
<div class="panel-body" style="position:relative; padding: 0;">
<?php
include __DIR__ . '/video.php';
?>

View file

@ -0,0 +1,15 @@
<?php
require_once dirname(__FILE__) . '/../../videos/configuration.php';
$objP = AVideoPlugin::getDataObject('WebRTC');
header('Content-Type: application/json');
$obj = array('error'=>false, 'msg'=>'');
$obj['port'] = $objP->port;
$obj['isActive'] = WebRTC::checkIfIsActive();
$obj['json'] = WebRTC::getJson();
$obj['log'] = WebRTC::getLog();
echo json_encode($obj);
?>

123
plugin/WebRTC/status.php Normal file
View file

@ -0,0 +1,123 @@
<?php
require_once __DIR__ . '/../../videos/configuration.php';
require_once __DIR__ . '/functions.php';
$_page = new Page(array('WebRTC Server Status'));
?>
<link href="<?php echo getURL('plugin/WebRTC/style.css'); ?>" rel="stylesheet" type="text/css" />
<script class="doNotSepareteTag">
var WebRTC2RTMPURL = '<?php echo getWebRTC2RTMPURL(); ?>';
</script>
<style>
.premium-enabled {
color: green;
font-weight: bold;
}
.premium-disabled {
color: red;
font-weight: bold;
}
</style>
<div class="container-fluid">
<div id="status" class="panel panel-default">
<div class="panel-heading">
<h2><i class="fa fa-info-circle"></i> Server Details</h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-4">
<p><i class="fa fa-plug"></i> <strong>Port:</strong> <span class="port">Loading...</span></p>
</div>
<div class="col-sm-4">
<p><i class="fa fa-globe"></i> <strong>Domain:</strong> <span class="domain">Loading...</span></p>
</div>
<div class="col-sm-4">
<p><i class="fa fa-code"></i> <strong>Version:</strong> <span class="version">Loading...</span></p>
</div>
<div class="col-sm-4">
<p><i class="fa fa-clock-o"></i> <strong>Active State:</strong> <span class="active-state">Loading...</span></p>
</div>
<div class="col-sm-4">
<p><i class="fa fa-hourglass-half"></i> <strong>Max RTMP Runtime:</strong> <span class="max-runtime">Loading...</span> minutes</p>
</div>
<div class="col-sm-4">
<p><i class="fa fa-tasks"></i> <strong>Max Concurrent RTMP:</strong> <span class="max-concurrent">Loading...</span> processes</p>
</div>
<div class="col-sm-6">
<p><i class="fa fa-star"></i> <strong>Premium Features:</strong> <span class="premium-status">Loading...</span></p>
</div>
<div class="col-sm-6">
<p class="showWhenWebRTCIsConnected ">
<span class="liveIndicator" style="padding: 2px 5px;">
<i class="fa fa-check-circle"></i> Server Connected
</span>
</p>
<p class="showWhenWebRTCIsNotConnected ">
<span class="offLineIndicator" style="padding: 2px 5px;">
<i class="fa fa-times-circle"></i> Server Disconnected
</span>
</p>
</div>
</div>
</div>
<div class="panel-footer">
<pre id="log" style="max-height: 300px; overflow-y: auto;">Loading logs...</pre>
</div>
</div>
<div id="premium-offer" class="panel panel-warning" style="display: none;">
<div class="panel-heading">
<h4><i class="fa fa-star"></i> Upgrade to Premium</h4>
</div>
<div class="panel-body">
<p>Remove the watermark from your livestreams and enjoy increased limits:</p>
<ul>
<li><i class="fa fa-hourglass"></i> <strong>Max RTMP Runtime:</strong> Unlimited minutes</li>
<li><i class="fa fa-cogs"></i> <strong>Max Concurrent RTMP:</strong> 10 processes</li>
</ul>
<button id="upgrade-button" class="btn btn-success"><i class="fa fa-arrow-up"></i> Upgrade to Premium</button>
</div>
</div>
</div>
<script src="<?php echo getURL('node_modules/socket.io-client/dist/socket.io.min.js'); ?>" type="text/javascript"></script>
<script src="<?php echo getURL('plugin/WebRTC/api.js'); ?>" type="text/javascript"></script>
<script src="<?php echo getURL('plugin/WebRTC/events.js'); ?>" type="text/javascript"></script>
<script>
$(document).ready(function() {
// Fetch the JSON data
$.getJSON(webSiteRootURL + "plugin/WebRTC/status.json.php", function(data) {
if (data.error) {
$("#status").html('<div class="panel panel-danger"><div class="panel-heading"><strong>Error:</strong></div><div class="panel-body">Unable to fetch server data.</div></div>');
return;
}
// Update elements by class
$(".port").text(data.port);
$(".domain").text(data.json.domain);
$(".version").text(data.json.version);
$(".active-state").text(new Date(data.isActive * 1000).toLocaleString());
$(".max-runtime").text(data.json.maxRtmpRuntimeMinutes);
$(".max-concurrent").text(data.json.maxConcurrentRtmp);
$(".premium-status").text(data.json.isPremium ? 'Enabled' : 'Disabled')
.addClass(data.json.isPremium ? 'premium-enabled' : 'premium-disabled');
// Show the premium offer if the user is not premium
if (!data.json.isPremium) {
$("#premium-offer").show();
}
// Populate the server logs
$("#log").text(data.log);
});
// Handle the upgrade button
$("#upgrade-button").click(function() {
alert("Redirecting to the premium subscription page...");
window.location.href = "https://vlu.me/upgrade-to-premium";
});
});
</script>
<?php
$_page->print();
?>

View file

@ -24,23 +24,24 @@ video {
border-radius: 5px;
border: 1px solid #DDD;
border-radius: 50%;
z-index: 10;
}
#offLineIndicator {
#offLineIndicator, .offLineIndicator {
background: #FF000033;
color: #CCC;
border-color: #FAA;
}
/* Live indicator */
#onLineIndicator {
#onLineIndicator, .onLineIndicator {
background: #00000055;
color: #DDD;
}
/* Live indicator (Green) */
#liveIndicator {
background: #00FF00AA;
#liveIndicator, .liveIndicator {
background: #00AA00AA;
box-shadow: 0 0 5px #00FF00;
/* Initial glow */
animation: greenGlowPulse 1.5s infinite;

View file

@ -6,11 +6,6 @@ $forceIndex = 'Webcam';
$rtmpURL = Live::getRTMPLink(User::getId(), $forceIndex);
$key = Live::getKeyFromUser(User::getId());
?>
<style>
body{
overflow: hidden;
}
</style>
<script class="doNotSepareteTag">
// Send streamKey to the server when joining
var rtmpURL = '<?php echo $rtmpURL; ?>';
@ -31,3 +26,8 @@ $key = Live::getKeyFromUser(User::getId());
<script src="<?php echo getURL('node_modules/socket.io-client/dist/socket.io.min.js'); ?>" type="text/javascript"></script>
<script src="<?php echo getURL('plugin/WebRTC/api.js'); ?>" type="text/javascript"></script>
<script src="<?php echo getURL('plugin/WebRTC/events.js'); ?>" type="text/javascript"></script>
<script>
$(document).ready(function() {
requestNotifications();
});
</script>

View file

@ -1379,6 +1379,22 @@ function avideoAlertAJAXHTML(url) {
});
}
function avideoAlertAJAXJson(url) {
modal.showPleaseWait();
$.ajax({
url: url,
complete: function (jqXHR) {
response = (jqXHR.responseJSON);
if(typeof response == 'object' && typeof response.msg !== 'undefined'){
avideoAlertText(response.msg);
}else{
avideoAlertText(response);
}
modal.hidePleaseWait();
}
});
}
function avideoAlertAJAX(url) {
modal.showPleaseWait();
$.ajax({