deflax/vod-rtmp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

replace flv.js player with hls.js

Browse source
This commit is contained in:
deflax 2021-10-11 20:14:01 +00:00
parent 7bc1670382
commit a8e0733997
4 changed files with 13 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config/frontend/config.yml.dist
View file

@ -18,7 +18,7 @@ stat_url : http://rtmp:18080/stat
# web protocol - used for generating hls and internal links. # web protocol - used for generating hls and internal links.
# change this to https if you are using https for example via traefik in front of this setup # change this to https if you are using https for example via traefik in front of this setup
web_proto: http web_proto: https
# if you want to add another template you can place it in the "templates" folder # if you want to add another template you can place it in the "templates" folder
# leave it at "default" to use the included default template # leave it at "default" to use the included default template

14
frontend/app/templates/default/main.html.j2
View file

@ -27,21 +27,17 @@
<th></th> <th></th>
</tr> </tr>
<tr> <tr>
<td>RTMP</td> <td>RTMP url</td>
<td><em class="url">rtmp://{{ configuration["rtmp_base"] }}/{{ item[0] }}/{{ item[1] }}</em></td> <td><em class="url">rtmp://{{ configuration["rtmp_base"] }}/{{ item[0] }}/{{ item[1] }}</em></td>
<td class="btn"><a href="rtmp://{{ configuration["rtmp_base"] }}/{{ item[0] }}/{{ item[1] }}" class="btn btn-green">&#9654;<br/>RTMP</a></td> <td class="btn"><a href="rtmp://{{ configuration['rtmp_base'] }}/{{ item[0] }}/{{ item[1] }}" class="btn btn-green">&#9654;<br/>RTMP</a></td>
</tr> </tr>
<tr> <tr>
<td>HTTP-FLV</td> <td>HLS m3u8</td>
<td><em class="url">{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ item[0] }}&stream={{ item[1] }}</em></td> <td><em class="url">{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ item[1] }}/index.m3u8</em></td>
<td class="btn"><a href="{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ item[0] }}&stream={{ item[1] }}" class="btn btn-green">&#9654;<br/>HTTP-FLV</a></td> <td class="btn"><a href="{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/player/{{ item[1] }}" class="btn btn-green">&#9654;<br/>HLS.js</a></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<a href="{{ url_for('frontend.show_player', streamname=item[1], appname=item[0]) }}"
class="btn-large btn-green">
&#9655; Web Player
</a>
</article> </article>
{% endfor %} {% endfor %}
</main> </main>

4
frontend/app/templates/default/player.html.j2
View file

@ -22,7 +22,7 @@
var hls = new Hls({ var hls = new Hls({
debug: true, debug: true,
}); });
hls.loadSource("{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ streamname }}/index.m3u8'); hls.loadSource("{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ streamname }}/index.m3u8");
hls.attachMedia(video); hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () { hls.on(Hls.Events.MEDIA_ATTACHED, function () {
video.muted = true; video.muted = true;
@ -33,7 +33,7 @@
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property. // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js. // This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) { else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = "{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ streamname }}/index.m3u8'"; video.src = "{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ streamname }}/index.m3u8";
video.addEventListener('canplay', function () { video.addEventListener('canplay', function () {
video.play(); video.play();
}); });

10
frontend/app/zomstream.py
View file

@ -53,22 +53,22 @@ class Zomstream:
app = streamName[0] app = streamName[0]
name = streamName[1] name = streamName[1]
flv_url = self.getFlvUrl (app,name) hls_url = self.getHlsUrl (app,name)
rtmp_url = self.getRtmpUrl(app,name) rtmp_url = self.getRtmpUrl(app,name)
urls.append({'url': flv_url, 'type':'http_flv'}) urls.append({'url': hls_url, 'type':'hls'})
urls.append({'url': rtmp_url,'type':'rtmp'}) urls.append({'url': rtmp_url,'type':'rtmp'})
stream = Stream(app=app, name=name, urls=urls) stream = Stream(app=app, name=name, urls=urls)
streams.append(stream.__dict__) streams.append(stream.__dict__)
return streams return streams
def getFlvUrl(self,app_name,stream_name): def getHlsUrl(self,app_name,stream_name):
return '%s://%s/flv?app=%s&stream=%s' % ( return '%s://%s/hls/%s/index.m3u8' % (
self.configuration['web_proto'], self.configuration['web_proto'],
self.configuration['base_url'], self.configuration['base_url'],
app_name,
stream_name) stream_name)
def getRtmpUrl(self,app_name,stream_name): def getRtmpUrl(self,app_name,stream_name):
return "rtmp://%s/%s/%s" % ( return "rtmp://%s/%s/%s" % (
self.configuration['rtmp_base'], self.configuration['rtmp_base'],