Statistics
| Branch: | Revision:

janus-gateway / html / textroomtest.html @ 1f44763c

History | View | Annotate | Download (5.44 KB)

1
<!DOCTYPE html>
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7
<title>Janus WebRTC Gateway: Text Room</title>
8
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.4.3/adapter.min.js" ></script>
9
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
10
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js" ></script>
11
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
12
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.1.0/bootbox.min.js"></script>
13
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
14
<script type="text/javascript" src="janus.js" ></script>
15
<script type="text/javascript" src="textroomtest.js"></script>
16
<script>
17
        $(function() {
18
                $(".navbar-static-top").load("navbar.html", function() {
19
                        $(".navbar-static-top li.dropdown").addClass("active");
20
                        $(".navbar-static-top a[href='textroomtest.html']").parent().addClass("active");
21
                });
22
                $(".footer").load("footer.html");
23
        });
24
</script>
25
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" type="text/css"/>
26
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
27
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css" type="text/css"/>
28
</head>
29
<body>
30

    
31
<a href="https://github.com/meetecho/janus-gateway"><img style="position: absolute; top: 0; left: 0; border: 0; z-index: 1001;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>
32

    
33
<nav class="navbar navbar-default navbar-static-top">
34
</nav>
35

    
36
<div class="container">
37
        <div class="row">
38
                <div class="col-md-12">
39
                        <div class="page-header">
40
                                <h1>Plugin Demo: Text Room
41
                                        <button class="btn btn-default" autocomplete="off" id="start">Start</button>
42
                                </h1>
43
                        </div>
44
                        <div class="container" id="details">
45
                                <div class="row">
46
                                        <div class="col-md-12">
47
                                                <h3>Demo details</h3>
48
                                                <p>The Text Room demo is a simple example of how you can use this text
49
                                                broadcasting plugin, which uses Data Channels, to implement something
50
                                                similar to a chatroom. More specifically, the demo allows you to join
51
                                                a previously created and configured text room together with other
52
                                                participants, and send/receive public and private messages to
53
                                                individual participants. To send messages on the chatroom, just type
54
                                                your text and send. To send private messages to individual participants,
55
                                                click the participant name in the list on the right and a custom dialog
56
                                                will appear.</code>.</p>
57
                                                <p>To try the demo, just insert a username to join the room. This will
58
                                                add you to chatroom, and allow you to interact with the other participants.</p>
59
                                                <p>Notice that this is just a very basic demo, and that is just one of
60
                                                the several different ways you can use this plugin for. The plugin
61
                                                actually allows you to join multiple rooms at the same time, and also
62
                                                to forward incoming messages to the room to external components. This
63
                                                makes it a useful tool whenever you have to interact with third party
64
                                                applications and exchange text data.</p>
65
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
66
                                        </div>
67
                                </div>
68
                        </div>
69
                        <div class="container hide" id="roomjoin">
70
                                <div class="row">
71
                                        <span class="label label-info" id="you"></span>
72
                                        <div class="col-md-12" id="controls">
73
                                                <div class="input-group margin-bottom-md hide" id="registernow">
74
                                                        <span class="input-group-addon">@</span>
75
                                                        <input class="form-control" type="text" placeholder="Choose a display name" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);"></input>
76
                                                        <span class="input-group-btn">
77
                                                                <button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
78
                                                        </span>
79
                                                </div>
80
                                        </div>
81
                                </div>
82
                        </div>
83
                        <div class="container hide" id="room">
84
                                <div class="row">
85
                                        <div class="col-md-4">
86
                                                <div class="panel panel-default">
87
                                                        <div class="panel-heading">
88
                                                                <h3 class="panel-title">Participants <span class="label label-info hide" id="participant"></span></h3>
89
                                                        </div>
90
                                                        <div class="panel-body">
91
                                                                <ul id="list" class="list-group">
92
                                                                </ul>
93
                                                        </div>
94
                                                </div>
95
                                        </div>
96
                                        <div class="col-md-8">
97
                                                <div class="panel panel-default">
98
                                                        <div class="panel-heading">
99
                                                                <h3 class="panel-title">Public Chatroom</span></h3>
100
                                                        </div>
101
                                                        <div class="panel-body relative" style="overflow-x: auto;" id="chatroom">
102
                                                        </div>
103
                                                        <div class="panel-footer">
104
                                                                <div class="input-group margin-bottom-sm">
105
                                                                        <span class="input-group-addon"><i class="fa fa-cloud-upload fa-fw"></i></span>
106
                                                                        <input class="form-control" type="text" placeholder="Write a chatroom message" autocomplete="off" id="datasend" onkeypress="return checkEnter(this, event);" disabled></input>
107
                                                                </div>
108
                                                        </div>
109
                                                </div>
110
                                        </div>
111
                                </div>
112
                        </div>
113
                </div>
114
        </div>
115

    
116
        <hr>
117
        <div class="footer">
118
        </div>
119
</div>
120

    
121
</body>
122
</html>