examples/downloader-test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pear Downloader</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div> 文件名： <span id="filename"></span></div>
<div> 进度： <span id="progress">0%</span></div>
<div> 速度： <span id="speed">0KB/s</span></div>
<div> P2P率： <span id="p2pRatio">0%</span></div>
<!-- <script src="https://cdn.jsdelivr.net/npm/pearplayer@latest/dist/pear-player.min.js"></script> -->
<script src="../dist/pear-downloader.js"></script>
<script>
    //第一个参数为video标签的id或class
    var url = 'https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4';
    var token = '';

    var loginXhr = new XMLHttpRequest();
    loginXhr.timeout = 3000;
    loginXhr.ontimeout = function (event) {
        alert("登录超时！");
    }
    var loginData = {
        // 使用时替换为正式的账号密码
        'username': 'test',
        'password': '123456'
    }
    loginXhr.open('POST', 'https://api.webrtc.win/v1/vdn/login');
    loginXhr.send(JSON.stringify(loginData));
    loginXhr.onreadystatechange = function () {
        if (loginXhr.readyState == 4 && loginXhr.status == 200) {
            // 调用接口获取到的token
            token = JSON.parse(loginXhr.responseText).token
            console.log(loginXhr.responseText)
            if (PearDownloader.isWebRTCSupported()) {
                var downloader = new PearDownloader(url, token, {
                    scheduler: 'WebRTCFirst',      //节点调度算法，默认IdleFirst，其它内置调度算法有“WebRTCFirst“和”CloudFirst”
                    auto: true,                    //是否全部下载,默认true
                    useDataChannel: true,          //是否开启data channel,默认true
                    dataChannels: 20,              //创建data channel的最大数量,默认20
                    useTorrent: false,             //是否开启Browser P2P(基于Webtorrent)，默认true
        //        magnetURI: magnetURI,            //可手动传入magnetURI，需先将useTorrent设为true
        //        trackers:["wss://tracker.openwebtorrent.com"],    //可手动传入tracker服务器，需先将useTorrent设为true
        //        sources: [],                    //指定下载源，增加这个字段后pearplayer不会再向后台请求节点，建议下载源多于5个以保证流畅播放
                    useMonitor: true,              //是否开启monitor,会稍微影响性能,默认true
                    maxLoaders: 15,                //push算法中同时下载的节点数量，默认15个
        //            sequencial: true,              //是否有序下载，默认false
                    debug: true,                   //是否开启debug模式，开启后可以在console中查看log，默认false
                    algorithm: 'push'              //下载算法，有‘push’和‘pull’两种，默认‘push’
                });

                downloader.on('begin', onBegin);　　　　　　　　　　　　 //开始下载时触发
                downloader.on('progress', onProgress);               //回调目前的下载进度
                downloader.on('meanspeed', onMeanSpeed);           //平均下载速度
                downloader.on('fogratio', onFogRatio);　　　　　　　　　//fog节点的下载比率（下载的字节数除以总的字节数）
                downloader.on('buffersources', onBufferSources);      //buffer map，记录每个buffer的下载源类型，其中s: server   n: node  d: data channel  b: browser
                downloader.on('done', onDone);　　　　　　　　           //结束下载时触发
                downloader.on('traffic', onTraffic);                  //节点流量统计,每次下载buffer都会触发该事件
                downloader.on('sourcemap', onSourceMap);              //记录每个buffer的下载源类型，其中s: server   n: node  d: data channel  b: browser
                downloader.on('metadata', onMetaData);
            }

            function onBegin(fileLength, chunks) {
                console.log('start downloading buffer by first aid, file length is:' + fileLength/1024/1024 + ' total chunks:' + chunks);

                document.getElementById('filename').innerHTML = downloader.fileName;
        //        var stream = downloader.file.createReadStream({start: 0, end: 156478});
        //
        //        stream.on('data', function (chunk) {
        //
        //            console.log('stream ondata length:'+chunk.length);
        //        });

        //        downloader.dispatcher.select(0, 10086, true, function () {
        //            console.log('stream ondata ');
        //        });

            }

            function onProgress(downloaded) {
                console.log('Progress: ' + (downloaded * 100).toFixed(1) + '%');
                document.getElementById('progress').innerHTML =(downloaded * 100).toFixed(1) + '%';
            }

            function onMeanSpeed(speed) {
                document.getElementById('speed').innerHTML = Math.round(speed) + 'KB/s';
            }


            function onFogRatio(p2pRatio) {
                document.getElementById('p2pRatio').innerHTML = (p2pRatio * 100).toFixed(1) + '%';
            }

            function onDone() {
                //如果需要文件保存到本地，将下面代码解除注释

            downloader.file.getBlobURL(function(error, url) {
                var aTag = document.createElement('a');
                aTag.download = downloader.fileName;
                aTag.href = url;
                aTag.click();
            });
                console.log('finished downloading buffer by first aid');

            }
            function onBufferSources(bufferSources) {            //s: server   n: node  d: data channel  b: browser
                console.log('Current Buffer Sources:' + bufferSources);
                console.log(JSON.stringify(downloader.debugInfo));
            }
            function onTraffic(mac, size, type) {
                console.log('type:'+type+' mac:'+mac+' downloaded:'+size/1024/1024+'MB');
            }

            function onSourceMap(sourceType, index) {
                console.log('Received source type:' + sourceType + ' index:' + index);
            }
            function onMetaData(metadata) {
                console.log('metadata bitrate:'+metadata.bitrate/1024+' KB/s');
            }
        }
        else {
            console.log(loginXhr.statusText);
        }
    }
    
</script>
</body>

</html>