mirror of https://github.com/dani/vroom.git
Daniel Berteaud
11 years ago
parent
58567d23bf
commit
cef5791a89
57 changed files with 27742 additions and 0 deletions
@ -0,0 +1,38 @@ |
||||
<VirtualHost *:80> |
||||
ServerName vroom.example.com |
||||
DocumentRoot /opt/vroom/public |
||||
RewriteEngine on |
||||
RewriteRule ^/(.*|$) https://%{HTTP_HOST}/$1 [L,R] |
||||
</VirtualHost> |
||||
<VirtualHost *:443> |
||||
ServerName vroom.example.com |
||||
SSLEngine on |
||||
DocumentRoot /opt/vroom/public |
||||
ProxyPass /socket.io/1/websocket ws://localhost:8889/socket.io/1/websocket |
||||
ProxyPassReverse /socket.io/1/websocket ws://localhost:8888/socket.io/1/websocket |
||||
ProxyPass /socket.io/ http://localhost:8888/socket.io/ |
||||
ProxyPassReverse /socket.io/ http://localhost:8888/socket.io/ |
||||
AliasMatch ^/((js|css|img|fonts|snd)/.*) /opt/vroom/public/$1 |
||||
ScriptAlias / /opt/vroom/public/vroom.pl/ |
||||
<Location /> |
||||
require all granted |
||||
<IfModule mod_deflate.c> |
||||
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/javascript text/css |
||||
SetOutputFilter DEFLATE |
||||
BrowserMatch ^Mozilla/4 gzip-only-text/html |
||||
BrowserMatch ^Mozilla/4.0[678] no-gzip |
||||
BrowserMatch ^HMSIE !no-gzip !gzip-only-text/html |
||||
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary |
||||
</IfModule> |
||||
<IfModule mod_headers.c> |
||||
Header append Vary User-Agent env=!dont-vary |
||||
</IfModule> |
||||
</Location> |
||||
<LocationMatch "^/((js|css|img|fonts|snd)/)"> |
||||
<IfModule mod_expires.c> |
||||
ExpiresActive On |
||||
ExpiresDefault "access plus 1 month" |
||||
</IfModule> |
||||
</LocationMatch> |
||||
</VirtualHost> |
||||
|
||||
@ -0,0 +1,10 @@ |
||||
[Service] |
||||
ExecStart=/usr/bin/node /opt/vroom/signalmaster/server.js |
||||
Restart=always |
||||
StandardOutput=syslog |
||||
SyslogIdentifier=SignalMaster |
||||
User=signalmaster |
||||
Group=signalmaster |
||||
|
||||
[Install] |
||||
WantedBy=multi-user.target |
||||
@ -0,0 +1,29 @@ |
||||
{ |
||||
|
||||
# Database |
||||
dbi => 'DBI:mysql:database=vroom;host=localhost', |
||||
dbUser => 'vroom', |
||||
dbPassword => 'vroom', |
||||
|
||||
# Media & signaling |
||||
signalingServer => 'https://signal.example.com', |
||||
stunServer => 'stun.example.com:3478', |
||||
turnServer => 'turn.example.com', |
||||
realm => 'example.com', |
||||
|
||||
# Web & contact |
||||
baseUrl => 'https://vroom.example.com/', |
||||
emailFrom => 'vroom@example.com', |
||||
# Templates to use for web pages |
||||
template => 'default', |
||||
# Used to sign cookies |
||||
secret => 'ChangeMe!', |
||||
|
||||
# App |
||||
# Rooms without any activity for that long will be destroyed |
||||
inactivityTimeout => 3600, |
||||
logLevel => 'info', |
||||
|
||||
# Various |
||||
sendmail => '/sbin/sendmail' |
||||
}; |
||||
@ -0,0 +1,30 @@ |
||||
//* auth turn sur MySQL et génération secret par room |
||||
//* enreg participants via session (dans base SQL) et autoriser à joindre si verrouiller |
||||
//* gérer déconnexion |
||||
//* rewrite index.pl => / |
||||
//* header/footer pour les templates |
||||
//* gérer mute/unmute |
||||
//* gérer pause cam |
||||
//* emplacement notif moins intrusif + stack notif |
||||
//* preview local plus petit |
||||
//* notif participants (ajout/retrait) => son + notify |
||||
//* animation preview agrandit sur simple click |
||||
//* ajout champs timestamp dernière activité |
||||
//* gestion expiration des room |
||||
* gestion room persistante ? |
||||
* page admin (liste room + lien verrou/suppr/rejoindre) |
||||
//* corriger uncheck partage d'écran |
||||
//* template accueil, err, goodby, help et about |
||||
//* améliorer notif partage d'écran impossible |
||||
//* ajout chat |
||||
* partage de fichiers |
||||
//* Internationalisation (en/fr) |
||||
//* dialog pseudo (modal ?) |
||||
* alerte navigateur non supporté (modal) |
||||
//* auth token dans signalmaster |
||||
//* Compat FF <-> Chrome |
||||
//* notif pause/resume/mute/unmute |
||||
//* Changer de couleur |
||||
|
||||
Icons: |
||||
* https://www.iconfinder.com/search/?q=iconset%3Awpzoom-developer-icon-set |
||||
@ -0,0 +1,46 @@ |
||||
DROP TABLE IF EXISTS `rooms`; |
||||
CREATE TABLE `rooms` ( |
||||
`id` int(11) NOT NULL AUTO_INCREMENT, |
||||
`name` varchar(120) DEFAULT NULL, |
||||
`owner` varchar(60) DEFAULT NULL, |
||||
`create_timestamp` int(20) DEFAULT NULL, |
||||
`activity_timestamp` int(20) DEFAULT NULL, |
||||
`locked` tinyint(1) DEFAULT '0', |
||||
`join_password` varchar(160) DEFAULT NULL, |
||||
`token` varchar(160) DEFAULT NULL, |
||||
`realm` varchar(160) DEFAULT NULL, |
||||
`persistent` tinyint(1) DEFAULT '0', |
||||
PRIMARY KEY (`id`), |
||||
UNIQUE (`name`) |
||||
); |
||||
DROP VIEW IF EXISTS `turnusers_lt`; |
||||
CREATE VIEW `turnusers_lt` AS SELECT `name` AS `name`, MD5(CONCAT(CONCAT(CONCAT(CONCAT(`name`,':'),`realm`),':'),`token`)) AS `hmackey` FROM `rooms`; |
||||
DROP TABLE IF EXISTS `participants`; |
||||
CREATE TABLE `participants` ( |
||||
`id` int(11) NOT NULL, |
||||
`participant` varchar(60) NOT NULL, |
||||
PRIMARY KEY (`id`,`participant`) |
||||
); |
||||
#DROP TABLE IF EXISTS `turnusers_lt`; |
||||
#CREATE TABLE `turnusers_lt` ( |
||||
# name varchar(512) PRIMARY KEY, |
||||
# hmackey char(32) |
||||
#); |
||||
DROP TABLE IF EXISTS `turnusers_st`; |
||||
CREATE TABLE `turnusers_st` ( |
||||
name varchar(512) PRIMARY KEY, |
||||
password varchar(512) |
||||
); |
||||
DROP TABLE IF EXISTS `turn_secret`; |
||||
CREATE TABLE `turn_secret` ( |
||||
value varchar(512) |
||||
); |
||||
DROP TABLE IF EXISTS `allowed_peer_ip`; |
||||
CREATE TABLE `allowed_peer_ip` ( |
||||
ip_range varchar(256) |
||||
); |
||||
DROP TABLE IF EXISTS `denied_peer_ip`; |
||||
CREATE TABLE `denied_peer_ip` ( |
||||
ip_range varchar(256) |
||||
); |
||||
|
||||
@ -0,0 +1,74 @@ |
||||
package Mojolicious::Plugin::Mailer; |
||||
use Mojo::Base 'Mojolicious::Plugin'; |
||||
|
||||
use strict; |
||||
use warnings; |
||||
|
||||
use Email::MIME; |
||||
use Email::Sender::Simple; |
||||
use Email::Sender::Transport::Test; |
||||
use Encode; |
||||
use utf8; |
||||
|
||||
our $VERSION = '0.05'; |
||||
|
||||
|
||||
sub register { |
||||
my ($self, $app, $conf) = @_; |
||||
|
||||
$app->helper( |
||||
email => sub { |
||||
my $self = shift; |
||||
my $args = @_ ? { @_ } : return; |
||||
|
||||
|
||||
my @data = @{ $args->{data} }; |
||||
|
||||
my @parts = Email::MIME->create( |
||||
body => Encode::encode('UTF-8', $self->render( |
||||
@data, |
||||
format => $args->{format} |
||||
? $args->{format} |
||||
: 'email', |
||||
partial => 1 |
||||
)) |
||||
); |
||||
|
||||
my $transport = defined $args->{transport} || $conf->{transport} |
||||
? $args->{transport} || $conf->{transport} |
||||
: undef; |
||||
|
||||
my $header = { @{ $args->{header} } }; |
||||
|
||||
$header->{From} ||= $conf->{from}; |
||||
$header->{Subject} ||= $self->stash('title'); |
||||
|
||||
my $email = Email::MIME->create( |
||||
header => [ %{$header} ], |
||||
parts => [ @parts ], |
||||
); |
||||
|
||||
$email->charset_set ( $args->{charset} ? $args->{charset} : 'utf-8' ); |
||||
$email->encoding_set ( $args->{encoding} ? $args->{encoding} : 'base64' ); |
||||
$email->content_type_set( $args->{content_type} ? $args->{content_type} : 'text/html' ); |
||||
|
||||
return Email::Sender::Simple->try_to_send( $email, { transport => $transport } ) if $transport; |
||||
|
||||
my $emailer = Email::Sender::Transport::Test->new; |
||||
$emailer->send_email( |
||||
$email, |
||||
{ |
||||
to => [ $header->{To} ], |
||||
from => $header->{From} |
||||
} |
||||
); |
||||
return unless $emailer->{deliveries}->[0]->{successes}->[0]; |
||||
|
||||
} |
||||
); |
||||
|
||||
} |
||||
|
||||
1; |
||||
|
||||
__END__ |
||||
@ -0,0 +1,127 @@ |
||||
package Vroom::I18N::en; |
||||
use base 'Vroom::I18N'; |
||||
|
||||
our %Lexicon = ( |
||||
_AUTO => 1, |
||||
"WELCOME" => "Welcome on VROOM !!", |
||||
"ERROR_NAME_INVALID" => "This name is not valid", |
||||
"ERROR_NAME_CONFLICT" => "A room with this name already exists, please choose another one", |
||||
"ERROR_ROOM_s_DOESNT_EXIST" => "The room %s doesn't exist", |
||||
"ERROR_ROOM_s_LOCKED" => "The room %s is locked, you cannot join it", |
||||
"ERROR_OCCURED" => "An error occured", |
||||
"ERROR_NOT_LOGGED_IN" => "Sorry, your not logged in", |
||||
"JOIN_US_ON_s" => "Join us on room %s", |
||||
"INVITE_SENT_TO_s" => "An invitation was sent to %s", |
||||
"TO_JOIN_s_CLICK_s" => "You're invited to join the video conference %s. " . |
||||
"All you need is a modern web browser and a webcam. When you're ready " . |
||||
"click on <a href='%s'>this link</a>", |
||||
"HAVE_A_NICE_MEETING" => "Have a nice meeting :-)", |
||||
"EMAIL_SIGN" => "VROOM! And video conferencing becomes free, simple and safe", |
||||
"ROOM_LOCKED" => "This room is now locked", |
||||
"ROOM_UNLOCKED" => "This room is now unlocked", |
||||
"ROOM_LOCKED_BY_s" => "%s locked the room", |
||||
"ROOM_UNLOCKED_BY_s" => "%s unlocked the room", |
||||
"OOOPS" => "Ooops", |
||||
"GOODBY" => "Goodby", |
||||
"THANKS_SEE_YOU_SOON" => "Thanks and see you soon", |
||||
"THANKS_FOR_USING" => "Thank you for using VROOM, we hope you enjoyed your meeting", |
||||
"BACK_TO_MAIN_MENU" => "Back to main menu", |
||||
"CREATE_ROOM" => "Create a new room", |
||||
"ROOM_NAME" => "Room name", |
||||
"RANDOM_IF_EMPTY" => "If you let this field empty, a random name will be given to the room", |
||||
"ROOM_s" => "room %s", |
||||
"EMAIL_INVITE" => "Email invite", |
||||
"SEND_INVITE" => "Send an email invitation", |
||||
"DISPLAY_NAME" => "Display name", |
||||
"YOUR_NAME" => "Your name", |
||||
"NAME_SENT_TO_OTHERS" => "This name will be sent to the other peers so they can identify you. You need to set your name before you can chat", |
||||
"CHANGE_COLOR" => "Change your color", |
||||
"CLICK_TO_CHAT" => "Click to access the chat", |
||||
"PREVENT_TO_JOIN" => "Prevent other participants to join this room", |
||||
"MUTE_MIC" => "Turn off your microphone", |
||||
"SUSPEND_CAM" => "Suspend your webcam, other will see a black screen instead, but can still hear you", |
||||
"LOGOUT" => "Leave the room", |
||||
"SET_YOUR_NAME_TO_CHAT" => "You need to set your name to be able to chat", |
||||
"MIC_MUTED" => "Your microphone is now muted", |
||||
"MIC_UNMUTED" => "Your microphone is now unmuted", |
||||
"CAM_SUSPENDED" => "Your webcam is now suspended", |
||||
"CAM_RESUMED" => "Your webcam is on again", |
||||
"SHARE_YOUR_SCREEN" => "Share your screen with the other members of this room", |
||||
"CANT_SHARE_SCREEN" => "Sorry, your configuration does not allow screen sharing", |
||||
"EVERYONE_CAN_SEE_YOUR_SCREEN" => "All other participants can see your screen now", |
||||
"SCREEN_UNSHARED" => "You do no longer share your screen", |
||||
"ERROR_MAIL_INVALID" => "Please enter a valid email address", |
||||
"CANT_SEND_TO_s" => "Couldn't send message to %s", |
||||
"SCREEN_s" => "%s's screen", |
||||
"HOME" => "Home", |
||||
"HELP" => "Help", |
||||
"ABOUT" => "About", |
||||
"SECURE" => "Secure", |
||||
"P2P_COMMUNICATION" => "With VROOM, your communication is done peer to peer, and secured. " . |
||||
"Our servers are only used for signaling, so that everyone can connect " . |
||||
"directly to each other (see it like a virtual meeting point). All your " . |
||||
"important data is sent directly. Only if you are behind a strict firewall, " . |
||||
"streams will be relayed by our servers, as a last resort, but even in this case, " . |
||||
"we will just relay encrypted blobs.", |
||||
"WORKS_EVERYWHERE" => "Works everywhere", |
||||
"MODERN_BROWSERS" => "VROOM works with modern browsers (Chrome, Mozilla Firefox or Opera), " . |
||||
"you don't have to install plugins, codecs, client software, then " . |
||||
"send the tech documentation to all other parties. Just click, " . |
||||
"and hangout", |
||||
"MULTI_USER" => "Multi User", |
||||
"THE_LIMIT_IS_YOUR_PIPE" => "VROOM doesn't have a limit on the number of participants, " . |
||||
"you can chat with several people at the same time. The only limit " . |
||||
"is the capacity of your Internet pipe. Usually, you can chat with " . |
||||
"up to 5~6 person without problem", |
||||
"SUPPORTED_BROWSERS" => "Supported browsers", |
||||
"HELP_BROWSERS_SUPPORTED" => "Vroom works with any modern, standard compliant browsers, which means any recent Mozilla Firefox, Google Chrome or Opera.", |
||||
"SCREEN_SHARING" => "Screen Sharing", |
||||
"HELP_SCREEN_SHARING" => "VROOM lets you share your screen with the other members of the room. For now " . |
||||
"this feature is only available in Google Chrome, and you need to change the following setting " . |
||||
"<ul>" . |
||||
" <li>Type chrome://flags in the address bar" . |
||||
" <li>Look for the option \"Enable screen sharing in getUserMedia()\" and click on " . |
||||
" the \"enable\" link</li>" . |
||||
" <li>Click on the \"Restart now\" button which has just appeared at the bottom</li>" . |
||||
"</ul>", |
||||
"ABOUT_VROOM" => "VROOM is a free spftware using the latest web technologies and lets you " . |
||||
"to easily organize video meetings. Forget all the pain with installing " . |
||||
"a client on your computer in a hury, compatibility issues between MAC OS " . |
||||
"or GNU/Linux, port redirection problems, calls to the helpdesk because " . |
||||
"streams cannot establish, H323 vs SIP vs ISDN issues. All you need now is:" . |
||||
"<ul>" . |
||||
" <li>A device (PC, MAC, pad, doesn't matter)</li>" . |
||||
" <li>A webcam and a microphone</li>" . |
||||
" <li>A web browser</li>" . |
||||
"</ul>", |
||||
"HOW_IT_WORKS" => "How it works ?", |
||||
"ABOUT_HOW_IT_WORKS" => "WebRTC allows browsers to browsers direct connections. This allows the best latency " . |
||||
"as it avoids round trip through a server, which is important with real time communications. " . |
||||
"But it also ensures the privacy of your communications.", |
||||
"SERVERLESS" => "Serverless, really ?", |
||||
"ABOUT_SERVERLESS" => "We're talking about peer to peer, but, in reality, a server is still needed somewhere" . |
||||
"In WebRTC applications, server fulfil several roles: " . |
||||
"<ol>" . |
||||
" <li>A meeting point: lets clients exchange each other the needed information to establish peer to peers connections</li>" . |
||||
" <li>Provides the client! you don't have anything to install, but your browser still need to download a few scripts" . |
||||
" (the core is written in JavaScript)</li>" . |
||||
" <li>Signaling: some data without any confidential or private meaning are sent through " . |
||||
" what we call the signaling channel. This channel is routed through a server. However, " . |
||||
" this channel doesn't transport any sensible information. It's used for example to " . |
||||
" sync colors between peers, notify when someone join the room, when someone mute his mic " . |
||||
" or when the rooom is locked</li>" . |
||||
" <li>NAT traversal helper: the <a href='http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment'>ICE</a> " . |
||||
" mechanism is used to allow clients behind a NAT router to establish their connections. " . |
||||
" As long as possible, channels through which sensible informations are sent (called data channels) " . |
||||
" are established peer to peer, but in some situations, this is not possible. A " . |
||||
"<a href='http://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT'>TURN</a> server is used to relay data. " . |
||||
" But even in those cases, the server only relays ciphered packets, and has no access to the data " . |
||||
" so confidentiality is not compromised (only latency will be affected)</li>". |
||||
"</ol>", |
||||
"THANKS" => "Thanks", |
||||
"ABOUT_THANKS" => "VROOM uses the following components, so, thanks to their respective authors :-)", |
||||
|
||||
|
||||
); |
||||
|
||||
1; |
||||
@ -0,0 +1,145 @@ |
||||
package Vroom::I18N::fr; |
||||
use base 'Vroom::I18N'; |
||||
|
||||
use utf8; |
||||
|
||||
our %Lexicon = ( |
||||
_AUTO => 1, |
||||
"WELCOME" => "Bienvenue sur VROOM !!", |
||||
"ERROR_NAME_INVALID" => "Ce nom n'est pas valide", |
||||
"ERROR_NAME_CONFLICT" => "Ce nom est déjà pris, choisissez en un autre", |
||||
"ERROR_ROOM_s_DOESNT_EXIST" => "Le salon %s n'existe pas", |
||||
"ERROR_ROOM_LOCKED" => "Le salon %s est verrouillé, vous ne pouvez pas le rejoindre", |
||||
"ERROR_OCCURED" => "Une erreur est survenue", |
||||
"ERROR_NOT_LOGGED_IN" => "Désolé, vous n'êtes pas identifié", |
||||
"JOIN_US_ON_s" => "Rejoignez nous sur le salon %s", |
||||
"TO_JOIN_s_CLICK_s" => "Vous êtes invité à rejoindre le salon de vidéo conférence %s. " . |
||||
"Tout ce dont vous avez besoin est un navigateur web récent et " . |
||||
"une webcam. Quand vous êtes prêt, cliquez sur <a href='%s'>ce lien</a>", |
||||
"HAVE_A_NICE_MEETING" => "Bonne réunion :-)", |
||||
"EMAIL_SIGN" => "VROOM! Et la visio conférence devient libre, simple et sûr", |
||||
"INVITE_SENT_TO_s" => "Une invitation a été envoyée à %s", |
||||
"ROOM_LOCKED" => "Ce salon est maintenant verrouillé", |
||||
"ROOM_UNLOCKED" => "Ce salon est maintenant déverrouillé", |
||||
"ROOM_LOCKED_BY_s" => "%s a verrouillé le salon", |
||||
"ROOM_UNLOCKED_BY_s" => "%s a déverrouillé le salon", |
||||
"OOOPS" => "Oups", |
||||
"GOODBY" => "Au revoir", |
||||
"THANKS_SEE_YOU_SOON" => "Merci et à bientôt", |
||||
"THANKS_FOR_USING" => "Nous vous remmercions de votre confiance, et espérons que " . |
||||
"vous avez passé une agréable réunion.", |
||||
"BACK_TO_MAIN_MENU" => "Retour au menu principal", |
||||
"CREATE_ROOM" => "Créer un salon", |
||||
"ROOM_NAME" => "Nom du salon", |
||||
"RANDOM_IF_EMPTY" => "Si vous laissez ce champs vide, un nom élatoire sera donné au salon", |
||||
"ROOM_s" => "Salon %s", |
||||
"SEND_INVITE" => "Envoyez une invitation par mail", |
||||
"EMAIL_INVITE" => "Inviter par email", |
||||
"DISPLAY_NAME" => "Nom", |
||||
"YOUR_NAME" => "Votre nom", |
||||
"NAME_SENT_TO_OTHERS" => "Ce nom sera envoyé aux autres participants pour qu'ils puissent vous identifier. " . |
||||
"Vous devez en saisir un avant de pouvoir utiliser le tchat", |
||||
"CHANGE_COLOR" => "Changez de couleur", |
||||
"CLICK_TO_CHAT" => "Cliquez ici pour accéder au tchat", |
||||
"PREVENT_TO_JOIN" => "Empêchez d'autres participants de rejoindre à ce salon", |
||||
"MUTE_MIC" => "Coupez votre micro", |
||||
"SUSPEND_CAM" => "Stoppez la webcam, les autres verront un écran noir à la place, " . |
||||
"mais pourront toujours vous entendre", |
||||
"LOGOUT" => "Quitter le salon", |
||||
"SET_YOUR_NAME_TO_CHAT" => "Vous devez saisir votre nom avant de pouvoir tchater", |
||||
"MIC_MUTED" => "Votre micro est coupé", |
||||
"MIC_UNMUTED" => "Votre micro est à nouveau actif", |
||||
"CAM_SUSPENDED" => "Votre webcam est en pause", |
||||
"CAM_RESUMED" => "Votre webcam est à nouveau active", |
||||
"SHARE_YOUR_SCREEN" => "Partagez votre écran avec les autres membres du salon", |
||||
"CANT_SHARE_SCREEN" => "Désolé, mais votre configuration ne vous permet pas de partager votre écran", |
||||
"EVERYONE_CAN_SEE_YOUR_SCREEN" => "Tous les autres participants peuvent voir votre écran", |
||||
"SCREEN_UNSHARED" => "Vous ne partagez plus votre écran", |
||||
"ERROR_MAIL_INVALID" => "Veuillez saisir une adresse email valide", |
||||
"CANT_SEND_TO_s" => "Le message n'a pas pu être envoyé à %s", |
||||
"SCREEN_s" => "Écran de %s", |
||||
"HOME" => "Accueil", |
||||
"HELP" => "Aide", |
||||
"ABOUT" => "À propos", |
||||
"SECURE" => "Sécurisé", |
||||
"P2P_COMMUNICATION" => "Avec VROOM, vos communications se font de pair à pair, et sont sécurisées. " . |
||||
"Nos serveurs ne servent qu'au signalement, pour que chacun puisse se connecter aux autres " . |
||||
"(comme un point de rendez-vous virtuel) .Seulement si certains d'entre vous se trouvent " . |
||||
"derrière des par feu stricts, les flux seront relayés à travers notre serveur, en dernier " . |
||||
"recours, mais même dans ce cas, nous ne relayons que des flux chiffrés, inintelligibles", |
||||
"WORKS_EVERYWHERE" => "Fonctionne partout", |
||||
"MODERN_BROWSERS" => "VROOM marche avec les navigateurs modernes (Chrome, Mozilla Firefox, Opera), " . |
||||
"vous n'avez aucun plugin à installer, ni codec, ni client logiciel, ni à " . |
||||
"envoyer la doc technique aux autres participants. Vous n'avez qu'à cliquer, et dicuter", |
||||
"MULTI_USER" => "Multi utilisateurs", |
||||
"THE_LIMIT_IS_YOUR_PIPE" => "VROOM n'impose pas de limite sur le nombre de participants, vous pouvez discuter à " . |
||||
"plusieurs en même temps. La seule limite est la capacité de votre connexion Internet. " . |
||||
"En général, vous pouvez discuter à 5~6 personnes sans problème.", |
||||
"SUPPORTED_BROWSERS" => "Navigateurs supportés", |
||||
"HELP_BROWSERS_SUPPORTED" => "VROOM fonctionne avec tous les navigateurs modernes et respectueux des standards. " . |
||||
"Les technologies employées (WebRTC) étant très récentes, seules les versions " . |
||||
"récentes de Mozilla Firefox, Google Chrome et Opéra fonctionnent pour l'instant. " . |
||||
"Les autres navigateurs (principalement Internet Explorer et Safari) devraient " . |
||||
"suivrent un jour, mais ne fonctionneront pas pour l'instant", |
||||
"SREEN_SHARING" => "Partage d'écran", |
||||
"HELP_SCREEN_SHARING" => "VROOM vous permet de partager votre écran avec tous les autres participants d'une conférence. " . |
||||
"Pour l'instant, le partage d'écran ne fonctionne qu'avec le navigateur Google Chrome, " . |
||||
"et nécessite d'effectuer le réglage suivant:" . |
||||
"<ul>" . |
||||
" <li>Tapez chrome://flags/ dans la barre d'adresse</li>" . |
||||
" <li>Recherchez \"Activer la fonctionnalité de capture d'écran dans getUserMedia()\" et cliquez sur " . |
||||
" le lien \"Activer\" juste en dessous</li>" . |
||||
" <li>Cliquez sur le bouton \"Relancer maintenant\" qui apparait en bas de la page</li>" . |
||||
"</ul>", |
||||
"ABOUT_VROOM" => "VROOM est un logiciel libre exploitant les dernières technologies du " . |
||||
"web vous permettant d'organiser simplement des visio conférences. Fini " . |
||||
"les galères à devoir installer un client sur le poste au dernier moment, " . |
||||
"l'incompatibilité MAC OS ou GNU/Linux, les problèmes de redirection de port, " . |
||||
"les appels au support technique parce que la visio s'établie pas, les " . |
||||
"soucis d'H323 vs SIP vs ISDN. Tout ce qu'il vous faut désormais, c'est:" . |
||||
"<ul>" . |
||||
" <li>Un poste (PC, MAC, tablette, peu importe)</li>" . |
||||
" <li>Une webcam et un micro</li>" . |
||||
" <li>Un navigateur web</li>" . |
||||
"</ul>", |
||||
"HOW_IT_WORKS" => "Comment ça marche ?", |
||||
"ABOUT_HOW_IT_WORKS" => "WebRTC permet d'établir des connexions directement entre les navigateurs " . |
||||
"des participants. Cela permet d'une part d'offrir la meilleur latence possible ". |
||||
"en évitant les allez-retours avec un serveur, ce qui est toujours important " . |
||||
"lors de communications en temps réel. D'autre part, cela permet aussi de " . |
||||
"garantir la confidentialité de vos communications.", |
||||
"SERVERLESS" => "Aucun serveur, vraiment ?", |
||||
"ABOUT_SERVERLESS" => "On parle de pair à pair depuis tout à l'heure. En réalité, vous avez toujours " . |
||||
"besoin d'un serveur quelque part. Dans les applications WebRTC, le serveur " . |
||||
"remplis plusieurs rôles:" . |
||||
"<ol>" . |
||||
" <li>Le point de rendez-vous: permet à tous les participants de se " . |
||||
" retrouver et de s'échanger les informations nécessaires pour " . |
||||
" établir les connexions en direct</li>" . |
||||
" <li>Le client: il n'y a rien à installer sur le poste, mais votre navigateur " . |
||||
" doit cependant télécharger un ensembles de scripts (la majorité étant du " . |
||||
" JavaScript)</li>" . |
||||
" <li>Le signalement: certaines données sans caractère confidentiel transitent " . |
||||
" par ce qu'on appel le canal de signalement. Ce canal passe par un serveur. " . |
||||
" Cependant, ce canal ne transmet aucune information personnel ou sensible. Il " . |
||||
" est par exemple utilisé pour synchroniser les couleurs associées à chaque " . |
||||
" participant, quand un nouveau participant arrive, quelqu'un coupe son micro " . |
||||
" ou encore verrouille le salon</li>" . |
||||
" <li>Aide aux contournements du NAT: le mechanisme " . |
||||
"<a href='http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment'>ICE</a> " . |
||||
" est utilisé pour permettre aux clients derrière un NAT d'établir leurs connexions. " . |
||||
" Tant que c'est possible, les cannaux par lesquels les données sensibles transitent " . |
||||
" (appelés canaux de données) sont établis en direct, cependant, dans certaines " . |
||||
" situations, celà n'est pas possible. Un serveur " . |
||||
"<a href='http://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT'>TURN</a> " . |
||||
" est utilisé pour relayer les données. Même dans ces situations, le serveur " . |
||||
" n'a pas accès aux données en clair, il ne fait que relayer des trames " . |
||||
" chiffrées parfaitement inintelligibles, la confidentialité des communications " . |
||||
" n'est donc pas compromise (la latence sera par contre affectée)</li>". |
||||
"</ol>", |
||||
"THANKS" => "Remerciements", |
||||
"ABOUT_THANKS" => "VROOM utilise les composnts suivants, merci donc aux auteurs respectifs :-)", |
||||
|
||||
); |
||||
|
||||
1; |
||||
@ -0,0 +1,347 @@ |
||||
/*! |
||||
* Bootstrap v3.1.1 (http://getbootstrap.com) |
||||
* Copyright 2011-2014 Twitter, Inc. |
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) |
||||
*/ |
||||
|
||||
.btn-default, |
||||
.btn-primary, |
||||
.btn-success, |
||||
.btn-info, |
||||
.btn-warning, |
||||
.btn-danger { |
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); |
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); |
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); |
||||
} |
||||
.btn-default:active, |
||||
.btn-primary:active, |
||||
.btn-success:active, |
||||
.btn-info:active, |
||||
.btn-warning:active, |
||||
.btn-danger:active, |
||||
.btn-default.active, |
||||
.btn-primary.active, |
||||
.btn-success.active, |
||||
.btn-info.active, |
||||
.btn-warning.active, |
||||
.btn-danger.active { |
||||
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); |
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); |
||||
} |
||||
.btn:active, |
||||
.btn.active { |
||||
background-image: none; |
||||
} |
||||
.btn-default { |
||||
text-shadow: 0 1px 0 #fff; |
||||
background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%); |
||||
background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #dbdbdb; |
||||
border-color: #ccc; |
||||
} |
||||
.btn-default:hover, |
||||
.btn-default:focus { |
||||
background-color: #e0e0e0; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-default:active, |
||||
.btn-default.active { |
||||
background-color: #e0e0e0; |
||||
border-color: #dbdbdb; |
||||
} |
||||
.btn-primary { |
||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%); |
||||
background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #2b669a; |
||||
} |
||||
.btn-primary:hover, |
||||
.btn-primary:focus { |
||||
background-color: #2d6ca2; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-primary:active, |
||||
.btn-primary.active { |
||||
background-color: #2d6ca2; |
||||
border-color: #2b669a; |
||||
} |
||||
.btn-success { |
||||
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%); |
||||
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #3e8f3e; |
||||
} |
||||
.btn-success:hover, |
||||
.btn-success:focus { |
||||
background-color: #419641; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-success:active, |
||||
.btn-success.active { |
||||
background-color: #419641; |
||||
border-color: #3e8f3e; |
||||
} |
||||
.btn-info { |
||||
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); |
||||
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #28a4c9; |
||||
} |
||||
.btn-info:hover, |
||||
.btn-info:focus { |
||||
background-color: #2aabd2; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-info:active, |
||||
.btn-info.active { |
||||
background-color: #2aabd2; |
||||
border-color: #28a4c9; |
||||
} |
||||
.btn-warning { |
||||
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); |
||||
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #e38d13; |
||||
} |
||||
.btn-warning:hover, |
||||
.btn-warning:focus { |
||||
background-color: #eb9316; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-warning:active, |
||||
.btn-warning.active { |
||||
background-color: #eb9316; |
||||
border-color: #e38d13; |
||||
} |
||||
.btn-danger { |
||||
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%); |
||||
background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #b92c28; |
||||
} |
||||
.btn-danger:hover, |
||||
.btn-danger:focus { |
||||
background-color: #c12e2a; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-danger:active, |
||||
.btn-danger.active { |
||||
background-color: #c12e2a; |
||||
border-color: #b92c28; |
||||
} |
||||
.thumbnail, |
||||
.img-thumbnail { |
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); |
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .075); |
||||
} |
||||
.dropdown-menu > li > a:hover, |
||||
.dropdown-menu > li > a:focus { |
||||
background-color: #e8e8e8; |
||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); |
||||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.dropdown-menu > .active > a, |
||||
.dropdown-menu > .active > a:hover, |
||||
.dropdown-menu > .active > a:focus { |
||||
background-color: #357ebd; |
||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%); |
||||
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.navbar-default { |
||||
background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%); |
||||
background-image: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-radius: 4px; |
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075); |
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075); |
||||
} |
||||
.navbar-default .navbar-nav > .active > a { |
||||
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%); |
||||
background-image: linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075); |
||||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075); |
||||
} |
||||
.navbar-brand, |
||||
.navbar-nav > li > a { |
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .25); |
||||
} |
||||
.navbar-inverse { |
||||
background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%); |
||||
background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.navbar-inverse .navbar-nav > .active > a { |
||||
background-image: -webkit-linear-gradient(top, #222 0%, #282828 100%); |
||||
background-image: linear-gradient(to bottom, #222 0%, #282828 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25); |
||||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25); |
||||
} |
||||
.navbar-inverse .navbar-brand, |
||||
.navbar-inverse .navbar-nav > li > a { |
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); |
||||
} |
||||
.navbar-static-top, |
||||
.navbar-fixed-top, |
||||
.navbar-fixed-bottom { |
||||
border-radius: 0; |
||||
} |
||||
.alert { |
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .2); |
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05); |
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05); |
||||
} |
||||
.alert-success { |
||||
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%); |
||||
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
border-color: #b2dba1; |
||||
} |
||||
.alert-info { |
||||
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%); |
||||
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
border-color: #9acfea; |
||||
} |
||||
.alert-warning { |
||||
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%); |
||||
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
border-color: #f5e79e; |
||||
} |
||||
.alert-danger { |
||||
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%); |
||||
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
border-color: #dca7a7; |
||||
} |
||||
.progress { |
||||
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%); |
||||
background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.progress-bar { |
||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%); |
||||
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.progress-bar-success { |
||||
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%); |
||||
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.progress-bar-info { |
||||
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%); |
||||
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.progress-bar-warning { |
||||
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%); |
||||
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.progress-bar-danger { |
||||
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%); |
||||
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.list-group { |
||||
border-radius: 4px; |
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); |
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .075); |
||||
} |
||||
.list-group-item.active, |
||||
.list-group-item.active:hover, |
||||
.list-group-item.active:focus { |
||||
text-shadow: 0 -1px 0 #3071a9; |
||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%); |
||||
background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
border-color: #3278b3; |
||||
} |
||||
.panel { |
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); |
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .05); |
||||
} |
||||
.panel-default > .panel-heading { |
||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); |
||||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.panel-primary > .panel-heading { |
||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%); |
||||
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.panel-success > .panel-heading { |
||||
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%); |
||||
background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.panel-info > .panel-heading { |
||||
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%); |
||||
background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.panel-warning > .panel-heading { |
||||
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%); |
||||
background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.panel-danger > .panel-heading { |
||||
background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%); |
||||
background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.well { |
||||
background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%); |
||||
background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
border-color: #dcdcdc; |
||||
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1); |
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1); |
||||
} |
||||
/*# sourceMappingURL=bootstrap-theme.css.map */ |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,106 @@ |
||||
a { |
||||
color: black; |
||||
} |
||||
#webRTCVideo { |
||||
overflow-y: auto; |
||||
} |
||||
#webRTCVideo video { |
||||
width: 100%; |
||||
height: auto; |
||||
//border-radius: 5px; |
||||
} |
||||
#webRTCVideo .selected { |
||||
box-shadow: 0px 0px 2pt 2pt red; |
||||
} |
||||
#mainVideo{ |
||||
margin-right: auto; |
||||
margin-left: auto; |
||||
text-align: center; |
||||
} |
||||
#mainVideo video { |
||||
max-width: 100%; |
||||
min-width: 75%; |
||||
height: auto; |
||||
//border:5px solid grey; |
||||
//border-radius: 15px; |
||||
} |
||||
.previewContainer{ |
||||
margin-top: 5px; |
||||
margin-bottom: 5px; |
||||
} |
||||
.previewContainer:nth-child(2n+1){ |
||||
clear: left; |
||||
} |
||||
.volumeBar { |
||||
position: absolute; |
||||
width: 5px; |
||||
height: 0px; |
||||
right: 0px; |
||||
bottom: 0px; |
||||
background-color: #12acef; |
||||
} |
||||
.muted { |
||||
content:url(/img/mute.png) no-repeat; |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 10px; |
||||
} |
||||
.paused{ |
||||
content:url(/img/pause.png); |
||||
position: absolute; |
||||
right: 56px; |
||||
top: 10px; |
||||
} |
||||
.displayName { |
||||
text-align: center; |
||||
font-weight: bold; |
||||
border-radius: 8px; |
||||
word-wrap: break-word; |
||||
padding-right: 5px; |
||||
padding-left: 5px; |
||||
padding-top: 2px; |
||||
padding-bottom: 2px; |
||||
} |
||||
#createRoomContainer { |
||||
max-width: 500px; |
||||
margin-top: 50px; |
||||
margin-right: auto; |
||||
margin-left: auto; |
||||
} |
||||
#chatBox { |
||||
max-height:300px; |
||||
resize:none; |
||||
} |
||||
#chatContainer { |
||||
width: 600px; |
||||
} |
||||
#chatHistory{ |
||||
width: 100%; |
||||
height: 200px; |
||||
overflow: auto; |
||||
} |
||||
.chatMsgContainer { |
||||
margin-right: 3px; |
||||
margin-left: 3px; |
||||
} |
||||
.chatMsg { |
||||
max-width: 75%; |
||||
border-radius: 8px; |
||||
margin-top: 2px; |
||||
margin-bottom: 2px; |
||||
word-wrap: break-word; |
||||
padding-right: 5px; |
||||
padding-left: 5px; |
||||
padding-top: 2px; |
||||
padding-bottom: 2px; |
||||
white-space: pre; |
||||
} |
||||
.chatMsgSelf { |
||||
float: right; |
||||
} |
||||
.chatMsgOthers { |
||||
float: left; |
||||
} |
||||
#chatMenu { |
||||
margin-bottom: 15px; |
||||
} |
||||
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 560 B |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 368 B |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 246 B |
|
After Width: | Height: | Size: 2.1 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,14 @@ |
||||
/*! |
||||
* jQuery Browser Plugin 0.0.5 |
||||
* https://github.com/gabceb/jquery-browser-plugin
|
||||
* |
||||
* Original jquery-browser code Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors |
||||
* http://jquery.org/license
|
||||
* |
||||
* Modifications Copyright 2014 Gabriel Cebrian |
||||
* https://github.com/gabceb
|
||||
* |
||||
* Released under the MIT license |
||||
* |
||||
* Date: 05-01-2014 |
||||
*/!function(a,b){"use strict";var c,d;if(a.uaMatch=function(a){a=a.toLowerCase();var b=/(opr)[\/]([\w.]+)/.exec(a)||/(chrome)[ \/]([\w.]+)/.exec(a)||/(version)[ \/]([\w.]+).*(safari)[ \/]([\w.]+)/.exec(a)||/(webkit)[ \/]([\w.]+)/.exec(a)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(a)||/(msie) ([\w.]+)/.exec(a)||a.indexOf("trident")>=0&&/(rv)(?::| )([\w.]+)/.exec(a)||a.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(a)||[],c=/(ipad)/.exec(a)||/(iphone)/.exec(a)||/(android)/.exec(a)||/(windows phone)/.exec(a)||/(win)/.exec(a)||/(mac)/.exec(a)||/(linux)/.exec(a)||[];return{browser:b[3]||b[1]||"",version:b[2]||"0",platform:c[0]||""}},c=a.uaMatch(b.navigator.userAgent),d={},c.browser&&(d[c.browser]=!0,d.version=c.version,d.versionNumber=parseInt(c.version)),c.platform&&(d[c.platform]=!0),(d.chrome||d.opr||d.safari)&&(d.webkit=!0),d.rv){var e="msie";c.browser=e,d[e]=!0}if(d.opr){var f="opera";c.browser=f,d[f]=!0}if(d.safari&&d.android){var g="android";c.browser=g,d[g]=!0}d.name=c.browser,d.platform=c.platform,a.browser=d}(jQuery,window); |
||||
@ -0,0 +1,4 @@ |
||||
function linkify(string,buildHashtagUrl,includeW3,target,noFollow){relNoFollow="";if(noFollow)relNoFollow=' rel="nofollow"';string=string.replace(/((http|https|ftp)\:\/\/|\bw{3}\.)[a-z0-9\-\.]+\.[a-z]{2,3}(:[a-z0-9]*)?\/?([a-z\u00C0-\u017F0-9\-\._\?\,\'\/\\\+&%\$#\=~])*/gi,function(captured){var uri;if(captured.toLowerCase().indexOf("www.")==0){if(!includeW3)return captured;uri="http://"+captured}else uri=captured;return'<a href="'+uri+'" target="'+target+'"'+relNoFollow+">"+captured+"</a>"}); |
||||
if(buildHashtagUrl)string=string.replace(/\B#(\w+)/g,"<a href="+buildHashtagUrl("$1")+' target="'+target+'"'+relNoFollow+">#$1</a>");return string} |
||||
(function($){$.fn.linkify=function(opts){return this.each(function(){var $this=$(this);var buildHashtagUrl;var includeW3=true;var target="_self";var noFollow=true;if(opts)if(typeof opts=="function")buildHashtagUrl=opts;else{if(typeof opts.hashtagUrlBuilder=="function")buildHashtagUrl=opts.hashtagUrlBuilder;if(typeof opts.includeW3=="boolean")includeW3=opts.includeW3;if(typeof opts.target=="string")target=opts.target;if(typeof opts.noFollow=="boolean")noFollow=opts.noFollow}$this.html($.map($this.contents(), |
||||
function(n,i){if(n.nodeType==3)return linkify(n.data,buildHashtagUrl,includeW3,target,noFollow);else return n.outerHTML}).join(""))})}})(jQuery); |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,163 @@ |
||||
/** |
||||
* JavaScript printf/sprintf functions. |
||||
* |
||||
* This code is unrestricted: you are free to use it however you like. |
||||
*
|
||||
* The functions should work as expected, performing left or right alignment, |
||||
* truncating strings, outputting numbers with a required precision etc. |
||||
* |
||||
* For complex cases, these functions follow the Perl implementations of |
||||
* (s)printf, allowing arguments to be passed out-of-order, and to set the |
||||
* precision or length of the output based on arguments instead of fixed |
||||
* numbers. |
||||
* |
||||
* See http://perldoc.perl.org/functions/sprintf.html for more information.
|
||||
* |
||||
* Implemented: |
||||
* - zero and space-padding |
||||
* - right and left-alignment, |
||||
* - base X prefix (binary, octal and hex) |
||||
* - positive number prefix |
||||
* - (minimum) width |
||||
* - precision / truncation / maximum width |
||||
* - out of order arguments |
||||
* |
||||
* Not implemented (yet): |
||||
* - vector flag |
||||
* - size (bytes, words, long-words etc.) |
||||
*
|
||||
* Will not implement: |
||||
* - %n or %p (no pass-by-reference in JavaScript) |
||||
* |
||||
* @version 2007.04.27 |
||||
* @author Ash Searle |
||||
*/ |
||||
function sprintf() { |
||||
function pad(str, len, chr, leftJustify) { |
||||
var padding = (str.length >= len) ? '' : Array(1 + len - str.length >>> 0).join(chr); |
||||
return leftJustify ? str + padding : padding + str; |
||||
|
||||
} |
||||
|
||||
function justify(value, prefix, leftJustify, minWidth, zeroPad) { |
||||
var diff = minWidth - value.length; |
||||
if (diff > 0) { |
||||
if (leftJustify || !zeroPad) { |
||||
value = pad(value, minWidth, ' ', leftJustify); |
||||
} else { |
||||
value = value.slice(0, prefix.length) + pad('', diff, '0', true) + value.slice(prefix.length); |
||||
} |
||||
} |
||||
return value; |
||||
} |
||||
|
||||
function formatBaseX(value, base, prefix, leftJustify, minWidth, precision, zeroPad) { |
||||
// Note: casts negative numbers to positive ones
|
||||
var number = value >>> 0; |
||||
prefix = prefix && number && {'2': '0b', '8': '0', '16': '0x'}[base] || ''; |
||||
value = prefix + pad(number.toString(base), precision || 0, '0', false); |
||||
return justify(value, prefix, leftJustify, minWidth, zeroPad); |
||||
} |
||||
|
||||
function formatString(value, leftJustify, minWidth, precision, zeroPad) { |
||||
if (precision != null) { |
||||
value = value.slice(0, precision); |
||||
} |
||||
return justify(value, '', leftJustify, minWidth, zeroPad); |
||||
} |
||||
|
||||
var a = arguments, i = 0, format = a[i++]; |
||||
return format.replace(sprintf.regex, function(substring, valueIndex, flags, minWidth, _, precision, type) { |
||||
if (substring == '%%') return '%'; |
||||
|
||||
// parse flags
|
||||
var leftJustify = false, positivePrefix = '', zeroPad = false, prefixBaseX = false; |
||||
for (var j = 0; flags && j < flags.length; j++) switch (flags.charAt(j)) { |
||||
case ' ': positivePrefix = ' '; break; |
||||
case '+': positivePrefix = '+'; break; |
||||
case '-': leftJustify = true; break; |
||||
case '0': zeroPad = true; break; |
||||
case '#': prefixBaseX = true; break; |
||||
} |
||||
|
||||
// parameters may be null, undefined, empty-string or real valued
|
||||
// we want to ignore null, undefined and empty-string values
|
||||
|
||||
if (!minWidth) { |
||||
minWidth = 0; |
||||
} else if (minWidth == '*') { |
||||
minWidth = +a[i++]; |
||||
} else if (minWidth.charAt(0) == '*') { |
||||
minWidth = +a[minWidth.slice(1, -1)]; |
||||
} else { |
||||
minWidth = +minWidth; |
||||
} |
||||
|
||||
// Note: undocumented perl feature:
|
||||
if (minWidth < 0) { |
||||
minWidth = -minWidth; |
||||
leftJustify = true; |
||||
} |
||||
|
||||
if (!isFinite(minWidth)) { |
||||
throw new Error('sprintf: (minimum-)width must be finite'); |
||||
} |
||||
|
||||
if (!precision) { |
||||
precision = 'fFeE'.indexOf(type) > -1 ? 6 : (type == 'd') ? 0 : void(0); |
||||
} else if (precision == '*') { |
||||
precision = +a[i++]; |
||||
} else if (precision.charAt(0) == '*') { |
||||
precision = +a[precision.slice(1, -1)]; |
||||
} else { |
||||
precision = +precision; |
||||
} |
||||
|
||||
// grab value using valueIndex if required?
|
||||
var value = valueIndex ? a[valueIndex.slice(0, -1)] : a[i++]; |
||||
|
||||
switch (type) { |
||||
case 's': return formatString(String(value), leftJustify, minWidth, precision, zeroPad); |
||||
case 'c': return formatString(String.fromCharCode(+value), leftJustify, minWidth, precision, zeroPad); |
||||
case 'b': return formatBaseX(value, 2, prefixBaseX, leftJustify, minWidth, precision, zeroPad); |
||||
case 'o': return formatBaseX(value, 8, prefixBaseX, leftJustify, minWidth, precision, zeroPad); |
||||
case 'x': return formatBaseX(value, 16, prefixBaseX, leftJustify, minWidth, precision, zeroPad); |
||||
case 'X': return formatBaseX(value, 16, prefixBaseX, leftJustify, minWidth, precision, zeroPad).toUpperCase(); |
||||
case 'u': return formatBaseX(value, 10, prefixBaseX, leftJustify, minWidth, precision, zeroPad); |
||||
case 'i': |
||||
case 'd': { |
||||
var number = parseInt(+value); |
||||
var prefix = number < 0 ? '-' : positivePrefix; |
||||
value = prefix + pad(String(Math.abs(number)), precision, '0', false); |
||||
return justify(value, prefix, leftJustify, minWidth, zeroPad); |
||||
} |
||||
case 'e': |
||||
case 'E': |
||||
case 'f': |
||||
case 'F': |
||||
case 'g': |
||||
case 'G': |
||||
{ |
||||
var number = +value; |
||||
var prefix = number < 0 ? '-' : positivePrefix; |
||||
var method = ['toExponential', 'toFixed', 'toPrecision']['efg'.indexOf(type.toLowerCase())]; |
||||
var textTransform = ['toString', 'toUpperCase']['eEfFgG'.indexOf(type) % 2]; |
||||
value = prefix + Math.abs(number)[method](precision); |
||||
return justify(value, prefix, leftJustify, minWidth, zeroPad)[textTransform](); |
||||
} |
||||
default: return substring; |
||||
} |
||||
}); |
||||
} |
||||
sprintf.regex = /%%|%(\d+\$)?([-+#0 ]*)(\*\d+\$|\*|\d+)?(\.(\*\d+\$|\*|\d+))?([scboxXuidfegEG])/g; |
||||
|
||||
/** |
||||
* Trival printf implementation, probably only useful during page-load. |
||||
* Note: you may as well use "document.write(sprintf(....))" directly |
||||
*/ |
||||
function printf() { |
||||
// delegate the work to sprintf in an IE5 friendly manner:
|
||||
var i = 0, a = arguments, args = Array(arguments.length); |
||||
while (i < args.length) args[i] = 'a[' + (i++) + ']'; |
||||
document.write(eval('sprintf(' + args + ')')); |
||||
} |
||||
@ -0,0 +1,613 @@ |
||||
/* |
||||
This file is part of the VROOM project |
||||
released under the MIT licence |
||||
Copyright 2014 Firewall Services |
||||
*/ |
||||
|
||||
|
||||
// Default notifications
|
||||
$.notify.defaults( { globalPosition: "bottom left" } ); |
||||
// Enable tooltip on required elements
|
||||
$('.help').tooltip({container: 'body'}); |
||||
|
||||
// Strings we need translated
|
||||
var locale = { |
||||
ERROR_MAIL_INVALID: '', |
||||
ERROR_OCCURED: '', |
||||
CANT_SHARE_SCREEN: '', |
||||
EVERYONE_CAN_SEE_YOUR_SCREEN: '', |
||||
SCREEN_UNSHARED: '', |
||||
MIC_MUTED: '', |
||||
MIC_UNMUTED: '', |
||||
CAM_SUSPENDED: '', |
||||
CAM_RESUMED: '', |
||||
SET_YOUR_NAME_TO_CHAT: '', |
||||
ROOM_LOCKED_BY_s: '', |
||||
ROOM_UNLOCKED_BY_s: '', |
||||
CANT_SEND_TO_s: '', |
||||
SCREEN_s: '' |
||||
}; |
||||
|
||||
// Localize the strings we need
|
||||
$.ajax({ |
||||
url: '/localize', |
||||
type: 'POST', |
||||
dataType: 'json', |
||||
data: { |
||||
strings: JSON.stringify(locale), |
||||
}, |
||||
success: function(data) { |
||||
locale = data; |
||||
} |
||||
}); |
||||
|
||||
function initVroom(room) { |
||||
|
||||
var peers = { |
||||
local: { |
||||
screenShared: false, |
||||
micMuted: false, |
||||
videoPaused: false, |
||||
displayName: '', |
||||
color: chooseColor() |
||||
} |
||||
}; |
||||
var mainVid = false; |
||||
|
||||
$('#name_local').css('background-color', peers.local.color); |
||||
|
||||
$.ajaxSetup({ |
||||
url: actionUrl, |
||||
type: 'POST', |
||||
dataType: 'json',
|
||||
}); |
||||
|
||||
// Screen sharing is onl suported on chrome > 26
|
||||
if ( !$.browser.webkit || $.browser.versionNumber < 26 ) { |
||||
$("#shareScreenLabel").addClass('disabled'); |
||||
} |
||||
|
||||
// Escape entities
|
||||
function stringEscape(string){ |
||||
string = string.replace(/[\u00A0-\u99999<>\&]/gim, function(i) { |
||||
return '&#' + i.charCodeAt(0) + ';'; |
||||
}); |
||||
return string; |
||||
} |
||||
|
||||
// Select a color (randomly) from this list, used for text chat
|
||||
function chooseColor(){ |
||||
// Shamelessly taken from http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
|
||||
var colors = [ |
||||
'#F37E79', '#7998F3', '#BBF379', '#F379DF', '#79F3E3', '#F3BF79', '#F3BF79', '#9C79F3', |
||||
'#7AF379', '#F3799D', '#79C1F3', '#E4F379', '#DE79F3', '#79F3BA', '#F39779', '#797FF3', |
||||
'#A2F379', '#F379C6', '#79E9F3', '#F3D979', '#B579F3', '#79F392', '#F37984', '#79A8F3', |
||||
'#CBF379', '#F379EE', '#79F3D3' |
||||
]; |
||||
return colors[Math.floor(Math.random() * colors.length)]; |
||||
} |
||||
|
||||
// Just play a sound
|
||||
function playSound(sound){ |
||||
var audio = new Audio('/snd/'+sound); |
||||
audio.play(); |
||||
} |
||||
|
||||
// Logout
|
||||
function hangupCall(){ |
||||
webrtc.connection.disconnect(); |
||||
} |
||||
|
||||
// Handle a new video (either another peer, or a screen
|
||||
// including our own local screen
|
||||
function addVideo(video,peer){ |
||||
playSound('join.mp3'); |
||||
// The main div of this new video
|
||||
// will contain the video plus all other info like displayName, overlay and volume bar
|
||||
var div = $('<div></div>').addClass('col-md-6 previewContainer').append(video).appendTo("#webRTCVideo"); |
||||
// Peer isn't defined ? it's our own local screen
|
||||
var id; |
||||
if (!peer){ |
||||
id = 'local'; |
||||
$('<div></div>').addClass('displayName').attr('id', 'name_local_screen').appendTo(div); |
||||
updateDisplayName(id); |
||||
} |
||||
// video id contains screen ? it's a peer sharing it's screen
|
||||
else if (video.id.match(/screen/)){ |
||||
id = peer.id + '_screen'; |
||||
var peer_id = video.id.replace('_screen_incoming', ''); |
||||
$('<div></div>').addClass('displayName').attr('id', 'name_' + peer_id + '_screen').appendTo(div); |
||||
updateDisplayName(peer_id); |
||||
} |
||||
// It's the webcam of a peer
|
||||
// add the volume bar and the mute/pause overlay
|
||||
else{ |
||||
id = peer.id; |
||||
// Create 3 divs which will contains the volume bar, the displayName and the muted/paused el (overlay)
|
||||
$('<div></div>').addClass('volumeBar').attr('id', 'volume_' + id).appendTo(div); |
||||
$('<div></div>').addClass('displayName').attr('id', 'name_' + id).appendTo(div); |
||||
$('<div></div>').attr('id', 'overlay_' + id).appendTo(div); |
||||
// Create a new dataChannel
|
||||
// will be used for text chat
|
||||
var color = chooseColor(); |
||||
peers[peer.id] = { |
||||
displayName: peer.id, |
||||
color: color, |
||||
dc: peer.getDataChannel('vroom'), |
||||
obj: peer |
||||
}; |
||||
// Send our state to this peer (mute/paused/displayName)
|
||||
// but wait a bit so channels are fully setup (or have more chances to be) before we send
|
||||
setTimeout(function(){ |
||||
if ($('#displayName').val() !== '') { |
||||
// TODO: would be better to unicast that
|
||||
webrtc.sendDirectlyToAll('vroom','setDisplayName', $('#displayName').val()); |
||||
} |
||||
webrtc.sendToAll('peer_color', {color: peers.local.color}); |
||||
}, 3500); |
||||
} |
||||
$(div).attr('id', 'peer_' + id); |
||||
// Disable context menu on the video
|
||||
$(video).bind("contextmenu", function(){ |
||||
return false; |
||||
}); |
||||
// And go full screen on double click
|
||||
// TODO: also handle double tap
|
||||
$(video).dblclick(function() { |
||||
this.requestFullScreen = this.webkitRequestFullScreen || this.mozRequestFullScreen; |
||||
this.requestFullScreen(); |
||||
}); |
||||
// Simple click put this preview in the mainVideo div
|
||||
$(video).click(function() { |
||||
if ($(this).hasClass('selected')){ |
||||
$(this).removeClass('selected'); |
||||
$('#mainVideo').html(''); |
||||
} |
||||
else { |
||||
$('#mainVideo').html($(video).clone().dblclick(function() { |
||||
this.requestFullScreen = this.webkitRequestFullScreen || this.mozRequestFullScreen; |
||||
this.requestFullScreen(); |
||||
}).css('max-height', $(window).height()-$('#toolbar').height()-25)).bind("contextmenu", function(){ return false; }); |
||||
$('.selected').removeClass('selected'); |
||||
$(this).addClass('selected'); |
||||
mainVid = id; |
||||
} |
||||
}); |
||||
} |
||||
|
||||
// Update volume of the corresponding peer
|
||||
function showVolume(el, volume) { |
||||
if (!el){ |
||||
return; |
||||
} |
||||
if (volume < -45) { // vary between -45 and -20
|
||||
el.css('height', '0px'); |
||||
} |
||||
else if (volume > -20) { |
||||
el.css('height', '100%'); |
||||
} |
||||
else { |
||||
el.css('height', Math.floor((volume + 100) * 100 / 25 - 220) + '%'); |
||||
} |
||||
} |
||||
|
||||
// Return curren time formatted as XX:XX:XX
|
||||
function getTime(){ |
||||
var d = new Date(); |
||||
var hours = d.getHours().toString(), |
||||
minutes = d.getMinutes().toString(), |
||||
seconds = d.getSeconds().toString(); |
||||
hours = (hours.length < 2) ? '0' + hours:hours; |
||||
minutes = (minutes.length < 2) ? '0' + minutes:minutes; |
||||
seconds = (seconds.length < 2) ? '0' + seconds:seconds; |
||||
return hours + ':' + minutes + ':' + seconds; |
||||
} |
||||
|
||||
// Linkify urls
|
||||
// Taken from http://rickyrosario.com/blog/converting-a-url-into-a-link-in-javascript-linkify-function/
|
||||
function linkify(text){ |
||||
if (text) { |
||||
text = text.replace( |
||||
/((https?\:\/\/)|(www\.))(\S+)(\w{2,4})(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi, |
||||
function(url){ |
||||
var full_url = url; |
||||
if (!full_url.match('^https?:\/\/')) { |
||||
full_url = 'http://' + full_url; |
||||
} |
||||
return '<a href="' + full_url + '" target="_blank">' + url + '</a>'; |
||||
} |
||||
); |
||||
} |
||||
return text; |
||||
} |
||||
|
||||
// Add a new message to the chat history
|
||||
function newChatMessage(from,message){ |
||||
// displayName and message have already been escaped
|
||||
var cl = (from === 'local') ? 'chatMsgSelf':'chatMsgOthers'; |
||||
var newmsg = $('<div class="chatMsg ' + cl + '">' + getTime() + ' ' + peers[from].displayName + '<p>' + linkify(message) + '</p></div>').css('background-color', peers[from].color); |
||||
$('<div class="row chatMsgContainer"></div>').append(newmsg).appendTo('#chatHistory'); |
||||
$('#chatHistory').scrollTop($('#chatHistory').prop('scrollHeight')); |
||||
} |
||||
|
||||
// Update the displayName of the peer
|
||||
// and its screen if any
|
||||
function updateDisplayName(id){ |
||||
// We might receive the screen before the screen itself
|
||||
// so check if the object exist before using it, or fallback with empty values
|
||||
var display = (peers[id] && peers[id].hasName) ? peers[id].displayName : ''; |
||||
var color = (peers[id] && peers[id].color) ? peers[id].color : chooseColor(); |
||||
var screenName = (peers[id] && peers[id].hasName) ? sprintf(locale.SCREEN_s, peers[id].displayName) : ''; |
||||
$('#name_' + id).html(display).css('background-color', color); |
||||
$('#name_' + id + '_screen').html(screenName).css('background-color', color); |
||||
} |
||||
|
||||
// Handle volume changes from our own mic
|
||||
webrtc.on('volumeChange', function (volume, treshold) { |
||||
showVolume($('#localVolume'), volume); |
||||
}); |
||||
|
||||
webrtc.on('channelMessage', function (peer, label, data) { |
||||
// We only want to act on data receive from the vroom channel
|
||||
if (label !== 'vroom') return; |
||||
// Handle volume changes from remote peers
|
||||
if (data.type == 'volume') { |
||||
showVolume($('#volume_' + peer.id), data.volume); |
||||
} |
||||
// The peer sets a displayName, record this in our peers struct
|
||||
else if (data.type == 'setDisplayName') { |
||||
var name = stringEscape(data.payload); |
||||
peer.logger.log('Received displayName ' + name + ' from peer ' + peer.id); |
||||
// Set display name under the video
|
||||
peers[peer.id].displayName = name; |
||||
if (name !== '') peers[peer.id].hasName = true; |
||||
else peers[peer.id].hasName = false; |
||||
updateDisplayName(peer.id); |
||||
} |
||||
// One peer just sent a text chat message
|
||||
else if (data.type == 'textChat') { |
||||
if ($('#chatDropdown').hasClass('collapsed')){ |
||||
$('#chatDropdown').addClass('btn-danger'); |
||||
playSound('newmsg.mp3'); |
||||
} |
||||
newChatMessage(peer.id,stringEscape(data.payload)); |
||||
} |
||||
}); |
||||
|
||||
webrtc.on('peer_color', function(data){ |
||||
var color = data.payload.color; |
||||
if (!color.match(/#[\da-f]{6}/i)) return; |
||||
peers[data.id].color = color; |
||||
$('#name_' + data.id).css('background-color', color); |
||||
$('#name_' + data.id + '_screen').css('background-color', color); |
||||
// Update the displayName but only if it has been set (no need to display a cryptic peer ID)
|
||||
if (peers[data.id].hasName){ |
||||
updateDisplayName(data.id); |
||||
} |
||||
}); |
||||
|
||||
// Received when a peer mute his mic, or pause the video
|
||||
webrtc.on('mute', function(data){ |
||||
if (data.name === 'audio'){ |
||||
showVolume($('#volume_' + data.id), -46); |
||||
var div = 'mute_' + data.id, |
||||
cl = 'muted'; |
||||
} |
||||
else if (data.name === 'video'){ |
||||
var div = 'pause_' + data.id, |
||||
cl = 'paused'; |
||||
} |
||||
else return; |
||||
$("#overlay_" + data.id).append('<div id="' + div + '" class="' + cl + '"></div>'); |
||||
}); |
||||
|
||||
// Handle unmute/resume
|
||||
webrtc.on('unmute', function(data){ |
||||
if (data.name === 'audio'){ |
||||
var el = "#mute_" + data.id; |
||||
} |
||||
else { // if (data.name === 'video')
|
||||
var el = "#pause_" + data.id; |
||||
} |
||||
console.log('Removing el: ' + el); |
||||
$(el).remove(); |
||||
}); |
||||
|
||||
webrtc.on('room_locked', function(data){ |
||||
$('#lockLabel').addClass('btn-danger active'); |
||||
$.notify(sprintf(locale.ROOM_LOCKED_BY_s, peers[data.id].displayName), 'info'); |
||||
}); |
||||
|
||||
webrtc.on('room_unlocked', function(data){ |
||||
$('#lockLabel').removeClass('btn-danger active'); |
||||
$.notify(sprintf(locale.ROOM_UNLOCKED_BY_s, peers[data.id].displayName), 'info'); |
||||
}); |
||||
|
||||
// Handle the readyToCall event: join the room
|
||||
webrtc.once('readyToCall', function () { |
||||
webrtc.joinRoom(room); |
||||
}); |
||||
|
||||
// Handle new video stream added: someone joined the room
|
||||
webrtc.on('videoAdded', function(video,peer){ |
||||
addVideo(video,peer); |
||||
}); |
||||
|
||||
webrtc.on('localScreenAdded', function(video){ |
||||
addVideo(video); |
||||
}); |
||||
|
||||
// Handle video stream removed: someone leaved the room
|
||||
// TODO: don't trigger on local screen unshare
|
||||
webrtc.on('videoRemoved', function(video,peer){ |
||||
playSound('leave.mp3'); |
||||
var id = (peer) ? peer.id : 'local'; |
||||
id = (video.id.match(/_screen_/)) ? id + '_screen' : id; |
||||
$("#peer_" + id).remove(); |
||||
if (mainVid === id){ |
||||
$('#mainVideo').html(''); |
||||
mainVid = false; |
||||
} |
||||
}); |
||||
|
||||
// Error sending something through dataChannel
|
||||
webrtc.on('cantsend', function (peer, message){ |
||||
if (message.type == 'textChat') { |
||||
var who = (peers[peer.id].hasName) ? peers[peer.id].displayName : 'one of the peers'; |
||||
$.notify(sprintf(locale.CANT_SEND_TO_s, who), 'error'); |
||||
} |
||||
}); |
||||
|
||||
// Handle Email Invitation
|
||||
$('#inviteEmail').submit(function(event) { |
||||
event.preventDefault(); |
||||
var rcpt = $('#recipient').val(); |
||||
// Simple email address verification
|
||||
if (!rcpt.match(/\S+@\S+\.\S+/)){ |
||||
$.notify(locale.ERROR_MAIL_INVALID, 'error'); |
||||
return; |
||||
} |
||||
$.ajax({ |
||||
data: { |
||||
action: 'invite', |
||||
recipient: rcpt, |
||||
room: roomName |
||||
}, |
||||
error: function(data) { |
||||
var msg = (data && data.msg) ? data.msg : locale.ERROR_OCCURED; |
||||
$.notify(msg, 'error'); |
||||
}, |
||||
success: function(data) { |
||||
$.notify(data.msg, 'success'); |
||||
$('#recipient').val(''); |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
// Set your DisplayName
|
||||
$('#displayName').on('input', function() { |
||||
// Enable chat input when you set your disaplay name
|
||||
if ($('#displayName').val() != '' && $('#chatBox').attr('disabled')){ |
||||
$('#chatBox').removeAttr('disabled'); |
||||
$('#chatBox').removeAttr('placeholder'); |
||||
peers.local.hasName = true; |
||||
} |
||||
// And disable it again if you remove your display name
|
||||
else if ($('#displayName').val() == ''){ |
||||
$('#chatBox').attr('disabled', true); |
||||
$('#chatBox').attr('placeholder', locale.SET_YOUR_NAME_TO_CHAT); |
||||
peers.local.hasName = false; |
||||
} |
||||
peers.local.displayName = stringEscape($('#displayName').val()); |
||||
updateDisplayName('local'); |
||||
webrtc.sendDirectlyToAll('vroom', 'setDisplayName', $('#displayName').val()); |
||||
}); |
||||
|
||||
// Handle room lock/unlock
|
||||
$('#lockButton').change(function() { |
||||
var action = ($(this).is(":checked")) ? 'lock':'unlock'; |
||||
$.ajax({ |
||||
data: { |
||||
action: action, |
||||
room: roomName |
||||
}, |
||||
error: function(data) { |
||||
var msg = (data && data.msg) ? data.msg : locale.ERROR_OCCURED; |
||||
$.notify(msg, 'error'); |
||||
}, |
||||
success: function(data) { |
||||
$.notify(data.msg, 'info'); |
||||
if (action === 'lock'){ |
||||
$("#lockLabel").addClass('btn-danger'); |
||||
webrtc.sendToAll('room_locked', {}); |
||||
} |
||||
else{ |
||||
$("#lockLabel").removeClass('btn-danger'); |
||||
webrtc.sendToAll('room_unlocked', {}); |
||||
} |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
// ScreenSharing
|
||||
$('#shareScreenButton').change(function() { |
||||
var action = ($(this).is(":checked")) ? 'share':'unshare'; |
||||
function cantShare(){ |
||||
$.notify(locale.CANT_SHARE_SCREEN, 'error'); |
||||
$('#shareScreenLabel').removeClass('active'); |
||||
return; |
||||
} |
||||
if (!peers.local.screenShared && action === 'share'){ |
||||
webrtc.shareScreen(function(err){ |
||||
if(err){ |
||||
cantShare(); |
||||
return; |
||||
} |
||||
else{ |
||||
$("#shareScreenLabel").addClass('btn-danger'); |
||||
peers.local.screenShared = true; |
||||
$.notify(locale.EVERYONE_CAN_SEE_YOUR_SCREEN, 'warn'); |
||||
} |
||||
}); |
||||
} |
||||
else { |
||||
webrtc.stopScreenShare(); |
||||
$("#shareScreenLabel").removeClass('btn-danger'); |
||||
$.notify(locale.SCREEN_UNSHARED, 'success'); |
||||
peers.local.screenShared = false; |
||||
} |
||||
}); |
||||
|
||||
// Handle microphone mute/unmute
|
||||
$('#muteMicButton').change(function() { |
||||
var action = ($(this).is(":checked")) ? 'mute':'unmute'; |
||||
if (action === 'mute'){ |
||||
webrtc.mute(); |
||||
peers.local.micMuted = true; |
||||
showVolume($('#localVolume'), -45); |
||||
$("#muteMicLabel").addClass('btn-danger'); |
||||
$.notify(locale.MIC_MUTED, 'info'); |
||||
} |
||||
else{ |
||||
webrtc.unmute(); |
||||
peers.local.micMuted = false; |
||||
$("#muteMicLabel").removeClass('btn-danger'); |
||||
$.notify(locale.MIC_UNMUTED, 'info'); |
||||
} |
||||
}); |
||||
|
||||
// Suspend the webcam
|
||||
$('#suspendCamButton').change(function() { |
||||
var action = ($(this).is(":checked")) ? 'pause':'resume'; |
||||
if (action === 'pause'){ |
||||
webrtc.pauseVideo(); |
||||
peers.local.videoPaused = true; |
||||
$("#suspendCamLabel").addClass('btn-danger'); |
||||
$.notify(locale.CAM_SUSPENDED, 'info'); |
||||
} |
||||
else{ |
||||
webrtc.resumeVideo(); |
||||
peers.local.videoPaused = false; |
||||
$("#suspendCamLabel").removeClass('btn-danger'); |
||||
$.notify(locale.CAM_RESUMED, 'info'); |
||||
} |
||||
}); |
||||
|
||||
// Choose another color. Useful if two peers have the same
|
||||
$('#changeColorButton').click(function(){ |
||||
peers.local.color = chooseColor(); |
||||
webrtc.sendToAll('peer_color', {color: peers.local.color}); |
||||
updateDisplayName('local'); |
||||
}); |
||||
|
||||
// Handle hangup/close window
|
||||
$('#logoutButton').click(function() { |
||||
hangupCall; |
||||
window.location.assign(goodbyUrl + '/' + roomName); |
||||
}); |
||||
window.onunload = window.onbeforeunload = hangupCall; |
||||
|
||||
// Go fullscreen on double click
|
||||
$("#webRTCVideoLocal").dblclick(function() { |
||||
this.requestFullScreen = this.webkitRequestFullScreen || this.mozRequestFullScreen; |
||||
this.requestFullScreen(); |
||||
}); |
||||
$("#webRTCVideoLocal").click(function() { |
||||
// If this video is already the main one, remove the main
|
||||
if ($(this).hasClass('selected')){ |
||||
$('#mainVideo').html(''); |
||||
$(this).removeClass('selected'); |
||||
mainVid = false; |
||||
} |
||||
// Else, update the main video to use this one
|
||||
else{ |
||||
$('#mainVideo').html($(this).clone().dblclick(function() { |
||||
this.requestFullScreen = this.webkitRequestFullScreen || this.mozRequestFullScreen; |
||||
this.requestFullScreen(); |
||||
}).css('max-height', $(window).height()-$('#toolbar').height()-25)); |
||||
$('.selected').removeClass('selected'); |
||||
$(this).addClass('selected'); |
||||
mainVid = 'self'; |
||||
} |
||||
}); |
||||
|
||||
// On click, remove the red label on the button
|
||||
$('#chatDropdown').click(function (){ |
||||
$('#chatDropdown').removeClass('btn-danger'); |
||||
}); |
||||
// The input is a textarea, trigger a submit
|
||||
// when the user hit enter, unless shift is pressed
|
||||
$('#chatForm').keypress(function(e) { |
||||
if (e.which == 13 && !e.shiftKey){ |
||||
// Do not add \n
|
||||
e.preventDefault(); |
||||
$(this).trigger('submit'); |
||||
} |
||||
}); |
||||
|
||||
// Adapt the chat input (textarea) size
|
||||
$('#chatBox').on('input', function(){ |
||||
var h = parseInt($(this).css('height')); |
||||
var mh = parseInt($(this).css('max-height')); |
||||
// Scrollbar, we need to add a row
|
||||
if ($(this).prop("scrollHeight") > $(this).prop('clientHeight') && h < mh){ |
||||
// Do a loop so that we can adapt to copy/pastes of several lines
|
||||
// But do not add more than 10 rows at a time
|
||||
for (var i = 0; $(this).prop("scrollHeight") > $(this).prop('clientHeight') && h < mh && i<10; i++){ |
||||
$(this).prop('rows', $(this).prop('rows')+1); |
||||
} |
||||
} |
||||
// Check if we have empty lines in our textarea
|
||||
// If we do, remove one row
|
||||
// TODO: we should only check for the last row and don't remove a row if we have empty lines in the middle
|
||||
else{ |
||||
lines = $('#chatBox').val().split(/\r?\n/); |
||||
for(var i=0; i<lines.length && $(this).prop('rows')>1; i++) { |
||||
var val = lines[i].replace(/^\s+|\s+$/, ''); |
||||
if (val.length == 0) { |
||||
$(this).prop('rows', $(this).prop('rows')-1); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
// Chat: send to other peers
|
||||
$('#chatForm').submit(function (e){ |
||||
e.preventDefault(); |
||||
if ($('#chatBox').val()) { |
||||
webrtc.sendDirectlyToAll('vroom', 'textChat', $('#chatBox').val()); |
||||
// Local echo of our own message
|
||||
newChatMessage('local',stringEscape($('#chatBox').val())); |
||||
// reset the input box
|
||||
$('#chatBox').val('').prop('rows', 1); |
||||
} |
||||
}); |
||||
|
||||
// Ping the room every minutes
|
||||
// Used to detect inactive rooms
|
||||
setInterval(function pingRoom(){ |
||||
$.ajax({ |
||||
data: { |
||||
action: 'ping', |
||||
room: roomName |
||||
}, |
||||
error: function(data) { |
||||
var msg = (data && data.msg) ? data.msg : locale.ERROR_OCCURED; |
||||
$.notify(msg, 'error'); |
||||
}, |
||||
success: function(data) { |
||||
// In case of success, only notify if the server replied something
|
||||
if (data.msg !== '') |
||||
$.notify(data.msg, 'success'); |
||||
} |
||||
}); |
||||
}, 60000); |
||||
|
||||
// Preview heigh is limited to the windows heigh, minus the navbar, minus 25px
|
||||
window.onresize = function (){ |
||||
$('#webRTCVideo').css('max-height', $(window).height()-$('#toolbar').height()-25); |
||||
$('#mainVideo>video').css('max-height', $(window).height()-$('#toolbar').height()-25); |
||||
}; |
||||
$('#webRTCVideo').css('max-height', $(window).height()-$('#toolbar').height()-25); |
||||
|
||||
}; |
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,384 @@ |
||||
#!/usr/bin/env perl |
||||
|
||||
# This file is part of the VROOM project |
||||
# released under the MIT licence |
||||
# Copyright 2014 Firewall Services |
||||
|
||||
|
||||
use lib '../lib'; |
||||
use Mojolicious::Lite; |
||||
use Mojolicious::Plugin::Mailer; |
||||
use Mojo::JSON; |
||||
use DBI; |
||||
use Data::GUID qw(guid_string); |
||||
use Digest::MD5 qw(md5_hex); |
||||
use MIME::Base64; |
||||
use Email::Sender::Transport::Sendmail; |
||||
|
||||
# Used to generate thanks on the about template |
||||
our $components = { |
||||
"SimpleWebRTC" => { |
||||
url => 'http://simplewebrtc.com/' |
||||
}, |
||||
"Mojolicious" => { |
||||
url => 'http://mojolicio.us/' |
||||
}, |
||||
"Jquery" => { |
||||
url => 'http://jquery.com/' |
||||
}, |
||||
"notify.js" => { |
||||
url => 'http://notifyjs.com/' |
||||
}, |
||||
"jquery-browser-plugin" => { |
||||
url => 'https://github.com/gabceb/jquery-browser-plugin' |
||||
}, |
||||
"sprintf.js" => { |
||||
url => 'http://hexmen.com/blog/2007/03/printf-sprintf/' |
||||
}, |
||||
"node.js" => { |
||||
url => 'http://nodejs.org/' |
||||
}, |
||||
"bootstrap" => { |
||||
url => 'http://getbootstrap.com/' |
||||
}, |
||||
"MariaDB" => { |
||||
url => 'https://mariadb.org/' |
||||
}, |
||||
"SignalMaster" => { |
||||
url => 'https://github.com/andyet/signalmaster/' |
||||
}, |
||||
"rfc5766-turn-server" => { |
||||
url => 'https://code.google.com/p/rfc5766-turn-server/' |
||||
} |
||||
}; |
||||
|
||||
app->log->level('info'); |
||||
our $config = plugin Config => {file => '../conf/vroom.conf'}; |
||||
app->log->level($config->{logLevel}); |
||||
|
||||
plugin I18N => { |
||||
namespace => 'Vroom::I18N', |
||||
support_url_langs => [qw(en fr)] |
||||
}; |
||||
|
||||
|
||||
plugin Mailer => { |
||||
from => $config->{emailFrom}, |
||||
transport => Email::Sender::Transport::Sendmail->new({ sendmail => $config->{sendmail}}), |
||||
}; |
||||
|
||||
helper db => sub { |
||||
my $dbh = DBI->connect($config->{dbi}, $config->{dbUser}, $config->{dbPassword}) || die "Could not connect"; |
||||
$dbh |
||||
}; |
||||
|
||||
helper login => sub { |
||||
my $self = shift; |
||||
return if $self->session('name'); |
||||
my $login = $ENV{'REMOTE_USER'} || lc guid_string(); |
||||
$self->session( name => $login, |
||||
ip => $self->tx->remote_address ); |
||||
$self->app->log->info($self->session('name') . " logged in from " . $self->tx->remote_address); |
||||
}; |
||||
|
||||
helper logout => sub { |
||||
my $self = shift; |
||||
$self->session( expires => 1); |
||||
$self->app->log->info($self->session('name') . " logged out"); |
||||
}; |
||||
|
||||
helper create_room => sub { |
||||
my $self = shift; |
||||
my ($name,$owner) = @_; |
||||
return undef if ( $self->get_room($name) || !$self->valid_room_name($name)); |
||||
my $sth = eval { $self->db->prepare("INSERT INTO rooms (name,create_timestamp,activity_timestamp,owner,token,realm) VALUES (?,?,?,?,?,?);") } || return undef; |
||||
my $tp = join '' => map{('a'..'z','A'..'Z','0'..'9')[rand 62]} 0..49; |
||||
$sth->execute($name,time(),time(),$owner,$tp,$config->{realm}) || return undef; |
||||
$self->app->log->info("room $name created by " . $self->session('name')); |
||||
return 1; |
||||
}; |
||||
|
||||
helper get_room => sub { |
||||
my $self = shift; |
||||
my ($name) = @_; |
||||
my $sth = eval { $self->db->prepare("SELECT * from rooms where name=?;") } || return undef; |
||||
$sth->execute($name) || return undef; |
||||
return $sth->fetchall_hashref('name')->{$name}; |
||||
}; |
||||
|
||||
helper lock_room => sub { |
||||
my $self = shift; |
||||
my ($name,$lock) = @_; |
||||
return undef unless ( %{ $self->get_room($name) }); |
||||
return undef unless ($lock =~ m/^0|1$/); |
||||
my $sth = eval { $self->db->prepare("UPDATE rooms SET locked=? where name=?;") } || return undef; |
||||
$sth->execute($lock,$name) || return undef; |
||||
my $action = ($lock eq '1') ? 'locked':'unlocked'; |
||||
$self->app->log->info("room $name $action by " . $self->session('name')); |
||||
return 1; |
||||
}; |
||||
|
||||
helper add_participant => sub { |
||||
my $self = shift; |
||||
my ($name,$participant) = @_; |
||||
my $room = $self->get_room($name) || return undef; |
||||
my $sth = eval { $self->db->prepare("INSERT IGNORE INTO participants (id,participant) VALUES (?,?);") } || return undef; |
||||
$sth->execute($room->{id},$participant) || return undef; |
||||
$self->app->log->info($self->session('name') . " joined the room $name"); |
||||
return 1; |
||||
}; |
||||
|
||||
helper remove_participant => sub { |
||||
my $self = shift; |
||||
my ($name,$participant) = @_; |
||||
my $room = $self->get_room($name) || return undef; |
||||
my $sth = eval { $self->db->prepare("DELETE FROM participants WHERE id=? AND participant=?;") } || return undef; |
||||
$sth->execute($room->{id},$participant) || return undef; |
||||
$self->app->log->info($self->session('name') . " leaved the room $name"); |
||||
return 1; |
||||
}; |
||||
|
||||
helper get_participants => sub { |
||||
my $self = shift; |
||||
my ($name) = @_; |
||||
my $room = $self->get_room($name) || return undef; |
||||
my $sth = eval { $self->db->prepare("SELECT participant FROM participants WHERE id=?;") } || return undef; |
||||
$sth->execute($room->{id}) || return undef; |
||||
my @res; |
||||
while(my @row = $sth->fetchrow_array){ |
||||
push @res, $row[0]; |
||||
} |
||||
return @res; |
||||
}; |
||||
|
||||
helper has_joined => sub { |
||||
my $self = shift; |
||||
my ($session,$name) = @_; |
||||
my $ret = 0; |
||||
my $sth = eval { $self->db->prepare("SELECT * FROM rooms WHERE name=? AND id IN (SELECT id FROM participants WHERE participant=?)") } || return undef; |
||||
$sth->execute($name,$session) || return undef; |
||||
$ret = 1 if ($sth->rows > 0); |
||||
return $ret; |
||||
}; |
||||
|
||||
helper delete_rooms => sub { |
||||
my $self = shift; |
||||
$self->app->log->debug('Removing unused rooms'); |
||||
eval { |
||||
my $timeout = time()-$config->{inactivityTimeout}; |
||||
$self->db->do("DELETE FROM participants WHERE id IN (SELECT id FROM rooms WHERE activity_timestamp < $timeout AND persistent='0');"); |
||||
$self->db->do("DELETE FROM rooms WHERE activity_timestamp < $timeout AND persistent='0';"); |
||||
} || return undef; |
||||
return 1; |
||||
}; |
||||
|
||||
helper ping_room => sub { |
||||
my $self = shift; |
||||
my ($name) = @_; |
||||
return undef unless ( %{ $self->get_room($name) }); |
||||
my $sth = eval { $self->db->prepare("UPDATE rooms SET activity_timestamp=? where name=?;") } || return undef; |
||||
$sth->execute(time(),$name) || return undef; |
||||
$self->app->log->debug($self->session('name') . " pinged the room $name"); |
||||
return 1; |
||||
}; |
||||
|
||||
# Check if this name is a valid room name |
||||
# TODO: reject if the name is the same as an existing route |
||||
helper valid_room_name => sub { |
||||
my $self = shift; |
||||
my ($name) = @_; |
||||
my $ret = undef; |
||||
my $len = length $name; |
||||
if ($len > 0 && $len < 50 && $name =~ m/^[\w\-]+$/){ |
||||
$ret = 1; |
||||
} |
||||
return $ret; |
||||
}; |
||||
|
||||
any '/' => 'index'; |
||||
|
||||
get '/about' => sub { |
||||
my $self = shift; |
||||
$self->stash( components => $components ); |
||||
} => 'about'; |
||||
|
||||
get '/help' => 'help'; |
||||
|
||||
get '/goodby/(:room)' => sub { |
||||
my $self = shift; |
||||
my $room = $self->stash('room'); |
||||
$self->remove_participant($room,$self->session('name')); |
||||
$self->logout; |
||||
} => 'goodby'; |
||||
|
||||
# This handler creates a new room |
||||
post '/create' => sub { |
||||
my $self = shift; |
||||
$self->res->headers->cache_control('max-age=1, no-cache'); |
||||
my $name = $self->param('roomName') || lc guid_string(); |
||||
$self->login; |
||||
unless ($self->valid_room_name($name)){ |
||||
$self->stash(msg => $self->l('ERROR_NAME_INVALID')); |
||||
return $self->render('error'); |
||||
} |
||||
if ($self->create_room($name,$self->session('name'))){ |
||||
$self->redirect_to('/'.$name); |
||||
} |
||||
else{ |
||||
$self->stash(msg => $self->l('ERROR_NAME_CONFLICT')); |
||||
$self->render('error'); |
||||
} |
||||
}; |
||||
|
||||
# Translation for JS resources |
||||
# As there's no way to list all the available translated strings |
||||
# JS sends us the list it wants as a JSON object |
||||
# and we sent it back once localized |
||||
post '/localize' => sub { |
||||
my $self = shift; |
||||
my $strings = Mojo::JSON->new->decode($self->param('strings')); |
||||
foreach my $string (keys %$strings){ |
||||
$strings->{$string} = $self->l($string); |
||||
} |
||||
return $self->render(json => $strings); |
||||
}; |
||||
|
||||
get '/(*room)' => sub { |
||||
my $self = shift; |
||||
my $room = $self->stash('room'); |
||||
$self->delete_rooms; |
||||
# Not auth yet, probably a guest |
||||
$self->login; |
||||
unless ($self->valid_room_name($room)){ |
||||
$self->stash(msg => 'ERROR_NAME_INVALID'); |
||||
return $self->render('error'); |
||||
} |
||||
my $data = $self->get_room($room); |
||||
unless ($data){ |
||||
$self->stash(msg => sprintf ($self->l("ERROR_ROOM_s_DOESNT_EXIST"), $room)); |
||||
return $self->render('error'); |
||||
} |
||||
$self->cookie(vroomsession => encode_base64($self->session('name') . ':' . $data->{name} . ':' . $data->{token}, ''), {expires => time + 60}); |
||||
my @participants = $self->get_participants($room); |
||||
if ($data->{'locked'}){ |
||||
unless (($self->session('name') eq $data->{'owner'}) || (grep { $_ eq $self->session('name') } @participants )){ |
||||
$self->stash(msg => sprintf($self->l("ERROR_ROOM_s_LOCKED"), $room)); |
||||
return $self->render('error'); |
||||
} |
||||
} |
||||
# Add this user to the participants table |
||||
unless($self->add_participant($room,$self->session('name'))){ |
||||
$self->stash(msg => $self->l('ERROR_OCCURED')); |
||||
return $self->render('error'); |
||||
} |
||||
$self->stash(locked => $data->{locked} ? 'checked':'', |
||||
turnPassword => $data->{token}); |
||||
$self->render('join'); |
||||
}; |
||||
|
||||
post '/action' => sub { |
||||
my $self = shift; |
||||
my $action = $self->param('action'); |
||||
my $room = $self->param('room') || ""; |
||||
if (!$self->session('name') || !$self->has_joined($self->session('name'), $room)){ |
||||
return $self->render( |
||||
json => { |
||||
msg => $self->l('ERROR_NOT_LOGGED_IN'), |
||||
}, |
||||
status => 403 |
||||
); |
||||
} |
||||
$self->stash(room => $room); |
||||
return $self->render( |
||||
json => { |
||||
msg => sprintf ($self->l("ERROR_ROOM_s_DOESNT_EXIST"), $room) |
||||
}, |
||||
status => '500' |
||||
) unless ($self->get_room($room)); |
||||
|
||||
if ($action eq 'invite'){ |
||||
my $rcpt = $self->param('recipient'); |
||||
$self->email( |
||||
header => [ |
||||
Subject => sprintf ($self->l("JOIN_US_ON_s"), $room), |
||||
To => $rcpt |
||||
], |
||||
data => [ |
||||
template => 'invite', |
||||
room => $room |
||||
], |
||||
) || |
||||
return $self->render( |
||||
json => { |
||||
msg => $self->l('ERROR_OCCURED'), |
||||
}, |
||||
status => 500 |
||||
); |
||||
$self->app->log->info($self->session('name') . " sent an invitation for room $room to $rcpt"); |
||||
$self->render( |
||||
json => { |
||||
msg => sprintf($self->l('INVITE_SENT_TO_s'), $rcpt) |
||||
} |
||||
); |
||||
} |
||||
if ($action =~ m/(un)?lock/){ |
||||
my ($lock,$success); |
||||
if ($action eq 'lock'){ |
||||
$lock = 1; |
||||
$success = $self->l('ROOM_LOCKED'); |
||||
} |
||||
else{ |
||||
$lock = 0; |
||||
$success = $self->l('ROOM_UNLOCKED'); |
||||
} |
||||
my $room = $self->param('room'); |
||||
my $res = $self->lock_room($room,$lock); |
||||
unless ($res){ |
||||
return $self->render( |
||||
json => { |
||||
msg => $self->l('ERROR_OCCURED'), |
||||
}, |
||||
status => '500' |
||||
); |
||||
} |
||||
return $self->render( |
||||
json => { |
||||
msg => $success, |
||||
} |
||||
); |
||||
} |
||||
elsif ($action eq 'ping'){ |
||||
my $res = $self->ping_room($room); |
||||
# Cleanup expired rooms every ~10 pings |
||||
if ((int (rand 100)) <= 10){ |
||||
$self->delete_rooms; |
||||
} |
||||
if (!$res){ |
||||
return $self->render( |
||||
json => { |
||||
msg => $self->l('ERROR_OCCURED'), |
||||
}, |
||||
status => '500' |
||||
); |
||||
} |
||||
else{ |
||||
return $self->render( |
||||
json => { |
||||
msg => '', |
||||
} |
||||
); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
# Not found (404) |
||||
get '/missing' => sub { shift->render('does_not_exist') }; |
||||
# Exception (500) |
||||
get '/dies' => sub { die 'Intentional error' }; |
||||
|
||||
push @{app->renderer->paths}, '../templates/'.$config->{template}; |
||||
app->secret($config->{secret}); |
||||
app->sessions->secure(1); |
||||
app->sessions->cookie_name('vroom'); |
||||
app->start; |
||||
|
||||
@ -0,0 +1,20 @@ |
||||
Written by Henrik Joreteg. |
||||
Copyright © 2013 by &yet, LLC. |
||||
Released under the terms of the MIT License: |
||||
|
||||
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 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. |
||||
@ -0,0 +1,10 @@ |
||||
# signalmaster |
||||
|
||||
A simple signaling server for clients to connect and do signaling for WebRTC. |
||||
|
||||
Specifically created as a default connection point for [SimpleWebRTC.js](https://github.com/HenrikJoreteg/SimpleWebRTC) |
||||
|
||||
Read more: |
||||
- [Introducing SimpleWebRTC and conversat.io](http://blog.andyet.com/2013/feb/22/introducing-simplewebrtcjs-and-conversatio/) |
||||
- [SimpleWebRTC.com](http://simplewebrtc.com) |
||||
- [conversat.io](http://conversat.io) |
||||
@ -0,0 +1,12 @@ |
||||
{ |
||||
"isDev": false, |
||||
"server": { |
||||
"port": 8888 |
||||
}, |
||||
"mysql": { |
||||
"server": "localhost", |
||||
"database": "vroom", |
||||
"user": "vroom", |
||||
"password": "vroom" |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
{ |
||||
"name": "signal-master", |
||||
"version": "0.0.1", |
||||
"repository": { |
||||
"type": "git", |
||||
"url": "git@github.com:andyet/signal-master.git" |
||||
}, |
||||
"description": "Mind-meldification for teams", |
||||
"dependencies": { |
||||
"async": "0.1.9", |
||||
"node-uuid": "1.2.0", |
||||
"redis": "", |
||||
"underscore": "", |
||||
"precommit-hook": "", |
||||
"getconfig": "", |
||||
"socket.io": "", |
||||
"mysql":"", |
||||
"cookie":"" |
||||
}, |
||||
"main": "server.js" |
||||
} |
||||
@ -0,0 +1,145 @@ |
||||
/*global console*/ |
||||
var config = require('getconfig'), |
||||
uuid = require('node-uuid'), |
||||
mysql = require('mysql'), |
||||
cookie_reader = require('cookie'), |
||||
io = require('socket.io').listen(config.server.port); |
||||
|
||||
var sql = mysql.createConnection({ |
||||
host : config.mysql.server, |
||||
database : config.mysql.database, |
||||
user : config.mysql.user, |
||||
password : config.mysql.password}); |
||||
|
||||
function describeRoom(name) { |
||||
var clients = io.sockets.clients(name); |
||||
var result = { |
||||
clients: {} |
||||
}; |
||||
clients.forEach(function (client) { |
||||
result.clients[client.id] = client.resources; |
||||
}); |
||||
return result; |
||||
} |
||||
|
||||
function safeCb(cb) { |
||||
if (typeof cb === 'function') { |
||||
return cb; |
||||
} else { |
||||
return function () {}; |
||||
} |
||||
} |
||||
|
||||
function checkRoom(room,token,user) { |
||||
var q = "SELECT participant FROM participants WHERE participant='" + user + "' AND id IN (SELECT id FROM rooms WHERE name='" + room + "' AND token='" + token + "');"; |
||||
console.log('Checking if ' + user + ' is allowed to join room ' + room + ' using token ' + token); |
||||
sql.query(q, function(err, rows, fields) { |
||||
if (err) throw err; |
||||
// No result ? This user hasn't joined this room through our frontend
|
||||
if (rows.length < 1) return false; |
||||
}); |
||||
return true; |
||||
} |
||||
|
||||
io.configure(function(){ |
||||
io.set('authorization', function(data, accept){ |
||||
if(data.headers.cookie){ |
||||
data.cookie = cookie_reader.parse(data.headers.cookie); |
||||
var session = data.cookie['vroomsession']; |
||||
if (typeof session != 'string'){ |
||||
console.log('Cookie vrommsession not found, access unauthorized'); |
||||
return ('error', false); |
||||
} |
||||
// vroomsession is base64(user:room:token) so let's decode this !
|
||||
session = new Buffer(session, encoding='base64'); |
||||
var tab = session.toString().split(':'); |
||||
var user = tab[0], |
||||
room = tab[1], |
||||
token = tab[2]; |
||||
// sanitize user input, we don't want to pass random junk to MySQL do we ?
|
||||
if (!user.match(/^[\w\@\.\-]{1,40}$/i) || !room.match(/^[\w\-]{1,50}$/) || !token.match(/^[a-zA-Z0-9]{50}$/)){ |
||||
console.log('Forbidden chars found in either participant session, room name or token, sorry, cannot allow this'); |
||||
return ('error', false); |
||||
} |
||||
// Ok, now check if this user has joined the room (with the correct token) through vroom frontend
|
||||
if (checkRoom(room,token,user) == false){ |
||||
console.log('Sorry, but ' + participant + ' is not allowed to join room ' + name); |
||||
return ('error', false); |
||||
} |
||||
return accept(null, true); |
||||
} |
||||
console.log('No cookies were found, access unauthorized'); |
||||
return accept('error', false); |
||||
}); |
||||
}); |
||||
|
||||
io.sockets.on('connection', function (client) { |
||||
client.resources = { |
||||
screen: false, |
||||
video: true, |
||||
audio: false |
||||
}; |
||||
|
||||
// pass a message to another id
|
||||
client.on('message', function (details) { |
||||
var otherClient = io.sockets.sockets[details.to]; |
||||
if (!otherClient) return; |
||||
details.from = client.id; |
||||
otherClient.emit('message', details); |
||||
}); |
||||
|
||||
client.on('shareScreen', function () { |
||||
client.resources.screen = true; |
||||
}); |
||||
|
||||
client.on('unshareScreen', function (type) { |
||||
client.resources.screen = false; |
||||
if (client.room) removeFeed('screen'); |
||||
}); |
||||
|
||||
client.on('join', join); |
||||
|
||||
function removeFeed(type) { |
||||
io.sockets.in(client.room).emit('remove', { |
||||
id: client.id, |
||||
type: type |
||||
}); |
||||
} |
||||
|
||||
function join(name, cb) { |
||||
// sanity check
|
||||
if (typeof name !== 'string') return; |
||||
// leave any existing rooms
|
||||
if (client.room) removeFeed(); |
||||
safeCb(cb)(null, describeRoom(name)) |
||||
client.join(name); |
||||
client.room = name; |
||||
} |
||||
|
||||
// we don't want to pass "leave" directly because the
|
||||
// event type string of "socket end" gets passed too.
|
||||
client.on('disconnect', function () { |
||||
removeFeed(); |
||||
}); |
||||
client.on('leave', removeFeed); |
||||
|
||||
client.on('create', function (name, cb) { |
||||
if (arguments.length == 2) { |
||||
cb = (typeof cb == 'function') ? cb : function () {}; |
||||
name = name || uuid(); |
||||
} else { |
||||
cb = name; |
||||
name = uuid(); |
||||
} |
||||
// check if exists
|
||||
if (io.sockets.clients(name).length) { |
||||
safeCb(cb)('taken'); |
||||
} else { |
||||
join(name); |
||||
safeCb(cb)(null, name); |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
if (config.uid) process.setuid(config.uid); |
||||
console.log('signal master is running at: http://localhost:' + config.server.port); |
||||
@ -0,0 +1,41 @@ |
||||
% title $self->l('About'); |
||||
%= include 'header' |
||||
%= include 'public_toolbar' |
||||
<div class="container-fluid"> |
||||
<div class="row"> |
||||
<div class="col-md-12 column"> |
||||
<h3> |
||||
<%=l 'ABOUT' %> |
||||
</h3> |
||||
<p> |
||||
<%==l 'ABOUT_VROOM' %> |
||||
</p> |
||||
<h3> |
||||
<%=l 'HOW_IT_WORKS' %> |
||||
</h3> |
||||
<p> |
||||
<%==l 'ABOUT_HOW_IT_WORKS' %> |
||||
</p> |
||||
<h3> |
||||
<%=l 'SERVERLESS' %> |
||||
</h3> |
||||
<p> |
||||
<%==l 'ABOUT_SERVERLESS' %> |
||||
</p> |
||||
<h3> |
||||
<%=l 'THANKS' %> |
||||
</h3> |
||||
<p> |
||||
<%==l 'ABOUT_THANKS' %> |
||||
<ul> |
||||
<% foreach my $component (sort keys %{$components}) { %> |
||||
<li> |
||||
<a href="<%= $components->{$component}->{url} %>"><%= $component %></a> |
||||
</li> |
||||
<% } %> |
||||
</ul> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
%= include 'footer' |
||||
@ -0,0 +1,4 @@ |
||||
% title $self->l('Administration'); |
||||
%= include 'header' |
||||
|
||||
%=include 'footer' |
||||
@ -0,0 +1,11 @@ |
||||
% title $self->l('OOOPS'); |
||||
%= include 'header' |
||||
%= include 'public_toolbar' |
||||
<div class="container-fluid"> |
||||
<div class="jumbotron alert-danger"> |
||||
<h1><%=l 'ERROR_OCCURED' %></h1> |
||||
<p><%=l "$msg" %></p> |
||||
<p><a class="btn btn-primary btn-lg" role="button" href="<%= $self->url_for('/') %>"><%=l 'BACK_TO_MAIN_MENU' %></a></p> |
||||
</div> |
||||
</div> |
||||
%= include 'footer' |
||||
@ -0,0 +1,4 @@ |
||||
<div id="footer"> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,12 @@ |
||||
% title $self->l('GOODBY'); |
||||
%= include 'header' |
||||
%= include 'public_toolbar' |
||||
<div class="container-fluid"> |
||||
<br/> |
||||
<div class="jumbotron"> |
||||
<h1><%=l 'THANKS_SEE_YOU_SOON' %></h1> |
||||
<p><%=l 'THANKS_FOR_USING' %></p> |
||||
<p><a class="btn btn-primary btn-lg" role="button" href="<%= $self->url_for('/') %>"><%=l 'BACK_TO_MAIN_MENU' %></a></p> |
||||
</div> |
||||
</div> |
||||
%=include 'footer' |
||||
@ -0,0 +1,10 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title><%= $title %></title> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/> |
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"> |
||||
<link href="/css/vroom.css" rel="stylesheet" type="text/css"> |
||||
<link rel="icon" type="image/png" href="/img/favicon.png" /> |
||||
</head> |
||||
<body> |
||||
@ -0,0 +1,21 @@ |
||||
% title $self->l('Help'); |
||||
%= include 'header' |
||||
%= include 'public_toolbar' |
||||
<div class="container-fluid"> |
||||
<div class="row clearfix"> |
||||
<div class="col-md-12 column"> |
||||
<h3> |
||||
<%=l 'SUPPORTED_BROWSERS' %> |
||||
</h3> |
||||
<p> |
||||
<%=l 'HELP_BROWSERS_SUPPORTED' %> |
||||
</p> |
||||
<h3> |
||||
<%=l 'SREEN_SHARING' %> |
||||
</h3> |
||||
<p> |
||||
<%==l 'HELP_SCREEN_SHARING' %> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,71 @@ |
||||
% title $self->l('WELCOME'); |
||||
%= include 'header' |
||||
%= include 'public_toolbar' |
||||
|
||||
<div class="container-fluid"> |
||||
|
||||
<div class="well" id="createRoomContainer"> |
||||
<form id="createRoom" class="form-inline" action="<%=url_for('/create')%>" method="post"> |
||||
<fieldset> |
||||
<legend><center><%=l 'CREATE_ROOM' %></center></legend> |
||||
<div class="control-group"> |
||||
<div class="input-group"> |
||||
<input id="roomName" name="roomName" type="text" placeholder="<%=l 'ROOM_NAME' %>" class="form-control help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'RANDOM_IF_EMPTY' %>" autofocus> |
||||
<span class="input-group-btn"> |
||||
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-log-in"></span></button> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</fieldset> |
||||
</form> |
||||
</div> |
||||
<br/><br/> |
||||
<div class="row"> |
||||
<div class="col-sm-12 col-md-4"> |
||||
<div class="thumbnail"> |
||||
<div> |
||||
<center> |
||||
<img src="/img/lock.png" alt="Secure"> |
||||
</center> |
||||
</div> |
||||
<div class="caption"> |
||||
<h3><center><%=l 'SECURE' %></center></h3> |
||||
<p><%=l "P2P_COMMUNICATION" %></p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="col-sm-12 col-md-4"> |
||||
<div class="thumbnail"> |
||||
<div> |
||||
<center> |
||||
<img src="/img/firefox.png" alt="Firefox"> |
||||
<img src="/img/chrome.png" alt="Chrome"> |
||||
<img src="/img/opera.png" alt="Opera"> |
||||
</center> |
||||
</div> |
||||
<div class="caption"> |
||||
<h3><center><%=l 'WORKS_EVERYWHERE' %></center></h3> |
||||
<p><%=l "MODERN_BROWSERS" %></p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="col-sm-12 col-md-4"> |
||||
<div class="thumbnail"> |
||||
<div> |
||||
<center> |
||||
<img src="/img/share.png" alt="Peer to peer"> |
||||
</center> |
||||
</div> |
||||
<div class="caption"> |
||||
<h3><center><%=l 'MULTI_USER' %></center></h3> |
||||
<p><%=l "THE_LIMIT_IS_YOUR_PIPE" %></p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<script type="text/javascript" src="/js/jquery-1.11.0.js"></script> |
||||
<script type="text/javascript" src="/js/bootstrap.min.js"></script> |
||||
<script type="text/javascript" src="/js/notify-combined.min.js"></script> |
||||
<script type="text/javascript" src="/js/vroom.js"></script> |
||||
%= include 'footer' |
||||
@ -0,0 +1,14 @@ |
||||
<html> |
||||
<p> |
||||
<%== sprintf($self->l('TO_JOIN_s_CLICK_s'), $room, $self->url_for('/')->to_abs.$room) %> |
||||
</p> |
||||
<br> |
||||
<p> |
||||
<%=l 'HAVE_A_NICE_MEETING' %> |
||||
</p> |
||||
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;"> |
||||
— |
||||
<br> |
||||
<%=l 'EMAIL_SIGN' %> |
||||
</p> |
||||
</html> |
||||
@ -0,0 +1,144 @@ |
||||
% title sprintf l('ROOM_s'), $room; |
||||
%= include 'header' |
||||
<div id="wrap" class="container-fluid"> |
||||
<nav id="toolbar" class="navbar navbar-default" role="toolbar"> |
||||
<div class="navbar-header"> |
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#toolBar"> |
||||
<span class="sr-only"></span> |
||||
<span class="icon-bar"></span> |
||||
<span class="icon-bar"></span> |
||||
<span class="icon-bar"></span> |
||||
</button> |
||||
</div> |
||||
<input id="roomName" name="roomName" type="hidden" value="<%= $room %>"/> |
||||
<div id="toolBar" class="collapse navbar-collapse"> |
||||
<form class="navbar-form navbar-left input-group" id="inviteEmail" action="" method="post"> |
||||
<div class="input-group"> |
||||
<input type="email" id="recipient" class="form-control help" placeholder="<%=l 'EMAIL_INVITE' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_INVITE' %>"/> |
||||
<span class="input-group-btn"> |
||||
<button id="inviteEmailButton" type="submit" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_INVITE' %>"> |
||||
<span class="glyphicon glyphicon-send"> |
||||
</span> |
||||
</button> |
||||
</span> |
||||
</div> |
||||
</form> |
||||
<div class="btn-group navbar-form navbar-left"> |
||||
<input type="text" id="displayName" class="form-control help" placeholder="<%=l 'YOUR_NAME' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'NAME_SENT_TO_OTHERS' %>"/> |
||||
</div> |
||||
<div class="btn-group navbar-form navbar-left"> |
||||
<button id="changeColorButton" class="form-control collapsed help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CHANGE_COLOR' %>"> |
||||
<span class="glyphicon glyphicon-tag"> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
<div class="btn-group navbar-form navbar-left"> |
||||
<button id="chatDropdown" class="form-control collapsed help" data-toggle="collapse" data-target="#chatMenu" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CLICK_TO_CHAT' %>"> |
||||
<span class="glyphicon glyphicon-envelope"> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
<div class="btn-group navbar-form navbar-left" data-toggle="buttons"> |
||||
<label class="btn btn-default<%= $locked eq 'checked' ? ' btn-danger active':'' %> help" id="lockLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PREVENT_TO_JOIN' %>"> |
||||
<input type="checkbox" id="lockButton" <%= $locked %>> |
||||
<span class="glyphicon glyphicon-lock"> |
||||
</span> |
||||
</label> |
||||
</div> |
||||
<div class="btn-group navbar-form navbar-left" data-toggle="buttons" > |
||||
<label class="btn btn-default help" id="muteMicLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'MUTE_MIC' %>"> |
||||
<input type="checkbox" id="muteMicButton"> |
||||
<span class="glyphicon glyphicon-volume-off"> |
||||
</span> |
||||
</label> |
||||
<label class="btn btn-default help" id="suspendCamLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SUSPEND_CAM' %>"> |
||||
<input type="checkbox" id="suspendCamButton"> |
||||
<span class="glyphicon glyphicon-facetime-video"> |
||||
</span> |
||||
</label> |
||||
<label class="btn btn-default help" id="shareScreenLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SHARE_YOUR_SCREEN' %>"> |
||||
<input type="checkbox" id="shareScreenButton"> |
||||
<span class="glyphicon glyphicon-share"> |
||||
</span> |
||||
</label> |
||||
</div> |
||||
<div class="btn-group navbar-form navbar-right" data-toggle="buttons" > |
||||
<button class="btn btn-default help" id="logoutButton" data-toggle="tooltip" data-placement="bottom" title="<%=l 'LOGOUT' %>"> |
||||
<span class="glyphicon glyphicon-log-out"> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</nav> |
||||
<div class="frame"> |
||||
<div id="chatMenu" class="nav-collapse collapse"> |
||||
<div id="chatHistory" class="form-control"> |
||||
</div> |
||||
<form role="form" id="chatForm"> |
||||
<div class="input-group"> |
||||
<textarea class="form-control" id="chatBox" form_id="chatForm" placeholder="<%=l 'SET_YOUR_NAME_TO_CHAT' %>" rows=1 disabled></textarea> |
||||
<span class="input-group-btn"> |
||||
<button type="submit" class="btn btn-default"> |
||||
<span class="glyphicon glyphicon-share-alt"> |
||||
</span> |
||||
</button> |
||||
</span> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<div id="view" class="view row-fluid"> |
||||
<div id="webRTCVideo" class="col-xs-4"> |
||||
<div class="col-md-6 previewContainer"> |
||||
<video id="webRTCVideoLocal" class="webRTCVideo" muted oncontextmenu="return false;"> |
||||
</video> |
||||
<div id="localVolume" class="volumeBar"> |
||||
</div> |
||||
<div id="name_local" class="displayName"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div id="mainVideo" class="col-xs-8"> |
||||
<div> |
||||
</div> |
||||
</div> |
||||
<script type="text/javascript" src="/js/simplewebrtc.bundle.js"></script> |
||||
<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script> |
||||
<script type="text/javascript" src="/js/bootstrap.min.js"></script> |
||||
<script type="text/javascript" src="/js/notify-combined.min.js"></script> |
||||
<script type="text/javascript" src="/js/jquery.browser.min.js"></script> |
||||
<script type="text/javascript" src="/js/sprintf.js"></script> |
||||
<script type="text/javascript" src="/js/vroom.js"></script> |
||||
<script> |
||||
var actionUrl = '<%= $self->url_for('/action') %>'; |
||||
var goodbyUrl = '<%= $self->url_for('/goodby') %>'; |
||||
var roomName = '<%= $room %>'; |
||||
$( document ).ready(function() { |
||||
webrtc = new SimpleWebRTC({ |
||||
url: "<%= $config->{signalingServer} %>", |
||||
peerConnectionConfig: { |
||||
iceServers: [ |
||||
{"url":"stun:<%= $config->{stunServer} %>"}, |
||||
<%== ($config->{turnServer} && $config->{turnServer} ne '') ? "{\"url\":\"turn:$config->{turnServer}\", \"username\":\"$room\", \"credential\":\"$turnPassword\"}":'' %> |
||||
] |
||||
}, |
||||
localVideoEl: 'webRTCVideoLocal', |
||||
autoRequestMedia: true, |
||||
enableDataChannels: true, |
||||
debug: true, |
||||
detectSpeakingEvents: false, |
||||
adjustPeerVolume: false, |
||||
autoAdjustMic: false, |
||||
media: { |
||||
video: { |
||||
mandatory: { |
||||
maxFrameRate: 15, |
||||
} |
||||
}, |
||||
audio: true |
||||
} |
||||
}); |
||||
initVroom(roomName); |
||||
}); |
||||
</script> |
||||
</div> |
||||
%= include 'footer' |
||||
@ -0,0 +1,24 @@ |
||||
<nav class="navbar navbar-default" role="navigation"> |
||||
<div class="container-fluid"> |
||||
<div class="navbar-header"> |
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#toolBar"> |
||||
<span class="sr-only"></span> |
||||
<span class="glyphicon glyphicon-th"></span> |
||||
</button> |
||||
<a class="navbar-brand" href="#">VROOM! Alpha</a> |
||||
</div> |
||||
<div class="collapse navbar-collapse" id="toolBar"> |
||||
<ul class="nav navbar-nav navbar-right"> |
||||
<li> |
||||
<a href="<%= $self->url_for('/') %>"><%=l 'HOME' %></a> |
||||
</li> |
||||
<li> |
||||
<a href="<%= $self->url_for('/help') %>"><%=l 'HELP' %></a> |
||||
</li> |
||||
<li> |
||||
<a href="<%= $self->url_for('/about') %>"><%=l 'ABOUT' %></a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</nav> |
||||
Loading…
Reference in new issue