mirror of https://github.com/dani/vroom.git
Video conf based on SimpleWebRTC https://vroom.fws.fr/documentation
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
381 lines
18 KiB
381 lines
18 KiB
% title sprintf l('ROOM_s'), $room;
|
|
%= include 'header'
|
|
<div 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="#roomToolBar">
|
|
<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="roomToolBar" class="collapse navbar-collapse">
|
|
<div class="navbar-form navbar-left input-group">
|
|
<div class="input-group">
|
|
<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' %>"/>
|
|
<span class="input-group-btn">
|
|
<button id="changeColorButton" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CHANGE_COLOR' %>">
|
|
<span class="glyphicon glyphicon-tag">
|
|
</span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group navbar-form navbar-left">
|
|
<button id="chatDropdown" class="btn btn-default collapsed help" data-toggle="collapse" data-target="#chatMenu" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CLICK_TO_CHAT' %>">
|
|
<span class="glyphicon glyphicon-comment">
|
|
</span>
|
|
<span class="badge" id="unreadMsg">
|
|
0
|
|
</span>
|
|
</button>
|
|
</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-eye-close">
|
|
</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-expand">
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div id="inviteDropdownContainer" class="navbar-form navbar-left input-group">
|
|
<button class="btn btn-default dropdown-toggle help ownerEl" type="button" id="inviteMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'INVITE_PEOPLE' %>">
|
|
<span class="glyphicon glyphicon-user"></span>
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="inviteMenuButton" id="inviteMenu">
|
|
<li>
|
|
<center>
|
|
<p><%=l 'TO_INVITE_SHARE_THIS_URL' %></p>
|
|
<% my $url = $self->url_for('/')->to_abs;
|
|
$url .= ($url =~ m/\/$/) ? '':'/';
|
|
%>
|
|
<h4><a href="javascript:void(0)" onclick="inviteUrlPopup();"><%= $url . $room %></a></h4>
|
|
</center>
|
|
</li>
|
|
<li class="divider"></li>
|
|
<li>
|
|
<form class="navbar-form" id="inviteEmail" action="" method="post">
|
|
<center>
|
|
<p><%=l 'YOU_CAN_INVITE_BY_MAIL' %></p>
|
|
</center>
|
|
<div class="input-group">
|
|
<input type="email" id="recipient" class="form-control help" placeholder="<%=l 'EMAIL_PLACEHOLDER' %>" 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>
|
|
<div class="input-group">
|
|
<textarea id="message" name="message" class="form-control help" placeholder="<%=l 'MESSAGE' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_CUSTOM_MESSAGE' %>"></textarea>
|
|
<span class="input-group-addon">
|
|
<span class="glyphicon glyphicon-envelope">
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group navbar-form navbar-left">
|
|
<button class="btn btn-default dropdown-toggle help ownerEl" type="button" id="confMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CONFIGURE' %>">
|
|
<span class="glyphicon glyphicon-wrench"></span>
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="confMenuButton" id="confMenu">
|
|
<li>
|
|
<center>
|
|
<div class="navbar-form">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-default help" id="lockLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PREVENT_TO_JOIN' %>">
|
|
<input type="checkbox" id="lockButton">
|
|
<span class="glyphicon glyphicon-lock">
|
|
</span>
|
|
</label>
|
|
<label class="btn btn-default help" id="askForNameLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'FORCE_DISPLAY_NAME' %>">
|
|
<input type="checkbox" id="askForNameButton">
|
|
<span class="glyphicon glyphicon-leaf">
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</center>
|
|
</li>
|
|
<li class="divider"></li>
|
|
<li>
|
|
<form class="navbar-form" id="joinPassForm">
|
|
<center>
|
|
<p><%=l 'YOU_CAN_PASSWORD_PROTECT_JOIN' %></p>
|
|
</center>
|
|
<div class="input-group">
|
|
<input type="password" id="joinPass" class="form-control help" placeholder="<%=l 'PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PASSWORD_PROTECT' %>"/>
|
|
<span class="input-group-btn">
|
|
<button id="setJoinPassButton" type="submit" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PASSWORD_PROTECT' %>">
|
|
<span class="glyphicon glyphicon-ok">
|
|
</span>
|
|
</button>
|
|
<button id="removeJoinPassButton" type="button" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'REMOVE_PASSWORD' %>">
|
|
<span class="glyphicon glyphicon-remove">
|
|
</span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
<li class="divider">
|
|
</li>
|
|
<li>
|
|
<form class="navbar-form" id="ownerPassForm">
|
|
<center>
|
|
<p><%=l 'OWNER_PASSWORD_MAKES_PERSISTENT' %></p>
|
|
</center>
|
|
<div class="input-group">
|
|
<input type="password" id="ownerPass" class="form-control help" placeholder="<%=l 'PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'OWNER_PASSWORD' %>"/>
|
|
<span class="input-group-btn">
|
|
<button id="setOwnerPassButton" type="submit" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'OWNER_PASSWORD' %>">
|
|
<span class="glyphicon glyphicon-ok">
|
|
</span>
|
|
</button>
|
|
<button id="removeOwnerPassButton" type="button" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'REMOVE_OWNER_PASSWORD' %>">
|
|
<span class="glyphicon glyphicon-remove">
|
|
</span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
<li class="divider">
|
|
</li>
|
|
<li>
|
|
<center>
|
|
<p><%=l 'NOTIFICATION_ON_JOIN' %></p>
|
|
</center>
|
|
<ul class="list-inline" id="emailNotificationList">
|
|
</ul>
|
|
<form class="navbar-form" id="newEmailNotificationForm">
|
|
<div class="input-group">
|
|
<input type="email" id="newEmailNotification" class="form-control help" placeholder="<%=l 'EMAIL_PLACEHOLDER' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'ADD_NOTIFICATION' %>"/>
|
|
<span class="input-group-btn">
|
|
<button id="newEmailNotificationButton" type="submit" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'ADD_THIS_ADDRESS' %>">
|
|
<span class="glyphicon glyphicon-ok">
|
|
</span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group navbar-form navbar-left">
|
|
<button class="btn btn-default dropdown-toggle help unauthEl" type="button" id="authMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'AUTHENTICATE' %>">
|
|
<span class="glyphicon glyphicon-log-in"></span>
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="authMenuButton" id="authMenu">
|
|
<li>
|
|
<form class="navbar-form" id="authForm">
|
|
<center>
|
|
<p><%=l 'AUTH_TO_MANAGE_THE_ROOM' %></p>
|
|
</center>
|
|
<div class="input-group">
|
|
<input type="password" id="authPass" class="form-control help" placeholder="<%=l 'PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'AUTHENTICATE' %>"/>
|
|
<span class="input-group-btn">
|
|
<button id="authPassButton" type="submit" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'AUTHENTICATE' %>">
|
|
<span class="glyphicon glyphicon-ok">
|
|
</span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</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="modal fade" role="dialog" id="setDisplayName" aria-labelledby="setDisplayName" aria-hidden="true" data-keyboard="false" data-backdrop="static">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="setDisplayNameTitle"><%=l 'DISPLAY_NAME_REQUIRED' %></h4>
|
|
</div>
|
|
<div clas="modal-body">
|
|
<form role="form" class="well" id="displayNamePreForm">
|
|
<label for="displayNamePre"><%=l 'SET_A_DISPLAY_NAME' %></label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="displayNamePre" name="displayNamePre" placeholder="<%=l 'YOUR_NAME' %>">
|
|
<span class="input-group-btn">
|
|
<button type="submit" id="displayNamePreButton" class="btn btn-default disabled">
|
|
<span class="glyphicon glyphicon-log-in"></span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" role="dialog" id="chromeExtMessage" aria-labelledby="chromeExtMessage" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title" id="chromeExtMessageTitle"><%=l 'EXTENSION_REQUIRED' %></h4>
|
|
</div>
|
|
<div clas="modal-body">
|
|
<p><%=l 'VROOM_CHROME_EXTENSION' %></p>
|
|
<a href="https://chrome.google.com/webstore/detail/<%= $config->{chromeExtensionId} %>" target="_blank">
|
|
<h1>
|
|
<span class="glyphicon glyphicon-download-alt">
|
|
</span>
|
|
</h1>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" role="dialog" id="noWebrtcSupport" aria-labelledby="noWebrtcSupport" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title" id="noWebrtcSupportTitle"><%=l 'BROWSER_NOT_SUPPORTED' %></h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p><%=l 'NO_WEBRTC_SUPPORT' %></p>
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<a href="http://www.mozilla.org/firefox/" target="_blank">
|
|
<center>
|
|
<img src="/img/firefox.png" alt="Mozilla Firefox"/>
|
|
</center>
|
|
</a>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<a href="http://www.google.com/chrome/" target="_blank">
|
|
<center>
|
|
<img src="/img/chrome.png" alt="Google Chrome"/>
|
|
</center>
|
|
</a>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<a href="http://www.opera.com" target="_blank">
|
|
<center>
|
|
<img src="/img/opera.png" alt="Opera"/>
|
|
</center>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" role="dialog" id="noWebcam" aria-labelledby="noWebcam" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title" id="noWebcamTitle"><%=l 'NO_WEBCAM' %></h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p><%=l 'CANT_ACCESS_WEBCAM' %></p>
|
|
<center>
|
|
<img src="/img/webcam.png" alt="Webcam"/>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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 help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_MESSAGE' %>">
|
|
<span class="glyphicon glyphicon-share-alt">
|
|
</span>
|
|
</button>
|
|
<button type="button" id="saveChat" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SAVE_HISTORY' %>">
|
|
<span class="glyphicon glyphicon-floppy-save">
|
|
</span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="view" class="view row-fluid">
|
|
<div id="webRTCVideo" class="col-xs-12 col-sm-4">
|
|
<div class="col-xs-6 col-sm-12 col-lg-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-sm-8 hidden-xs">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
%= include 'js_common'
|
|
%= include 'js_room'
|
|
<script>
|
|
var roomName = '<%= $room %>';
|
|
$( document ).ready(function() {
|
|
setTimeout(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: false,
|
|
detectSpeakingEvents: true,
|
|
adjustPeerVolume: false,
|
|
autoAdjustMic: false,
|
|
harkOptions: {
|
|
interval: 300,
|
|
threshold: -20
|
|
},
|
|
media: {
|
|
video: {
|
|
mandatory: {
|
|
maxFrameRate: 15,
|
|
}
|
|
},
|
|
audio: true
|
|
}
|
|
});
|
|
initVroom(roomName);
|
|
}, 300);
|
|
});
|
|
</script>
|
|
</div>
|
|
%= include 'footer'
|
|
|