WebTorrent + JavaScript media playersの使用法

#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とは
<img width="236" alt="Screen Shot 2018-03-30 at 9.59.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/5bb54239-cce3-2af3-d810-088a26010310.png">

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プレーヤー
<img width="1039" alt="Screen Shot 2018-03-23 at 11.33.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/f456f3bd-ee62-bf13-ddc9-f2519365ced5.png">

###Implementation・実装

```html
<!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
<img width="331" alt="Screen Shot 2018-04-03 at 16.21.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/c8e145ef-d157-ccfb-828d-50e52f1b04c2.png">

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


<img width="1043" alt="Screen Shot 2018-03-23 at 13.55.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/f9f5b427-8d37-ecdb-5f7e-9f4251720ec7.png">

###Implementation・実装

```html
<!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
![10685859.png](https://qiita-image-store.s3.amazonaws.com/0/229807/76e191e2-77e0-1a20-2a92-87018246601c.png)

**Clappr** is an open sources javascript media player.
**Clappr** はオープンソースのjavascriptメディアプレーヤーです。
If you are interested in **Clappr**, I wrote [a more detailed article](https://qiita.com/mehdi/items/501c4bd3374ebc298029).
**Clappr** に興味がある場合は、[より詳細な記事](https://qiita.com/mehdi/items/501c4bd3374ebc298029)にあります。

<img width="641" alt="Screen Shot 2018-04-05 at 10.50.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/6988504d-333b-babf-17a6-af924bc2e08b.png">


###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で、作ることができます。

```shell
ffmpeg -f lavfi -i color=red -frames:v 200 dummyfile.mp4
```

```html
<!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
![68747470733a2f2f7773342e73696e61696d672e636e2f6c617267652f303036744b665463677931666875303179397579376a3330356b3034733379632e6a7067.jpeg](https://qiita-image-store.s3.amazonaws.com/0/229807/5b713ee6-52a7-ae5e-bde6-cbe2da8b49a0.jpeg)

**Dplayer** is an open sources javascript media player.
**Dplayer** はオープンソースのjavascriptメディアプレーヤーです。
If you are interested in **Dplayer**, I wrote a [more detailed article](https://qiita.com/mehdi/items/274d23d086811e41b7ee).
**Dplayer** に興味がある場合は、[より詳細な記事](https://qiita.com/mehdi/items/274d23d086811e41b7ee)にあります。

<img width="871" alt="Screen Shot 2018-04-06 at 11.11.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/26234464-0fe9-3293-62d1-967c6a78df20.png">


###Implementation・実装

```html
<!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
<img width="212" alt="Screen Shot 2018-04-05 at 11.39.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/e9dda076-2c98-2245-9493-c7ace2a1ae76.png">

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

<img width="1066" alt="Screen Shot 2018-04-05 at 16.51.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/173ea1d3-6802-ae59-3c44-53b602950949.png">


###Implementation・実装

```html
<!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
<img width="251" alt="Screen Shot 2018-04-05 at 11.42.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/46eb34ad-9276-7b27-2379-131bbe3ea134.png">

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

<img width="645" alt="Screen Shot 2018-04-06 at 10.21.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/cf796628-6d2d-6814-c9d8-53ac1d18f90c.png">


```html
<!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/