freedom/layouts/shortcodes/webtorrent-video.html

<style>
    #wtmedia{
        width:100%;
    }
    #wtmedia video{
        width:100%;
    }
</style>
<script src="/webtorrent.js"></script>
<div class="webtorrent">
    <noscript>
        <video controls>
            <source src={{.Get "source"}}>
        </video>
    </noscript>
    <div id="wtmedia">
    </div>
    <div>
        <span id="torrent-info">Waiting for peers.</span>
        <span id="torrent-peers"></span>
        <span id="torrent-progress"></span>
    </div>
</div>
<script>
    function updateData(torrent) {
        if (torrent.numPeers > 0) {
            document.getElementById('torrent-info').innerHTML="This video is being served with webtorrent";
            document.getElementById('torrent-peers').innerHTML="Peers:"+torrent.numPeers;
        }
    }    
    const client = new WebTorrent();
    const magnetURI = "{{.Get "magnet"}}";
    torrent = client.add(magnetURI, function (torrent) {
        // Got torrent metadata!
        torrent.addWebSeed("{{.Get "source"}}");
        console.log("Torrent Peers: "+torrent.numPeers);
        console.log('Client is downloading:', torrent.infoHash);
        torrent.files.forEach(function (file) {
            // Display the file by appending it to the DOM. Supports video, audio, images, and
            // more. Specify a container element (CSS selector or reference to DOM node).
            file.appendTo('#wtmedia');
        })
        
    });
    window.setInterval(updateData,250,torrent);
</script>