RuStream 0.0.0-alpha

Rustic API to stream videos from localhost
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

<!DOCTYPE html>
<!--suppress JSUnresolvedLibraryURL -->
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Rustic video streaming</title>
    <meta property="og:type" content="VideoStreaming">
    <meta name="keywords" content="Rust, streaming, actix, JavaScript, HTML, CSS">
    <meta name="author" content="Vignesh Rao">
    <meta name="image" property="og:image" content="https://thevickypedia.com/img/apple-touch-icon.jpg">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- CSS and JS for video-js plugin -->
    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
    <link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet"/>
    <script src="https://vjs.zencdn.net/8.6.1/video.min.js" defer></script>
    <!-- Disables 404 for favicon.ico which is a logo on top of the webpage tab -->
    <link rel="shortcut icon" href="#">
    <!-- Font Awesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Button CSS -->
    <style>
        .iter {
            border: none;
            padding: 10px 14px;
            font-size: 16px;
            cursor: pointer;
        }
        .home {
            position: absolute;
            top: 3.8%;
            right: 218px;
            border: none;
            padding: 10px 14px;
            font-size: 16px;
            cursor: pointer;
        }
        .back {
            position: absolute;
            top: 3.8%;
            right: 130px;
            border: none;
            padding: 10px 14px;
            font-size: 16px;
            cursor: pointer;
        }
        .logout {
            position: absolute;
            top: 3.8%;
            right: 30px;
            border: none;
            padding: 10px 14px;
            font-size: 16px;
            cursor: pointer;
        }
        body {
            background-color: #151515;
        }
        title, h1, h2, h3, h4, h5, h6, p {
            color: #f0f0f0;
        }
        button {
            background: transparent !important;
            color: #f0f0f0;
        }
        button:hover {
            background: transparent !important;
            opacity: 0.6;
            transition: 0.5s;
        }
    </style>
    <!-- Video, title and body CSS -->
    <style>
        body {
            font-family: 'PT Serif', serif;
        }
        h1 {
            text-align: center;
        }
    </style>
    <!-- Size of video container and the player -->
    <style>
        body {
            margin: 0; /* Remove default margin */
            padding: 0; /* Remove default padding */
            box-sizing: border-box; /* Include padding and border in element's total width and height */
        }
        #video-container {
            position: relative;
            width: 70%;
            max-width: 100%; /* Set a maximum width to prevent overflow */
            height: 80vh; /* Set height to 100% of the viewport height */
            margin: 0 auto; /* Center the container horizontally */
            overflow: hidden; /* Hide any overflowing content */
        }
        #video-player {
            position: relative;
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>
<button class="home" onclick="goHome()"><i class="fa fa-home"></i> Home</button>
<button class="back" onclick="goBack()"><i class="fa fa-backward"></i> Back</button>
<button class="logout" onclick="logOut()"><i class="fa fa-sign-out"></i> Logout</button>
<br><br>
<h1>{{ video_title }}</h1>
<div id="video-container">
    <video id="video-player"
           class="video-js"
           preload="auto"
           controls muted="muted"
           style="position: relative; margin-left: auto; margin-right: auto; display: block"
           data-setup='{
         "playbackRates": [1, 1.5, 2, 5],
         "controlBar": {
           "skipButtons": {
             "backward": 10,
             "forward": 10
           }
         }
       }'>
        <source id="video-source" type="video/mp4" src=""/>
        <track id="subtitles" kind="subtitles" src="" srclang="en"/>
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
    </video>
    {% if previous %}
        <button class="iter" style="float: left" onclick="window.location='{{ previous }}'" title="{{ previous_title }}">
            <i class="fa fa-backward"></i> Previous
        </button>
    {% endif %}
    {% if next %}
        <button class="iter" style="float: right" onclick="window.location='{{ next }}'" title="{{ next_title }}">
            Next <i class="fa fa-forward"></i>
        </button>
    {% endif %}
    <br><br>
</div>
<script>
    let origin = window.location.origin; // Get the current origin using JavaScript
    let path = "{{ path }}";
    let track = "{{ track }}";

    // Construct the source URL for video by combining origin and path
    let videoSource = origin + path;

    // Set the video source URL for the video-source element
    let videoElement = document.getElementById("video-source");
    videoElement.setAttribute("src", videoSource);

    // Set the subtitles URL for the video
    let trackElement = document.getElementById("subtitles");
    trackElement.setAttribute("src", track);

    let videoPlayer = document.getElementById("video-player");
    videoPlayer.load(); // Load the video
    // videoPlayer.play(); // Play the video
</script>
<script>
    function logOut() {
        window.location.href = window.location.origin + "/logout";
    }
    function goHome() {
        window.location.href = window.location.origin + "/home";
    }
    function goBack() {
        window.history.back();
    }
</script>
</body>
</html>