Comments (6)
@edemir206 the time is the time into the segment the thumbnail was generated from. E.g. If you know that each of your segments is exactly 10 seconds long then to get the real time you would add sn*10
The reason they are relative to the segment is because for a live stream there is no fixed starting point.
Let me know if you get something working with Clappr. I was actually planning on updating the thumbnails plugin to support this but never got around to it.
from hls-live-thumbnails.
Hi @tjenkinson
I understand now. But even using sn*10
in my case the thumbs won't get synced correcly, the video position won't translate the thumb position, there must be something I'm missing.
Below is my updated code:
var player = new Clappr.Player({
source: "/app/farol/hls/<?php echo get_field('stream') ?>/index.m3u8",
parentId: "#video",
autoPlay: true,
plugins: {
core: [ClapprThumbnailsPlugin]
},
scrubThumbnails: {
backdropHeight: 64,
spotlightHeight: 84,
thumbs: []
}
});
var added_thumbs = [];
function addThumbs()
{
var request = $.ajax({
url: "/app/farol/thumbs/<?php echo get_field('stream') ?>/thumbnails.json",
type: "GET",
dataType: "json"
});
request.done(function(retorno) {
$.each( retorno.segments, function( key, val ) {
if(added_thumbs.indexOf(val.sn) === -1)
{
$.each( val.thumbnails, function( thumb_key, thumb_val ) {
var thumbnailsPlugin = player.getPlugin("scrub-thumbnails");
var newThumb = {
url: "/app/farol/thumbs/<?php echo get_field('stream') ?>/"+thumb_val.name,
time: val.sn*10+thumb_val.time
};
thumbnailsPlugin.addThumbnail(newThumb).then(function() {
console.log("Thumbnail added."+newThumb.url+" Time: "+thumb_val.time);
});
});
added_thumbs.push(val.sn);
}
});
});
}
setInterval(function(){ addThumbs(); }, 15000);
addThumbs();
from hls-live-thumbnails.
@edemir206 what type of stream is it? LIVE, VOD or EVENT? If all the segments are 10 seconds and it is VOD or EVENT it should work. It would be more accurate though, and work for LIVE, to get the segment start times from hls.js/clappr.
from hls-live-thumbnails.
@tjenkinson it is a LIVE stream.
I'm using the exec_push nginx rtmp directive to convert the stream to a lower bitrate using ffmpeg, below is my nginx application
application transmissao{
# record all;
exec_push ffmpeg -i rtmp://farol:1935/transmissao/$name -async 1 -vsync -1 -c:v libx264 -c:a libfdk_aac -profile:a aac_he_v2 -vbr 3 -tune zerolatency -crf 23 -maxrate 2M -bufsize 4M -f flv rtmp://farol:1935/hls/$name;
#SCRIPTS DE AUTENTICACAO E DE CONEXAO
on_publish nginx:80/farol?farol_publish;
on_publish_done nginx:80/farol?farol_publish_done;
#THUMB GENERATION
exec bash -c "hls-live-thumbnails http://nginx/app/farol/hls/$name/index.m3u8 --interval 45 --outputDir /data/farol/thumbs/$name --outputNamePrefix $name";
}
application hls{
hls on;
hls_playlist_length 24h;
hls_fragment 10s;
# record all;
}
from hls-live-thumbnails.
Ah right. Yes you will need more logic in the player to get the start time of the segments in the media element (MSE buffer).
The following can happen:
- Player requests playlist
- the first segment in the playlist is sequence number 5 (because the first few were removed already)
- player starts by appending segment with sequence number 8 (because this is closer to the live point).
This means currentTime
0 in the media element maps to the start time of segment 8
from hls-live-thumbnails.
@tjenkinson I followed your instructions, started from segment 8, but even this way there's a problem with time syncing. The thumbs represets video time up to 10 min, but after that everything gets messed up that's really weird. I don't know what else to do I think i'm just gonna give up.
from hls-live-thumbnails.
Related Issues (16)
- Error when temp directory on different drive
- Error On Install HOT 2
- Rename thumbnail filename HOT 8
- Overwrite Thumbnails HOT 3
- Background service HOT 7
- Add 'exitOnPlaylistEnd' option to CLI HOT 2
- Ignore Error HOT 12
- Time Based Interval HOT 6
- Error installing HOT 3
- Bug: Width and height arguments not working. HOT 2
- event "finished" never get fired HOT 8
- npm global install not working HOT 1
- I have a question HOT 13
- node.js promise error HOT 3
- Feature request: support byte-range stream (EXT-X-BYTERANGE)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hls-live-thumbnails.