Statistics
| Branch: | Revision:

janus-gateway / html / recordplaytest.html @ 8241c758

History | View | Annotate | Download (4.46 KB)

1 5fa9a305 meetecho
<!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: Recorder/Playout Demo</title>
8
<script type="text/javascript" src="jquery.min.js" ></script>
9
<script type="text/javascript" src="jquery.blockUI.js" ></script>
10
<script type="text/javascript" src="js/bootstrap.js"></script>
11
<script type="text/javascript" src="js/bootbox.min.js"></script>
12
<script type="text/javascript" src="js/spin.min.js"></script>
13
<script type="text/javascript" src="janus.js" ></script>
14
<script type="text/javascript" src="recordplaytest.js"></script>
15 6d795273 Lorenzo Miniero
<script>
16
        $(function() {
17
                $(".navbar-static-top").load("navbar.html", function() {
18
                        $(".navbar-static-top li.dropdown").addClass("active");
19
                        $(".navbar-static-top a[href='recordplaytest.html']").parent().addClass("active");
20
                });
21
                $(".footer").load("footer.html");
22
        });
23
</script>
24 5fa9a305 meetecho
<link rel="stylesheet" href="css/cerulean/bootstrap.css" type="text/css"/>
25
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
26 6d795273 Lorenzo Miniero
<link rel="stylesheet" href="css/font-awesome.css" type="text/css"/>
27 4b12fd8e meetecho
</head>
28 5fa9a305 meetecho
<body>
29
30
<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>
31
32
<nav class="navbar navbar-default navbar-static-top">
33
</nav>
34
35
<div class="container">
36
        <div class="row">
37
                <div class="col-md-12">
38
                        <div class="page-header">
39
                                <h1>Plugin Demo: Recorder/Playout
40 7c527257 meetecho
                                        <button class="btn btn-default" autocomplete="off" id="start">Start</button>
41 5fa9a305 meetecho
                                </h1>
42
                        </div>
43
                        <div class="container" id="details">
44
                                <div class="row">
45
                                        <div class="col-md-12">
46
                                                <h3>Demo details</h3>
47
                                                <p>This demo shows how you can record a WebRTC session, and replay it later. You
48
                                                can choose to either record a new session (e.g., a videomessage) or watch any of
49
                                                the recordings that may be available (including those you made yourself).</p>
50
                                                <p>This application makes use of the integrated recording feature in Janus,
51
                                                specifically the individual recording of audio and video streams in <code>.mjr</code>
52
                                                format: these individual recordings are then used for a live broadcasting
53
                                                of the dumped RTP packets through a sendonly WebRTC PeerConnection
54
                                                when you choose to replay them. To post-process these recordings in a
55
                                                more usable format (e.g., <code>.webm</code> for video or <code>.opus</code>
56
                                                for audio) you can make use of the <code>janus-pp-rec</code> tool that
57
                                                is available as part of the Janus code.</p>
58
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
59
                                        </div>
60
                                </div>
61
                        </div>
62
                        <div class="container hide" id="recordplay">
63
                                <div id="demo">
64
                                        <div class="col-md-6" id="controls">
65
                                                <div class="panel panel-default">
66
                                                        <div class="panel-heading">
67
                                                                <h3 class="panel-title">Recorder/Playout</h3>
68
                                                        </div>
69
                                                        <div class="panel-body">
70
                                                                <div class="btn-group btn-group-sm">
71 7c527257 meetecho
                                                                        <button class="btn btn-danger" disabled autocomplete="off" id="record">Record</button>
72
                                                                        <button class="btn btn-success" disabled autocomplete="off" id="play">Play</button>
73
                                                                        <button class="btn btn-primary" disabled autocomplete="off" id="list">Update <i id="update-list" class="fa fa-refresh"></i></button>
74 5fa9a305 meetecho
                                                                </div>
75
                                                                <br/>
76
                                                                <div class="btn-group btn-group-sm" style="width: 100%">
77
                                                                        <div class="btn-group btn-group-sm" style="width: 100%">
78 7c527257 meetecho
                                                                                <button autocomplete="off" id="recset" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width: 100%">
79 5fa9a305 meetecho
                                                                                        Recordings list<span class="caret"></span>
80
                                                                                </button>
81 8878e296 meetecho
                                                                                <ul id="recslist" class="dropdown-menu" role="menu" style="max-height: 300px; overflow: auto;">
82 5fa9a305 meetecho
                                                                                </ul>
83
                                                                        </div>
84
                                                                </div>
85
                                                        </div>
86
                                                </div>
87
                                        </div>
88
                                        <div class="col-md-6 hide" id="video">
89
                                                <div class="panel panel-default">
90
                                                        <div class="panel-heading">
91 7c527257 meetecho
                                                                <h3 class="panel-title"><span id="videotitle">Remote Video</span> <button class="btn-xs btn-danger pull-right" autocomplete="off" id="stop">Stop</button></h3>
92 5fa9a305 meetecho
                                                        </div>
93
                                                        <div class="panel-body" id="videobox"></div>
94
                                                </div>
95
                                        </div>
96
                                </div>
97
                        </div>
98
                </div>
99
        </div>
100
101
        <hr>
102
        <div class="footer">
103
        </div>
104
</div>
105
106
</body>
107
</html>