tangdehang
/
android-cloud-H5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751
							<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="x5-orientation" content="portrait" />
  <meta name="screen-orientation" content="portrait" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <!-- 删除苹果默认的工具栏和菜单栏 -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <!-- 设置苹果工具栏颜 -->
  <meta name="format-detection" content="telphone=no, email=no">
  <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
  <!-- 启用360浏览器的极速模(webkit) -->
  <meta name="renderer" content="webkit">
  <!-- 避免IE使用兼容模式 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑 -->
  <meta name="HandheldFriendly" content="true">
  <!-- 微软的老式浏览 -->
  <meta name="MobileOptimized" content="320">
  <!-- 不能旋转，问题出在这 -->
  <!-- UC强制全屏 -->
  <meta name="full-screen" content="yes">
  <!-- QQ强制全屏 -->
  <meta name="x5-fullscreen" content="true">
  <!-- UC应用模式 -->
  <meta name="browsermode" content="application">
  <!-- QQ应用模式 -->
  <meta name="x5-page-mode" content="app">
  <!-- windows phone 点击无高 -->
  <meta name="msapplication-tap-highlight" content="no">
  <link rel="stylesheet" type="text/css" href="css/WXtrialInterface.css" />
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css" />
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css" />
</head>

<body class="scroll h-player" style="overscroll-behavior: contain;">
  <div class="container" id="player">
    <div class="muted" id="btnMuted">
      <div class="control-right-img" data-id="1">
        <img src="../static/img/xuanfu_icon.png">
      </div>
    </div>
    <div id="wine">
      <div id="box">
        <canvas id="playCanvas" width="450" height="800"></canvas>
      </div>
    </div>
    <div class="leftmains">
      <div class="PictureQualityMain">
        <div class="PictureQuality " data-id="1803000">高清</div>
        <div class="PictureQuality avit" data-id="1243000">标清</div>
        <div class="PictureQuality" data-id="400000">极速</div>
        <div class="PictureQuality" data-id="200">自动</div>
      </div>
      <div class="operation">
        <div class="upload" id="showsuss" data-text="uploads">
          <img src="../static/img/wx/shangchuan_icon.png">
          <div>上传</div>
        </div>
        <div class="upload" onclick="showShearPlate()" data-text="Shearplate">
          <img src="../static/img/wx/jianqieban_icon.png">
          <div>剪贴板</div>
        </div>
        <div class="upload" id="upload" data-text="Signout">
          <img src="../static/img/wx/tuichu_icon.png">
          <div>退出</div>
        </div>
      </div>
    </div>
    <div class="bottommains">
      <div class="botmat1">
        <div class="botmat1img" data-text="gengduo">
          <img src="../static/img/wx/gengduo_icon.png">
        </div>
      </div>
      <div class="botmat1">
        <div class="botmat1img" data-text="home">
          <img src="../static/img/wx/home_icon.png">
        </div>
      </div>
      <div class="botmat1">
        <div class="botmat1img" data-text="return">
          <img src="../static/img/wx/fanhui_icon.png">
        </div>
      </div>
    </div>
    <img class="loading loading_sceen_pic" />
  </div>
  <div class="mask">
    <div class="box-shear-plate"></div>
    <img class="close" onclick="handleClose()" src="img/guanbi_icon@2x.png" alt="">
  </div>
  <div class="weui-mask_transparent"></div>
  <div class="weui-toast weui_loading_toast weui-toast--visible">
    <div class="weui_loading"><i class="weui-loading weui-icon_toast"></i></div>
    <p class="weui-toast_content">数据加载中</p>
  </div>
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
  <!-- ffm软解 -->
  <script type="text/javascript" src="helper.js"></script>
  <script type="text/javascript" src="jquery-weui.min.js"></script>
  <script type="text/javascript" src="pcm-player.js"></script>
  <script type="text/javascript" src="webgl.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
  <script type="text/javascript" src="WXdraw.js?id=105"></script>
  <script type="text/javascript">
    $(function () {
      //手指滑动多少距离就认为是滑成功
      //这个值不能太大，否则影响斜着滑动时，垂直滑动的流畅性，也不能太小，太灵敏也不好
      var diffXDistance = 50;

      //当前滑动的对象
      var currentObject;
      //上一次滑动的对象
      var lastObject;

      //是否可以左右滑动，在上下滑的时候禁止左右滑
      var canSlide = true;
      //用于记录按下的点
      var startPoint;


      $(".slide-content").css({
        width: $(".slide-wrapper").width()
      });

      $(".slide-scroll").css({
        width: $(".slide-wrapper").width() + $(".slide-content-button").width()
      })
        .on('touchstart', function (e) {
          currentObject = this;

          startPoint = {
            x: e.originalEvent.changedTouches[0].pageX,
            y: e.originalEvent.changedTouches[0].pageY
          };
        })
        .on('touchmove', function (e) {
          //如果是左右滑动，就禁止上下的滑动
          //如果是上下的滑动，就禁止左右滑动
          if (Math.abs(e.originalEvent.changedTouches[0].pageX - startPoint.x) > Math.abs(e.originalEvent.changedTouches[0].pageY - startPoint.y)) {
            event.preventDefault();
          } else {
            canSlide = false;
          }
        })
        .on('touchend', function (e) {
          //如果是上下滑动，这里就直接返回了
          if (!canSlide) {
            canSlide = true;
            return true;
          }

          //点击除当前左滑对象之外的任意其他位置
          if (lastObject && currentObject != lastObject) {
            //右滑→
            $(lastObject).removeClass("animate-slide");

            //清空上一个左滑的对象
            lastObject = undefined;
          }

          var diffX = e.originalEvent.changedTouches[0].pageX - startPoint.x;
          if (diffX < -diffXDistance) {
            //左滑←
            $(currentObject).addClass("animate-slide");
            if (lastObject && lastObject != currentObject) {
              //右滑→
              $(lastObject).removeClass("animate-slide");
            }
            //记录上一个左滑的对象
            lastObject = currentObject;
          } else if (diffX >= diffXDistance) {
            if (currentObject == lastObject) {
              //右滑→
              $(currentObject).removeClass("animate-slide");
              //清空上一个左滑的对象
              lastObject = undefined;
            }
          }
        });
    });
  </script>
  <script>
    var topwinHeight = window.screen.height - window.innerHeight + 30; //计算title top 头部
    var renderCount = 0
    $('#wine').css({
      "width": window.screen.width,
      "height": window.screen.height - topwinHeight - 20,
      "position": "absolute"
    })
    $('.loading').css({
      "width": window.screen.width,
      "height": window.screen.height - topwinHeight - 20
    });
    var winese = document.createElement("wine");
    wine.style.top = "-" + winese + 'px';
    var isAudioPlay = false;
    $.alert({
      title: '提示',
      text: '开始使用云手机',
      onOK: function () {
        isAudioPlay = true;
      }
    });
    var url = window.location.href;
    url = url.split('/');
    var baseUrl = url[0] + '//' + url[2];
    var form = {};
    var parameters = GetRequest();
    form.userCardId = parameters['userCardId'];
    form.token = parameters['token'];
    var orientation = 0; //0 竖屏，1横屏
    function array_unique(arr) {
      return arr.filter(function (e, i) {
        return arr.indexOf(e) === i;
      })
    }
    var cutList = [];
    let timer, isFlag = true;
    function showShearPlate() {
      stopManyClick(() => {
        $('.box-shear-plate').empty();
        $.ajax({
          url: baseUrl + "/api/public/v5/shear/content",
          headers: {
            'Authorization': form.token
          },
          type: 'get',
          dataType: 'json',
          success: function (res) {
            if (res.status === 0) {
              if (res.data.length) {
                cutList = array_unique(res.data)
                var str = '<div class="title">剪贴板<div onclick="handleClear()" class="btn-clear">清空</div></div><div class="slide-wrapper-content">'
                cutList.forEach(function (item) {
                  str += "<div class='slide-wrapper'><div class='slide-scroll animate-slide-start'><div class='slide-content'><div onclick='handleCopy(\"" + item.content + "\")'>" + item.content + "</div></div><div class='slide-content-button'><button onclick='handleDelete(" + item.id + ")'>删除</button></div></div></div>"
                })
                str += '</div>'
                $('.box-shear-plate').append(str);
              } else {
                $('.box-shear-plate').append('<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>')

              }
              $('.mask').show();
              initSlider();
            } else {
              $('.box-shear-plate').append('<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>')
              $('.mask').show();
            }
          }
        })
      })
    }
    //防止提示一秒内重复显示
    function stopManyClick(fn) {
      if (isFlag) {
        fn();
      }
      isFlag = false;
      if (timer) { clearTimeout(timer); }
      timer = setTimeout(() => { isFlag = true }, 1500);
    }
    // 清空剪贴板
    function handleClear() {
      var ids = '';
      cutList.forEach(function (item) {
        ids += 'ids=' + item.id + '&'
      });
      ids = ids.substring(0, ids.lastIndexOf('&'));
      $.confirm("确定清空剪贴板？", function () {
        $.ajax({
          url: baseUrl + "/api/public/v5/shear/content?" + ids,
          headers: {
            'Authorization': form.token
          },
          type: 'DELETE',
          dataType: 'json',
          success: function (res) {
            if (res.status === 0) {
              showShearPlate();
            } else {
              $.toast(res.msg, "text");
            }
          }
        })
      });
    }
    function handleCopy(content) {
      var cutting = {
        "type": "cutting",
        "data": {
          "str": content
        }
      }
      wsss.send(JSON.stringify(cutting));
    }
    // 删除剪贴板
    function handleDelete(id) {
      $.ajax({
        url: baseUrl + "/api/public/v5/shear/content?ids=" + id,
        headers: {
          'Authorization': form.token
        },
        type: 'DELETE',
        dataType: 'json',
        success: function (res) {
          if (res.status === 0) {
            showShearPlate();
          } else {
            $.toast(res.msg, "text");
          }
        }
      })
    }
    function initSlider() {
      //手指滑动多少距离就认为是滑成功
      //这个值不能太大，否则影响斜着滑动时，垂直滑动的流畅性，也不能太小，太灵敏也不好
      var diffXDistance = 50;
      //当前滑动的对象
      var currentObject;
      //上一次滑动的对象
      var lastObject;
      //是否可以左右滑动，在上下滑的时候禁止左右滑
      var canSlide = true;
      //用于记录按下的点
      var startPoint;
      $(".slide-content").css({
        width: $(".slide-wrapper").width()
      });
      document.body.removeEventListener('touchmove', function (e) {
        e.preventDefault()
      }, {
        passive: false
      })
      $(".slide-scroll").css({
        width: $(".slide-wrapper").width() + $(".slide-content-button").width()
      })
        .on('touchstart', function (e) {
          currentObject = this;

          startPoint = {
            x: e.originalEvent.changedTouches[0].pageX,
            y: e.originalEvent.changedTouches[0].pageY
          };
        })
        .on('touchmove', function (e) {
          //如果是左右滑动，就禁止上下的滑动
          //如果是上下的滑动，就禁止左右滑动
          if (Math.abs(e.originalEvent.changedTouches[0].pageX - startPoint.x) > Math.abs(e.originalEvent.changedTouches[0].pageY - startPoint.y)) {
            event.preventDefault();
          } else {
            canSlide = false;
          }
        })
        .on('touchend', function (e) {
          //如果是上下滑动，这里就直接返回了
          if (!canSlide) {
            canSlide = true;
            return true;
          }

          //点击除当前左滑对象之外的任意其他位置
          if (lastObject && currentObject != lastObject) {
            //右滑→
            $(lastObject).removeClass("animate-slide");

            //清空上一个左滑的对象
            lastObject = undefined;
          }
          var diffX = e.originalEvent.changedTouches[0].pageX - startPoint.x;
          if (diffX < -diffXDistance) {
            //左滑←
            $(currentObject).addClass("animate-slide");
            if (lastObject && lastObject != currentObject) {
              //右滑→
              $(lastObject).removeClass("animate-slide");
            }
            //记录上一个左滑的对象
            lastObject = currentObject;
          } else if (diffX >= diffXDistance) {
            if (currentObject == lastObject) {
              //右滑→
              $(currentObject).removeClass("animate-slide");
              //清空上一个左滑的对象
              lastObject = undefined;
            }
          }
        });
    }

    // 初始化一下就可以了，
    // var vConsole = new VConsole();

    var btnMuted = document.querySelector("#btnMuted");
    btnMuted && (function () {
      var setHistory = function (left, top) {
        try {
          localStorage.setItem("muted-btn-loc", JSON.stringify({
            left: left,
            top: top
          }));
        } catch (ex) { }
      };
      var getHistory = function () {
        try {
          var value = localStorage.getItem("muted-btn-loc");
          if (!value) return null;
          value = JSON.parse(value);
          if (!value) return null;
          return value;
        } catch (ex) {
          return null
        }
      };
      var fixLoc = function (loc) {
        var rect = btnMuted.getBoundingClientRect();
        rect = {
          top: rect.top,
          left: rect.left,
          width: rect.width,
          height: rect.height
        }; // 部分低版本浏览器,该属性为只读
        if (loc) {
          rect.left = loc.left;
          rect.top = loc.top;
        }
        var minX = 0;
        var minY = 0;
        var docRect = document.documentElement.getBoundingClientRect();
        var maxY = docRect.height - rect.height;
        var maxX = docRect.width - rect.width;
        var left = rect.left;
        var top = rect.top;
        left = Math.min(left, maxX);
        left = Math.max(left, minX);
        top = Math.min(top, maxY);
        top = Math.max(top, minY);
        if (loc || top !== rect.top || left !== rect.left) {
          btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
        }
      }
      window.addEventListener("resize", function () {
        fixLoc();
      });
      var touchPoint = {
        pageY: 0,
        pageX: 0
      };
      var currentLoc = {
        top: 0,
        left: 0,
        curTop: 0,
        curLeft: 0
      };
      var toMove = false;
      var touchmove = function (e) {
        e.preventDefault();
        var point = e.changedTouches[0];
        var top = -touchPoint.pageY + point.pageY;
        var left = -touchPoint.pageX + point.pageX;
        if (toMove) {
          top += currentLoc.top;
          left += currentLoc.left;
          currentLoc.curLeft = left;
          currentLoc.curTop = top;
          btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
        } else {
          if (Math.abs(top) >= 5 || Math.abs(left) >= 5) {
            toMove = true;
          }
        }

      };
      var touchend = function () {
        window.removeEventListener("touchmove", touchmove, {
          passive: false
        });
        window.removeEventListener("touchend", touchend, {
          passive: false
        });

        if (toMove) {
          setHistory(currentLoc.curLeft, currentLoc.curTop);
          fixLoc();
        } else {
          //按点击处理
          var set = $('.control-right-img').attr("data-id")
          if (set == '1') {
            $('.control-right-img').attr({
              "data-id": "2"
            })
            $(".leftmains").css({
              "right": "0rem"
            })
          } else {
            $('.control-right-img').attr({
              "data-id": "1"
            })

            $(".leftmains").css({
              "right": "-4rem"
            })
          }
        }
      }

      btnMuted.addEventListener("touchstart", function (e) {
        e.preventDefault();
        toMove = false;
        var point = e.changedTouches[0];
        touchPoint.pageX = point.pageX;
        touchPoint.pageY = point.pageY;
        var rect = e.target.getBoundingClientRect();
        currentLoc.top = rect.top;
        currentLoc.left = rect.left;
        window.addEventListener("touchmove", touchmove, {
          passive: false
        });
        window.addEventListener("touchend", touchend, {
          passive: false
        });
      }, {
        passive: false
      });
      var history = getHistory();
      if (history) {
        fixLoc(history);
      }
      btnMuted.classList.remove("hide");
    })();

    $(".boximg").on("click", function () {
      $(".mainbox").css({
        "display": "none"
      })
    })

    // 剪贴板
    $(".sboxbu").on("click", function () {
      $(".sbox").css({
        "display": "none"
      })
    })
    // 剪贴板
    $(".uploadss").on("click", function () {
      $(".sbox").css({
        "display": "none"
      })
    })

    $("#upload").on("click", function () {
      decodeWoker.postMessage('close');
      decodeWoker.terminate();
      webSocketWorker.terminate();
      wx.miniProgram.switchTab({
        url: '/pages/home/home'
      })
    })

    function selectText(x) {
      if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(x);
        range.select();
      } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        selection.removeAllRanges();
        range.selectNodeContents(x);
        selection.addRange(range);
      }
    }

    function handleClose() {
      $('.mask').hide();
    }

    function cp(x) {
      $(".mainbox").css({
        "display": "none"
      })
      $(".sbox").css({
        "display": "block"
      })
      selectText(x);
      document.execCommand("copy");

    }
    var decodeCount = 1;
    var isFinish = false;
    var player = new PCMPlayer({
      encoding: '16bitInt',
      channels: 2,
      sampleRate: 44100,
      flushingTime: 22,
      debug: false
    });

    Module = {};
    Module.onRuntimeInitialized = function () {
      isFinish = true;
    }

    function decodeAAC(data) {
      var retPtr = Module._malloc(4 * 5 * 1024); //接收的数据
      var inputPtr = Module._malloc(4 * data.length); //输入数据

      for (var i = 0; i < data.length; i++) {
        Module.HEAPU8[(inputPtr) + i] = data[i]; //转换为堆数据
      }

      var pcmLen = Module._feedData(retPtr, inputPtr, data.length);

      if (pcmLen >= 0) {
        var pcmData = new Uint8Array(pcmLen);
        for (var i = 0; i < pcmLen; i++) {
          pcmData[i] = Module.HEAPU8[(retPtr) + i]
        }

        player.feed(pcmData);
      }
      decodeCount++;
      Module._free(inputPtr);
      Module._free(retPtr);
    }
    var decodeWoker = new Worker('decoder.js');
    var myVideo = document.getElementById("playCanvas");
    decodeWoker.onmessage = function (event) {
      var objData = event.data;

      switch (objData.cmd) {
        case 0:
          break;
        case 1:
          if (renderCount++ < 4 || !isAudioPlay) {
            return
          }
          webglPlayer.renderFrame(objData.data, 720, 1280, 720 * 1280, (720 / 2) * (1280 / 2));
          $('.weui-mask_transparent').hide()
          $('.weui-toast').hide()
          $('.loading').hide()
      }
    }

    var isFinish = false;
    var webglPlayer = new WebGLPlayer(myVideo, {
      preserveDrawingBuffer: false
    });

    function GetRequest() {
      var url = location.search; // 获取url中"?"符后的字串
      var obj = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          obj[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
        }
      }
      return obj;
    }
    var ip = parameters["ip"];
    var appletPushAddress = parameters["appletPushAddress"];
    var token = parameters["cardToken"];
    var webSocketWorker = new Worker('websocket.js?ip=' + ip + '&appletPushAddress=' + appletPushAddress + '&token=' + token);

    webSocketWorker.onmessage = function (event) {
      var input = event.data;
      if (input[0] == 0xff && isAudioPlay && renderCount >= 4) {
        decodeAAC(input);
      }
      if (input[0] == 0 && input[1] == 0 && input[2] == 0 && input[3] == 1) {
        decodeWoker.postMessage(event.data);
      }
      if (input[0] == 0x68) {
        if (input[23] == 0x5c) {
          if (CheckVerifyCode(input)) {
            webSocketWorker.postMessage(ConfigChannel('RK3923C1201900139'));
            var checkBuffer = GetScreenState();
            webSocketWorker.postMessage(checkBuffer);
          }
          else {
            $.toast("画面异常,请重新进入", "text");
            decodeWoker.postMessage('close');
            decodeWoker.terminate();
            webSocketWorker.terminate();
            wx.miniProgram.switchTab({
              url: '/pages/home/home'
            });
          }
        }
        if (input[23] == 0x05) { //横竖屏标识
          var state = CheckScreenDirection(input.slice(24, 24 + 8));

          if (state == 1) {
            console.log("安卓卡此时竖屏");
            //竖屏处理
            resolving = 1;
          } else {
            console.log("安卓卡此时横屏");
            //横屏处理
            resolving = 0;
          }
        }
        if (input[23] == 0x0b) {
          console.log("多端登陆");
        }
      }
      if (event.data === 'close') {
        $.toast("画面异常,请重新进入", "text");
        decodeWoker.postMessage('close');
        decodeWoker.terminate();
        webSocketWorker.terminate();
        wx.miniProgram.switchTab({
          url: '/pages/home/home'
        })
      }
    }

    function Close() { // webworker 关闭,清理
      var cmd = {
        cmd: 0
      };
      decodeWoker.postMessage(cmd);
      decodeWoker.terminate();
      webSocketWorker.postMessage(cmd);
      webSocketWorker.terminate();
    }

    var isDrag = false;

    myVideo.onkeydown = function (event) {
      ExexuteKeyDown(e.keyCode);
    }
    window.onbeforeunload = function () {
      wsss.close();
      decodeWoker.postMessage('close');
      decodeWoker.terminate();
      webSocketWorker.terminate();
    }
  </script>
  <script type="text/javascript" src="aac.js"></script>
</body>

</html>