Ionic 4 的 Webtorrent 客户端/播放器

Posted

技术标签:

【中文标题】Ionic 4 的 Webtorrent 客户端/播放器【英文标题】:Webtorrent client/player for Ionic 4 【发布时间】:2019-05-25 22:18:24 【问题描述】:

我想在 Ionic 4 应用中实现 Webtorrent。我已经设法完美地播放 .m3u8 流。我现在需要的只是我不太熟悉的 webtorrent 部分。

我正在为 .m3u8 流使用<video src='url.m3u8'></video> 标签,它似乎在 Ionic 4 中运行良好。我希望能够下载 torrent 视频文件并在其上流式传输/播放视频Ionic 使用 <video> 标签或 video-player 组件。

我需要一些帮助。我一直在尝试所有我知道的和可以在网上找到的东西,但到目前为止没有任何帮助。任何帮助将不胜感激。

提前致谢。

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

这是我在尝试实现时遇到的错误。任何人都知道可能是什么问题。

这是我的代码的快照。

Picture Here

告诉我你们的想法。

提前致谢。

【问题讨论】:

【参考方案1】:

好的,经过几天尝试不同的方法,我找到了解决方案。顺便说一句,真的很容易。

这里有一个 picture

这是我使用的代码。

    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) + '%';
    
  

我有两个问题。我只能在sintel.mp4 达到99.89% 时播放它,但我希望能够在下载时对其进行流式传输。 我的第二个问题是我只能下载和播放 Sintel.torrent。我尝试使用其他磁力链接,但它没有做任何事情。我猜这与磁铁网址的生成方式有关。

【讨论】:

对于第二个问题,使用instant.io 磁铁对其进行测试,因为 webtorrent 使用带有 webtorrent 跟踪器的种子。 .

以上是关于Ionic 4 的 Webtorrent 客户端/播放器的主要内容,如果未能解决你的问题,请参考以下文章

Webtorrent - 如何从 .t​​orrent 文件的预定义 URL 流式传输

浅谈对ionic项目的理解

动画启动画面 - Ionic 4.0

Ionic 4 & Firebase (FCM) - 如何分组推送通知

如何在 Ionic 4 中通过 Airplay 在 iPad 和电视上播放视频

Ionic 3 - Laravel - 不向客户端发送允许 CORS 的标头