HLViewer is a simple to use javascript library for viewing maps
and playing replays of GoldSrc engine based games entirely in browser.
You can check out the live demo here
Download the library from dist directory and include it in your html.
<script src="your/path/to/hlviewer.min.js"></script>
Create a target element where viewer will later be created.
Width and height MUST be set.
<div id="hlv-target" style="width:800px; height:600px"></div>
This code will initialize the state.
var hlv = HLViewer.init('#hlv-target', {
// paths where files are stored on your server
paths: {
base: '/',
replays: 'res/replays',
maps: 'res/maps',
wads: 'res/wads',
skies: 'res/skies',
sounds: 'res/sounds'
}
})
This will load both the replay and the map of that replay (and wad files).
hlv.load('some_file.dem')
This will only load the map (and wad files).
hlv.load('some_file.bsp')