Statistics
| Branch: | Revision:

janus-gateway / html / recordplaytest.html @ 70e8fc9c

History | View | Annotate | Download (4.97 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: Recorder/Playout Demo</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="recordplaytest.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='recordplaytest.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: Recorder/Playout
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>This demo shows how you can record a WebRTC session, and replay it later. You
49
                                                can choose to either record a new session (e.g., a videomessage) or watch any of
50
                                                the recordings that may be available (including those you made yourself).</p>
51
                                                <p>This application makes use of the integrated recording feature in Janus,
52
                                                specifically the individual recording of audio and video streams in <code>.mjr</code>
53
                                                format: these individual recordings are then used for a live broadcasting
54
                                                of the dumped RTP packets through a sendonly WebRTC PeerConnection
55
                                                when you choose to replay them. To post-process these recordings in a
56
                                                more usable format (e.g., <code>.webm</code> for video or <code>.opus</code>
57
                                                for audio) you can make use of the <code>janus-pp-rec</code> tool that
58
                                                is available as part of the Janus code.</p>
59
                                                <p>Press the <code>Start</code> button above to launch the demo.</p>
60
                                        </div>
61
                                </div>
62
                        </div>
63
                        <div class="container hide" id="recordplay">
64
                                <div id="demo">
65
                                        <div class="col-md-6" id="controls">
66
                                                <div class="panel panel-default">
67
                                                        <div class="panel-heading">
68
                                                                <h3 class="panel-title">Recorder/Playout</h3>
69
                                                        </div>
70
                                                        <div class="panel-body">
71
                                                                <div class="btn-group btn-group-sm">
72
                                                                        <button class="btn btn-danger" disabled autocomplete="off" id="record">Record</button>
73
                                                                        <button class="btn btn-success" disabled autocomplete="off" id="play">Play</button>
74
                                                                        <button class="btn btn-primary" disabled autocomplete="off" id="list">Update <i id="update-list" class="fa fa-refresh"></i></button>
75
                                                                </div>
76
                                                                <br/>
77
                                                                <div class="btn-group btn-group-sm" style="width: 100%">
78
                                                                        <div class="btn-group btn-group-sm" style="width: 100%">
79
                                                                                <button autocomplete="off" id="recset" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width: 100%">
80
                                                                                        Recordings list<span class="caret"></span>
81
                                                                                </button>
82
                                                                                <ul id="recslist" class="dropdown-menu" role="menu" style="max-height: 300px; overflow: auto;">
83
                                                                                </ul>
84
                                                                        </div>
85
                                                                </div>
86
                                                        </div>
87
                                                </div>
88
                                        </div>
89
                                        <div class="col-md-6 hide" id="video">
90
                                                <div class="panel panel-default">
91
                                                        <div class="panel-heading">
92
                                                                <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>
93
                                                        </div>
94
                                                        <div class="panel-body" id="videobox"></div>
95
                                                </div>
96
                                        </div>
97
                                </div>
98
                        </div>
99
                </div>
100
        </div>
101

    
102
        <hr>
103
        <div class="footer">
104
        </div>
105
</div>
106

    
107
</body>
108
</html>