Webtorrent client/player for Ionic 4

Question

I would like to implement Webtorrent into a Ionic 4 app. I already managed to play .m3u8 streams flawlessly. All i need now its the webtorrent part which I'm not too familiar with.

I'm using <video src='url.m3u8'></video> tag for .m3u8 streams, and it seems to work fine in Ionic 4. I want to be able to download torrent video files and stream/play the video on Ionic either using <video> tag or video-player component.

Please I need some help. I've been trying everything that I know and that I can find online, but so far nothing has helped. Any Help would be appreciated.

Thank you in advance.

edited: Sun, May 26th, 2019 at 7:59:02 PM

This is the error I get with the implementation I'm trying. Anyone has any idea what might be the problem.

Here's a snapshot of my code.

Picture Here

tell me what you guys think.

Thank you in advance.

Answer 1

Ok, after a few days trying different methods, I found the Solution. Really easy btw.

here's a picture

here's the code i used.

    import { WebTorrent } from 'webtorrent';

    declare var WebTorrent: WebTorrent;

        ....

    playVideo() {

    const client = WebTorrent();
    const magnetURL = 'https://webtorrent.io/torrents/sintel.torrent';

    client.add(magnetURL, function (torrent) {
      // document.getElementById('hash').textContent = 'Client downloading: ' + torrent.infoHash;
      torrent.files.forEach(function (file) {
        torrent.on('download', function (bytes) {
          document.getElementById('download').textContent = 'just downloaded: ' + bytesToSize(bytes);
          document.getElementById('tdownload').textContent = 'total downloaded: ' + bytesToSize(torrent.downloaded);
          document.getElementById('sdownload').textContent = 'download speed: ' + bytesToSize(torrent.downloadSpeed);
          document.getElementById('pdownload').textContent = toPercentage(torrent.progress);
        });
        torrent.files.find(function (file) {
          return file.name.endsWith('.mp4') || file.name.endsWith('.avi') || file.name.endsWith('.mkv') || file.name.endsWith('.mpeg');
        });
        file.renderTo('#video', function (err, element) {
          presentToast(magnetURL);
        });
      });
    });
    function presentToast(text: string) {
      this.presentToast(text);
    }
    function bytesToSize(bytes) {
      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
      if (bytes === 0) { return '0 Bytes'; }
      const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
      return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
    }

    function toPercentage(dec) {
      dec = dec.toString();
      const a = dec.split('.');
      dec = a[1];
      dec = dec.substr(0, 4);
      return dec = (dec / 100) + '%';
    }
  }

I have 2 issues with it though. I can only play the sintel.mp4 once it's reached 99.89%, but I want to be able to stream it while its downloading. My second problem is that I can only download and play the Sintel.torrent. I tried using other magnet links and it doesn't do anything. I'm guessing it has something to do with the way the magnet url is generated.