WebTorrent + JavaScript media playersの使用法

はじめに

こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html

Copyrights of video

Sintel
© copyright Blender Foundation | www.sintel.org

What is WebTorrent ・ WebTorrentとは

WebTorrent is the first torrent client that works in the browser.
WebTorrentは、ブラウザで動作する最初のトレントクライアントです。

BitTorrent (BT) is a communication protocol for peer-to-peer file sharing (“P2P”) which is used to distribute data and electronic files over the Internet.
© Wikipedia

BitTorrent(ビットトレント)は、Peer to Peerを用いたファイル転送用プロトコル及びその通信を行うソフトウェアです。
© Wikipedia

N.B : WebTorrent is based on the WebRTC protocol. Safari does not support WebTorrent yet.
注意 :WebTorrentはWebRTCプロトコルに基づいています。 Safari はまだWebTorrentをサポートしていません。

N.B It takes a few seconds to initialize WebTorrent.
注意 WebTorrentを初期化するには数秒かかります。

Objective・目的

Learning how to use WebTorrent through simple examples.
WebTorrent の簡単な例を学ぶこと。

Default HTML5 player ・ デフォルトのHTML5プレーヤー

Implementation・実装

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebTorrent Demo</title>
  </head>
  <body>
    <video id="video-container" controls="true"></video>
  </body>

  <script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
  <script type="text/javascript">
  var client = new WebTorrent();
  var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4';

  client.add(torrentId, function (torrent) {
    var file = torrent.files.find(function(file) {
       return file.name.endsWith('.mp4');
     });
    var container = document.getElementById('video-container');
    file.renderTo(container);
  });
  </script>
</html>

Videojs

videojs is an open sources javascript media player.
videojs はオープンソースのjavascriptメディアプレーヤーです。

Implementation・実装

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>WebTorrent & videojs demo</title>
</head>

<body>
  <video class="video-js" id="video-container" controls preload="auto" autoplay></video>
</body>

<script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>

<link href="//vjs.zencdn.net/5.19.1/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.19.1/video.js"></script>

<script type="text/javascript">
  var client = new WebTorrent();
  var torrentId =
    'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4';

  var player = videojs("video-container");
  player.fluid(true);

  client.add(torrentId, function(torrent) {
    var file = torrent.files.find(function(file) {
         return file.name.endsWith('.mp4')
       });
    file.renderTo('video#video-container_html5_api', {}, function callback() {
      console.log("ready to play!");
    });
  });
</script>

</html>

Clappr

Clappr is an open sources javascript media player.
Clappr はオープンソースのjavascriptメディアプレーヤーです。
If you are interested in Clappr, I wrote a more detailed article.
Clappr に興味がある場合は、より詳細な記事にあります。

Implementation・実装

Before using WebTorrent with Clappr, you need to initialize the player with a valid video file.
Clapprプレーヤーを初期化するには、有効なビデオファイルが必要です。

If you don’t have a test file, you can generate one with FFMPEG.
ビデオファイルがない場合は、FFMPEGで、作ることができます。

ffmpeg -f lavfi -i color=red -frames:v 200 dummyfile.mp4
<!DOCTYPE html>
<html>


<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
  <!-- Player -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.90/clappr.min.js"></script>
</head>

<body>
  <div id="player">
  </div>
  <script>
    Clappr.Log.setLevel(0);
    var client = new WebTorrent();
    var torrentId =
      'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4';

    client.add(torrentId, function(torrent) {
      var file = torrent.files.find(function(file) {
        return file.name.endsWith('.mp4')
      });

      var player = new Clappr.Player({
        source: "dummyfile.mp4", //You need a valid video file to initialize the player !!!
        preload: 'metadata',
        height: 360,
        width: 640
      });

      player.attachTo("#player");
      file.renderTo('video', {
        autoplay: true,
        muted: true
      }, function callback() {
        console.log("ready to play!");
      });
    });
  </script>
</body>
</html>

Dplayer

Dplayer is an open sources javascript media player.
Dplayer はオープンソースのjavascriptメディアプレーヤーです。
If you are interested in Dplayer, I wrote a more detailed article.
Dplayer に興味がある場合は、より詳細な記事にあります。

Implementation・実装

<!DOCTYPE html>
<html>

<head>
  <title>Dplayer</title>
  <meta charset="UTF-8">
  <!-- Player Style -->
  <link rel=stylesheet type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.css"></link>
  <!-- WebTorrent  -->
  <script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.js"></script>
</head>

<body>
  <div id="dplayer"></div>
  <script>
  var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4';
  const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot:true,
    video: {
        url: `${torrentId}`,
        type: 'customWebTorrent',
        customType: {
            'customWebTorrent': function (video, player) {
                player.container.classList.add('dplayer-loading');
                const client = new WebTorrent();
                const torrentId = video.src;
                client.add(torrentId, (torrent) => {
                    const file = torrent.files.find((file) => file.name.endsWith('.mp4'));
                    file.renderTo(video, {
                        autoplay: player.options.autoplay
                    }, () => {
                        player.container.classList.remove('dplayer-loading');
                    });
                });
            }
        }
    }
});
  </script>
</body>
</html>

Plyr

Plyr is an open sources javascript media player.
Plyr はオープンソースのjavascriptメディアプレーヤーです。

Implementation・実装

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>WebTorrent & Plyr demo</title>
  <!-- WebTorrent -->
  <script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>

  <!-- Plyr-->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/plyr/3.1.0/plyr.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/plyr/3.1.0/plyr.min.js"></script>
</head>

<body>
  <video id="player" controls></video>
</body>

<script type="text/javascript">
  var client = new WebTorrent();
  var torrentId =
    'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent';

  const player = new Plyr('#player', {
    debug: true
  });

  client.add(torrentId, function(torrent) {
    var file = torrent.files.find(function(file) {
      return file.name.endsWith('.mp4')
    });
    file.renderTo('video', {
      autoplay: false,
      muted: true
    }, function callback() {
      console.log("ready to play!");
    });
  });
</script>

</html>

MediaElement

MediaElement is an open sources javascript media player.
MediaElement はオープンソースのjavascriptメディアプレーヤーです。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>WebTorrent & MediaElement</title>
  <!-- WebTorrent -->
  <script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
  <!-- MediaElements---->
  <script src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.js"></script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css" />
</head>

<body>
  <video id="player" width="640" height="360" src="dummyfile.mp4" type="video/mp4">
</body>
<script type="text/javascript">
  var client = new WebTorrent();
  var torrentId =
    'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4';

    client.add(torrentId, function(torrent) {
      var player = new MediaElementPlayer('player', {
        success: function(mediaElement, originalNode) {
          console.log("Player initialised");
        }
      });

      var file = torrent.files.find(function (file) {
          return file.name.endsWith('.mp4')
        })
      file.renderTo('video', {autoplay:false,muted:false,}, function callback() {
        console.log("WebTorrent is rendering");
      });
    });
</script>

</html>

Information sources ・ 情報源

Webtorrent

https://github.com/webtorrent/
https://webtorrent.io/

Magnet link checker

https://checker.openwebtorrent.com/

Bitorrent

https://ja.wikipedia.org/wiki/BitTorrent

Clappr

https://github.com/clappr/clappr
http://clappr.io/

Videojs

https://videojs.com/
https://github.com/videojs

Dplayer

https://github.com/MoePlayer/DPlayer
http://dplayer.js.org/#/

MediaElements

https://www.mediaelementjs.com/
https://github.com/mediaelement/mediaelement-plugins

Plyr

https://github.com/sampotts/plyr
https://plyr.io/

元記事はこちら

WebTorrent + JavaScript media playersの使用法