ParatiiJSDemo/upload.html at master · Paratii-Video/ParatiiJSDemo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
    <!-- <script type="text/javascript" src="/node_modules/paratii-js/dist/paratii.min.js"></script> -->
    <script type="text/javascript" src="/static/paratii.min.js"></script>
  </head>
  <body>
    <a href="/">
      Home
    </a>
    <form id="form">
      <input type="file" id="fileinput" multiple="multiple" />
      <input type="submit" value="upload">
    </form>
    <h1>EventEmitter events:</h1>
    <ul>
      <li>
        <p>Uploader progress: <span id="uploaderProgress">none</span></p>
      </li>
      <li>
        <p>Transcoding started: <span id="transcodingStarted">none</span></p>
      </li>
      <li>
        <p>Transcoding progress: <span id="transcodingProgress">none</span></p>
      </li>
      <li>
        <p>Transcoding error: <span id="transcodingError">none</span></p>
      </li>
      <li>
        <p>Transcoding downsample ready: <span id="transcodingDownsampleReady">none</span></p>
      </li>
      <li>
        <p>Transcoding done: <span id="transcodingDone">none</span></p>
      </li>

    </ul>
    <div id="player"></div>
    <script>
    var fileToUpload
    var resumableFile
    var player

    // Inizialize ParatiiJS with a public publicaddress and a proper privateKey
    // NB Account inizialized just for test, please use a proper wallet to manage publicaddress and privatekey
    var paratii = new paratiijs.Paratii({
      account: {
        address: '0x9e2d04eef5b16CFfB4328Ddd027B55736407B275',
        privateKey: '399b141d0cc2b863b2f514ffe53edc6afc9416d5899da4d9bd2350074c38f1c6'
      },
      "eth": {
        "provider": "https://newchain.paratii.video",
        "registryAddress": "0x0d03db78f5D0a85B1aBB3eAcF77CECe27e6F623F"
      }
    })

    //bind change event to input file
    document.getElementById('fileinput').addEventListener('change', function(){
        fileToUpload = this.files[0];
    }, false);


    document.getElementById('form').addEventListener("submit", function(evt) {
        //prevent default form submit
        evt.preventDefault();
        if(fileToUpload){
          //if a file is defined upload it and trancode
          resumableFile = paratii.ipfs.addAndTranscode(fileToUpload)

          //listening for trasconding:done event
          resumableFile.on('uploader:progress', function(hash, chunkSize, percent){
            console.log('uploader:progress')

            var uploaderProgress = document.getElementById("uploaderProgress")
            uploaderProgress.innerHTML = ""
            console.log(hash)
            console.log(chunkSize)
            console.log(percent)
            uploaderProgress.innerHTML += "hash: "+hash
            uploaderProgress.innerHTML += " chunkSize: "+chunkSize
            uploaderProgress.innerHTML += " percent: "+percent
          });

          resumableFile.on('transcoding:started', function(hash, author){
            console.log('transcoding:started')
            var transcodingStarted = document.getElementById("transcodingStarted")
            transcodingStarted.innerHTML = ""
            console.log(hash)
            console.log(author)
            transcodingStarted.innerHTML += "hash: "+hash
            transcodingStarted.innerHTML += " author: "+author
          });
          resumableFile.on('transcoding:progress', function(hash, size, percent){
            console.log('transcoding:progress')
            var transcodingProgress = document.getElementById("transcodingProgress")
            transcodingProgress.innerHTML = ""

            console.log(hash)
            console.log(size)
            console.log(percent)
            transcodingProgress.innerHTML += "hash: "+hash
            transcodingProgress.innerHTML += " size: "+size
            transcodingProgress.innerHTML += " percent: "+percent
          });
          resumableFile.on('transcoding:error', function(err){
            console.log('transcoding:error')
            var transcodingError = document.getElementById("transcodingError")
            transcodingError.innerHTML = ""
            transcodingError.innerHTML += "error: "+err

            console.log(err)
          });
          resumableFile.on('transcoding:downsample:ready', function(hash, size){
            console.log('transcoding:downsample:ready')
            var transcodingDownsampleReady = document.getElementById("transcodingDownsampleReady")
            transcodingDownsampleReady.innerHTML = ""

            console.log(hash)
            console.log(size)
            transcodingDownsampleReady.innerHTML += "hash: "+hash
            transcodingDownsampleReady.innerHTML += " size: "+size
          });
          resumableFile.on('transcoding:done', function(hash, transcoderResult){
            console.log('transcoding:done')


            var transcodingDone = document.getElementById("transcodingDone")
            transcodingDone.innerHTML = ""
            console.log(hash)
            console.log(transcoderResult)
            transcodingDone.innerHTML += "hash: "+hash
            transcodingDone.innerHTML += " master hash: "+transcoderResult.master.hash
            player = new Clappr.Player(
              {
                source: "https://gateway.paratii.video/ipfs/"+transcoderResult.master.hash+"/master.m3u8",
                parentId: "#player",
                mimeType: 'application/x-mpegURL'
              }
            );
          });
        } else {
          alert("please select a file")
        }
    }, true);
    </script>
  </body>
</html>