XXX

index.html

@@ -52,15 +52,14 @@
     </div>
     <div class="side"></div>
     <div class="wheel">
-    	<div class="top"></div>
-    	<div class="right"></div>
-    	<div class="bottom"></div>
-    	<div class="left"></div>
-    	<div class="down">抓</div>
+    	<button class="top"></button>
+    	<button class="right"></button>
+    	<button class="bottom"></button>
+    	<button class="left"></button>
+    	<button class="down">抓</button>
     </div>
     <div class="play">开始游戏</div>
   </div>
-  <script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.1.js" charset="utf-8"></script>
   <script src="index.js"></script>
 </body>
 

index.js

@@ -4,17 +4,7 @@ var android = require('./libs/android');
 import './less/index.less'
 import toast from 'in-toast'
 import './utils/zepto'
-
-new TcPlayer('lvb', {
-  "m3u8": "http://14246.liveplay.myqcloud.com/live/14246_055dd098ab729831abff0c1f55536403.m3u8    ",
-  "autoplay": true, //iOS下safari浏览器是不开放这个能力的
-  "width": "100%",
-  "height": "100vh",
-  "wording": {
-    2032: "请求视频失败，请检查网络",
-    2048: "请求m3u8文件失败，可能是网络错误或者跨域问题"
-  }
-});
+import send from './utils/send'
 
 var ua = window.navigator.userAgent.toLowerCase();
 
@@ -24,21 +14,47 @@ if (/iphone|ipad|ipod/gi.test(ua)) {
   insert('//sqimg.qq.com/expert_qq/webrtc/1.2/WebRTCAPI.min.js', android);
 }
 
-var exampleSocket = new WebSocket("ws://www.example.com/socketserver")
+var ws = new WebSocket("ws://172.16.80.212:7878")
+
+ws.s = function(msgObj) {
+  ws.send(JSON.stringify(msgObj))
+}
+
+ws.m = function(cmd) {
+  ws.s({
+    head: {
+      act: 5,
+      to: "00-E0-AC-CE-82-22",
+      sign: "6mrutj",
+      from: 1618
+    },
+    body: {
+      cmd: cmd,
+      machineId: "00-E0-AC-CE-82-22#01",
+      strong: 0
+    }
+  })
+}
 
-exampleSocket.onopen = function(event) {
-  exampleSocket.send("Here's some text that the server is urgently awaiting!");
+ws.onopen = function(event) {
+  ws.s({
+    head: {
+      act: 1,
+      sign: "AXHj3q4XdOv84nVH0qPiPCf6FyB47NpA",
+      from: "9528"
+    }
+  });
+  console.log('连接成功')
 };
 
-exampleSocket.onmessage = function(event) {
-  console.log(event.data);
+ws.onmessage = function(event) {
+  console.log(event);
 }
 
 //ui操作
 var btnPlay = $('.play'),
   wheel = $('.wheel'),
   btnDown = $('.down'),
-  vLvb = $('#lvb'),
   front = $('.front').eq(0),
   front_width = front.clientWidth,
   front_height = front.clientHeight
@@ -47,38 +63,57 @@ var btnPlay = $('.play'),
 
 btnPlay.on('click', start)
 btnDown.on('click', () => {
-  toast('1.2秒后结束游戏...')
-  setTimeout(end, 1200)
+  ws.m(10112)
+  // toast('1.2秒后结束游戏...')
+  setTimeout(end, 10000)
 })
 
 function start() {
+  ws.m(10100)
+  // send({
+  //   method: 'post',
+  //   url: 'http://172.16.80.212:7889/order/join',
+  //   headers: {
+  //     id: 1608,
+  //     accessToken: 'test',
+  //   },
+  //   params: {
+  //     catcherId: 59
+  //   }
+  // }).then(r => {
+  //   console.log(r)
+  // }).catch(e => {
+  //   console.log(e)
+  // })
   wheel.show()
   btnPlay.hide()
-  vLvb.hide()
 }
 
 function end() {
   wheel.hide()
   btnPlay.show()
-  vLvb.show()
 }
 
-$('.top').on('click', function() {
-
+$('.top').on('touchstart', function() {
+  ws.m(10104)
 })
 
-$('.right').on('click', function() {
-
+$('.bottom').on('touchstart', function() {
+  ws.m(10108)
 })
 
-$('.bottom').on('click', function() {
-
+$('.left').on('touchstart', function() {
+  ws.m(10102)
 })
 
-$('.left').on('click', function() {
-
+$('.right').on('touchstart', function() {
+  ws.m(10101)
 })
 
-$('.down').on('click', function() {
+$('.down').on('touchstart', function() {
+  ws.m(10112)
+})
 
+$('.top,.right,.bottom,.left,.down').on('touchend', function() {
+  ws.m(10116)
 })
\ No newline at end of file

less/index.less

@@ -6,8 +6,14 @@
   outline: 0;
 }
 
+a,
+button,
+input {
+  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
+}
+
 @color: rgba(250, 206, 1, .9);
-@front_width: 450;
+@front_width: 600;
 @front_height: @front_width*4/3;
 
 body {
@@ -46,8 +52,9 @@ body {
   left: 0;
   bottom: 1px;
 
-  >div {
+  >button {
     .size(0, 0);
+    background-color: transparent;
     position: absolute;
     @width: 50;
     &.top {
@@ -110,14 +117,16 @@ canvas,
 #lvb,
 #lvb video,
 .front video {
-  width: 100%;
-  height: 100%;
-  // .pos(0, 0);
+  width: @front_height*1px !important;
+  height: @front_width*1px !important;
+  .pos(0, 0);
 }
 
 #lvb video,
-.front video {
-  transform: rotate(-270deg)
+.front video,
+canvas {
+  @offset: @front_width*1/6;
+  transform: rotate(-270deg) translate(@offset*1px, @offset*1px);
 }
 
 #lvb {

libs/android.js

@@ -35,7 +35,6 @@ module.exports = function() {
 
     },
     onRemoteStreamAdd: function(stream, videoId) {
-      console.log(stream, videoId)
       var videoElement = document.getElementById("remoteVideo");
       videoElement.srcObject = stream;
     },
@@ -50,14 +49,14 @@ module.exports = function() {
       this.onRemoteStreamAdd(stream, videoId, openId);
     },
     onKickout: function() {
-      alert("其他地方登录，被T下线")
+      console.error("其他地方登录，被T下线")
     },
     onWebSocketClose: function() {
       //断开后的处理
       WebRTCAPI.quit();
     },
     onRelayTimeout: function(e) {
-      console.log(e)
+      // console.log(e)
     },
     onIceConnectionClose: function() {
 

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "autoprefixer": "^7.2.5",
+    "axios": "^0.17.1",
     "in-toast": "^0.1.2",
     "postcss-modules": "^1.1.0",
     "postcss-px2rem": "^0.3.0"

utils/send.js

+import axios from 'axios'
+
+let send = (opts) => {
+  return new Promise((resolve, reject) => {
+    axios(opts).then(res => {
+      if (res.success) resolve(res.data)
+      else reject(res)
+    }).catch(err => reject(err))
+  })
+}
+
+export default send
\ No newline at end of file

yarn.lock

@@ -78,6 +78,13 @@ aws4@^1.2.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axios@^0.17.1:
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.17.1.tgz#2d8e3e5d0bdbd7327f91bc814f5c57660f81824d"
+  dependencies:
+    follow-redirects "^1.2.5"
+    is-buffer "^1.1.5"
+
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -224,6 +231,12 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+debug@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -268,6 +281,12 @@ fastparse@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
 
+follow-redirects@^1.2.5:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.4.1.tgz#d8120f4518190f55aac65bb6fc7b85fcd666d6aa"
+  dependencies:
+    debug "^3.1.0"
+
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@@ -400,6 +419,10 @@ inherits@2, inherits@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
 
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -509,6 +532,10 @@ mkdirp@^0.5.0:
   dependencies:
     minimist "0.0.8"
 
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
 natives@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/natives/-/natives-1.1.1.tgz#011acce1f7cbd87f7ba6b3093d6cd9392be1c574"