Upvote Upvoted 162 Downvote Downvoted
1 2 3
Online demo playback at demos.tf
posted in Projects
1
#1
0 Frags +

View stv demos directly in the browser

https://i.imgur.com/UCcfuAv.jpg

After countless hours of work I'm happy to announce the ability to view stv demos in your browser, making it easy for individuals and teams to review and analyze games.

Usage

You can view any demo stored on the site by clicking the "View" button on the demo page, or you can go to the viewer page and select a demo file from your computer.

While viewing a demo you can zoom and look around the map to get the best view of the action.
You can navigate trough the demo using the timeline at the bottom, with the overall team health graphs giving an indication about the time pushes and other events happened.

Synchronized viewing

To make it easy to review a game with your team, the option exist to synchronize the playback of a demo for multiple users.

When viewing a demo stored on the site, you can use the "link" button in the top left to create a "share link".

https://i.imgur.com/2a9mp4a.png

Anyone using that link will then have it's playback synchronized with yours allowing a multiple people to review the same demo while making sure that everybody is looking at the exact same moment during the push.

The demo viewer can be found at everybody's favorite automated demo uploading website demos.tf, for people interested in the magic behind the scenes, the source of the viewer and demo parser can be found over at github.

View stv demos directly in the browser

[img]https://i.imgur.com/UCcfuAv.jpg[/img]

After countless hours of work I'm happy to announce the ability to view stv demos in your browser, making it easy for individuals and teams to review and analyze games.

[h]Usage[/h]

You can view any demo stored on the site by clicking the "View" button on the demo page, or you can go to the [url=https://demos.tf/viewer]viewer page[/url] and select a demo file from your computer.

While viewing a demo you can zoom and look around the map to get the best view of the action.
You can navigate trough the demo using the timeline at the bottom, with the overall team health graphs giving an indication about the time pushes and other events happened.

[h]Synchronized viewing[/h]

To make it easy to review a game with your team, the option exist to synchronize the playback of a demo for multiple users.

When viewing a demo stored on the site, you can use the "link" button in the top left to create a "share link".

[img]https://i.imgur.com/2a9mp4a.png[/img]

Anyone using that link will then have it's playback synchronized with yours allowing a multiple people to review the same demo while making sure that everybody is looking at the exact same moment during the push.

The demo viewer can be found at everybody's favorite automated demo uploading website [url=https://demos.tf]demos.tf[/url], for people interested in the magic behind the scenes, the source of the [url=https://github.com/demostf/demos.tf]viewer[/url] and [url=https://github.com/icewind1991/demo.js]demo parser[/url] can be found over at github.
2
#2
27 Frags +

Holy PogChamp

Holy PogChamp
3
#3
25 Frags +

yo what the fuck

yo what the fuck
4
#4
13 Frags +

This looks fucking awesome.

This looks fucking awesome.
5
#5
10 Frags +

This is holy fucking amazing

Thanks!

This is holy fucking amazing

Thanks!
6
#6
0 Frags +

This is amazing, but could you explain what the graph at the bottom of the screen actually represents? Is it team dominance and caps on the map?

This is amazing, but could you explain what the graph at the bottom of the screen actually represents? Is it team dominance and caps on the map?
7
#7
13 Frags +
Mr_WillThis is amazing, but could you explain what the graph at the bottom of the screen actually represents? Is it team dominance and caps on the map?IcewindWhile viewing a demo you can zoom and look around the map to get the best view of the action.
You can navigate trough the demo using the timeline at the bottom, with the overall team health graphs giving an indication about the time pushes and other events happened.
[quote=Mr_Will]This is amazing, but could you explain what the graph at the bottom of the screen actually represents? Is it team dominance and caps on the map?[/quote]

[quote=Icewind]While viewing a demo you can zoom and look around the map to get the best view of the action.
You can navigate trough the demo using the timeline at the bottom, with the overall team health graphs giving an indication about the time pushes and other events happened.[/quote]
8
#8
4 Frags +
Mr_WillThis is amazing, but could you explain what the graph at the bottom of the screen actually represents? Is it team dominance and caps on the map?

it says on the post it's overall team health

e: ninja'd as fuck

[quote=Mr_Will]This is amazing, but could you explain what the graph at the bottom of the screen actually represents? Is it team dominance and caps on the map?[/quote]
it says on the post it's overall team health

e: ninja'd as fuck
9
#9
1 Frags +

Super cool
I wonder if it would work better on an isometric view than top down

Super cool
I wonder if it would work better on an isometric view than top down
10
#10
0 Frags +
IcewindAnyone using that link will then have it's playback synchronized with yours allowing a multiple people to review the same demo while making sure that everybody is looking at the exact same moment during the push.

Just tried it with a teammate and it doesn't seem to sync the actual pauses, rewinds etc... it's just the same demo

[quote=Icewind]Anyone using that link will then have it's playback synchronized with yours allowing a multiple people to review the same demo while making sure that everybody is looking at the exact same moment during the push.[/quote]

Just tried it with a teammate and it doesn't seem to sync the actual pauses, rewinds etc... it's just the same demo
11
#11
16 Frags +

lit af, maybe an option to slow/speed up the demo would be cool,

lit af, maybe an option to slow/speed up the demo would be cool,
12
#12
serveme.tf
10 Frags +

Amazing <3

Amazing <3
13
#13
1 Frags +
DatDrummerGuy

use the link icon in the top left, not the link you're watching with

[quote=DatDrummerGuy][/quote]
use the link icon in the top left, not the link you're watching with
14
#14
0 Frags +

The thing where you use your own demos works great with STVs but with a normal demo i get this error

The thing where you use your own demos works great with STVs but with a normal demo i get [url=http://i.imgur.com/1zzVysN.png]this error[/url]
15
#15
-1 Frags +
MikeMatDatDrummerGuyuse the link icon in the top left, not the link you're watching with

That's what I did.

[quote=MikeMat][quote=DatDrummerGuy][/quote]
use the link icon in the top left, not the link you're watching with[/quote]

That's what I did.
16
#16
5 Frags +

is it possible to get it to watch a person's individual pov instead of the overall one?
currently if you're trying to do a demo review as a team you have to sync it up manually which is a pain or have someone stream it on twitch which results in lag (but it does let them pause/fast forward/rewind)
would be neat if there were a better way to do it

is it possible to get it to watch a person's individual pov instead of the overall one?
currently if you're trying to do a demo review as a team you have to sync it up manually which is a pain or have someone stream it on twitch which results in lag (but it does let them pause/fast forward/rewind)
would be neat if there were a better way to do it
17
#17
1 Frags +

great job!

great job!
18
#18
2 Frags +
sage78The thing where you use your own demos works great with STVs but with a normal demo i get this error

If you can send me a link with the demo file I can see if I can fix the problem

[quote=sage78]The thing where you use your own demos works great with STVs but with a normal demo i get [url=http://i.imgur.com/1zzVysN.png]this error[/url][/quote]

If you can send me a link with the demo file I can see if I can fix the problem
19
#19
7 Frags +

Actually such a great way to see things clearer and see how pushes and other fights unravel without missing some players and wondering where they went.

Falkinghammerlit af, maybe an option to slow/speed up the demo would be cool,

Also I think an option to see players' names next to their class icon on the screen would be cool to have

Actually such a great way to see things clearer and see how pushes and other fights unravel without missing some players and wondering where they went.[quote=Falkinghammer]lit af, maybe an option to slow/speed up the demo would be cool,[/quote] Also I think an option to see players' names next to their class icon on the screen would be cool to have
20
#20
8 Frags +
Falkinghammerlit af, maybe an option to slow/speed up the demo would be cool,

Is on the TODO list :)

[quote=Falkinghammer]lit af, maybe an option to slow/speed up the demo would be cool,[/quote]

Is on the TODO list :)
21
#21
2 Frags +

really amazing idea, is there a way to view medic ubers using it? would be helpful for looking at something as a team

really amazing idea, is there a way to view medic ubers using it? would be helpful for looking at something as a team
22
#22
7 Frags +
KrakenBabareally amazing idea, is there a way to view medic ubers using it? would be helpful for looking at something as a team

Also in the planning.

[quote=KrakenBaba]really amazing idea, is there a way to view medic ubers using it? would be helpful for looking at something as a team[/quote]

Also in the planning.
23
#23
1 Frags +

i imagine it would be really difficult to implement but a room system would be real neato like tactics.tf but for demos. That way teams don't have to worry about syncing it up and stuff

i imagine it would be really difficult to implement but a room system would be real neato like tactics.tf but for demos. That way teams don't have to worry about syncing it up and stuff
24
#24
7 Frags +

very nice, glad to see you were able to finish this and ship it, unlike me where I just have a bunch of half-finished projects lying around

EDIT: Also protip for your map images from cl_leveloverview (although not sure if they're actually yours or if they're just from the tf2 wiki or something): mess with the arrow keys to move the camera's vertical position upwards so you don't have weird clipping on tops of trees and stuff, you'll end up with a much nicer looking level overview. Takes a bit of fiddling though.

Your current:

https://demos.tf/1292aa9dde1109dbbb1930f9a89f96fc.png


After arrow keys fiddling:

http://i.imgur.com/sQS7y2J.jpg

very nice, glad to see you were able to finish this and ship it, unlike me where I just have a bunch of half-finished projects lying around

EDIT: Also protip for your map images from cl_leveloverview (although not sure if they're actually yours or if they're just from the tf2 wiki or something): mess with the arrow keys to move the camera's vertical position upwards so you don't have weird clipping on tops of trees and stuff, you'll end up with a much nicer looking level overview. Takes a bit of fiddling though.

Your current:
[url=https://demos.tf/1292aa9dde1109dbbb1930f9a89f96fc.png][img]https://demos.tf/1292aa9dde1109dbbb1930f9a89f96fc.png[/img]
[/url]
After arrow keys fiddling:
[url=http://i.imgur.com/sQS7y2J.jpg][img]http://i.imgur.com/sQS7y2J.jpg[/img][/url]
25
#25
36 Frags +

holy fuck nice man

holy fuck nice man
26
#26
5 Frags +
pazermess with the arrow keys to move the camera's vertical position upwards so you don't have weird clipping on tops of trees and stuff, you'll end up with a much nicer looking level overview.

I've tried to make leveloverview images that show the indoor areas of the map since that's more useful this context than showing the roofs of buildings.
This does indeed lead to some weird looking areas, I might look into approving the images by combining images from different heights to get the best balance.

[quote=pazer]mess with the arrow keys to move the camera's vertical position upwards so you don't have weird clipping on tops of trees and stuff, you'll end up with a much nicer looking level overview.[/quote]

I've tried to make leveloverview images that show the indoor areas of the map since that's more useful this context than showing the roofs of buildings.
This does indeed lead to some weird looking areas, I might look into approving the images by combining images from different heights to get the best balance.
27
#27
1 Frags +

I'm viewing this demo of a Highlander scrim in the player- why doesn't it show all players at once?

https://demos.tf/viewer/55890#25

it takes a long time for every player to spawn and have their icons shown on the map. this is a problem because it doesn't allow one to see, say, medic positioning, in this demo until very late in the proceedings.

That being said, though, this is an amazing tool you've created for the Comp community. I can't wait to see how it develops!!

I'm viewing this demo of a Highlander scrim in the player- why doesn't it show all players at once?

https://demos.tf/viewer/55890#25

it takes a long time for every player to spawn and have their icons shown on the map. this is a problem because it doesn't allow one to see, say, medic positioning, in this demo until very late in the proceedings.

That being said, though, this is an amazing tool you've created for the Comp community. I can't wait to see how it develops!!
28
#28
3 Frags +
Contrait takes a long time for every player to spawn and have their icons shown on the map. this is a problem because it doesn't allow one to see, say, medic positioning, in this demo until very late in the proceedings.

Have not seen that issue before, I'll see if I can fix the problem.

[quote=Contra]it takes a long time for every player to spawn and have their icons shown on the map. this is a problem because it doesn't allow one to see, say, medic positioning, in this demo until very late in the proceedings.[/quote]

Have not seen that issue before, I'll see if I can fix the problem.
29
#29
1 Frags +
Icewindsage78The thing where you use your own demos works great with STVs but with a normal demo i get this error
If you can send me a link with the demo file I can see if I can fix the problem

http://www66.zippyshare.com/v/BZqMRGxs/file.html
i tried by dragging it by the way, the same way i did with STVs

[quote=Icewind][quote=sage78]The thing where you use your own demos works great with STVs but with a normal demo i get [url=http://i.imgur.com/1zzVysN.png]this error[/url][/quote]

If you can send me a link with the demo file I can see if I can fix the problem[/quote]
http://www66.zippyshare.com/v/BZqMRGxs/file.html
i tried by dragging it by the way, the same way i did with STVs
30
#30
1 Frags +
IcewindContrait takes a long time for every player to spawn and have their icons shown on the map. this is a problem because it doesn't allow one to see, say, medic positioning, in this demo until very late in the proceedings.
Have not seen that issue before, I'll see if I can fix the problem.

Fortunately, once players spawn, they don't seem to despawn- the second round in the viewer here seems to be completely accurate.

Thank you for looking into this, and thank you again for such a great tool!

Once further developed, this is going to be a really great, convenient way for teams to look over what's going on in their games and iron out issues with pushes and positioning.

[quote=Icewind][quote=Contra]it takes a long time for every player to spawn and have their icons shown on the map. this is a problem because it doesn't allow one to see, say, medic positioning, in this demo until very late in the proceedings.[/quote]

Have not seen that issue before, I'll see if I can fix the problem.[/quote]

Fortunately, once players spawn, they don't seem to despawn- the second round in the viewer here seems to be completely accurate.

Thank you for looking into this, and thank you again for such a great tool!

Once further developed, this is going to be a really great, convenient way for teams to look over what's going on in their games and iron out issues with pushes and positioning.
1 2 3
Please sign in through STEAM to post a comment.