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

attempt to use hls.js instead

Browse source
This commit is contained in:
deflax 2021-10-11 18:50:37 +00:00
parent 3be6173b03
commit 7bc1670382
2 changed files with 27 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/Dockerfile
View file

@ -14,8 +14,9 @@ RUN chmod 644 /code/static/flv.min.js
RUN mkdir -p /tmp/hls.js && \
cd /tmp/hls.js && \
wget -O hls.js.zip https://github.com/video-dev/hls.js/releases/download/v1.0.11/release.zip && \
unzip hls.js.zip
ADD /tmp/hls.js/dist/hls.min.js /code/static/hls.min.js
unzip hls.js.zip && \
cp dist/hls.min.js /code/static/hls.min.js
RUN chmod 644 /code/static/hls.min.js
USER nobody
WORKDIR /code

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

@ -15,18 +15,30 @@
<video id="player" controls>
</video>
</div>
<script src="{{ url_for('static', filename='flv.min.js') }}"></script>
<script type="application/javascript">
if (flvjs.isSupported()) {
var videoElement = document.getElementById('player');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: '{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ appname }}&stream={{ streamname }}'
<script src="{{ url_for('static', filename='hls.min.js') }}"></script>
<script>
var video = document.getElementById('video');
if (Hls.isSupported()) {
var hls = new Hls({
debug: true,
});
hls.loadSource("{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ streamname }}/index.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
video.muted = true;
video.play();
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// 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.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = "{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ streamname }}/index.m3u8'";
video.addEventListener('canplay', function () {
video.play();
});
}
//url: '{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ appname }}&stream={{ streamname }}'
</script>
</body>
</html>