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 && \ RUN mkdir -p /tmp/hls.js && \
cd /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 && \ wget -O hls.js.zip https://github.com/video-dev/hls.js/releases/download/v1.0.11/release.zip && \
unzip hls.js.zip unzip hls.js.zip && \
ADD /tmp/hls.js/dist/hls.min.js /code/static/hls.min.js cp dist/hls.min.js /code/static/hls.min.js
RUN chmod 644 /code/static/hls.min.js
USER nobody USER nobody
WORKDIR /code WORKDIR /code

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

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