跑通安卓

index.js

@@ -3,6 +3,7 @@ var ios = require('./libs/ios');
 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    ",
@@ -23,33 +24,61 @@ if (/iphone|ipad|ipod/gi.test(ua)) {
   insert('//sqimg.qq.com/expert_qq/webrtc/1.2/WebRTCAPI.min.js', android);
 }
 
-var btnPlay = document.querySelector('.play')
-var wheel = document.querySelector('.wheel')
-var btnDown = document.querySelector('.down')
-var vLvb = document.querySelector('#lvb')
+var exampleSocket = new WebSocket("ws://www.example.com/socketserver")
 
-btnPlay.addEventListener('click', start)
-btnDown.addEventListener('click', () => {
+exampleSocket.onopen = function(event) {
+  exampleSocket.send("Here's some text that the server is urgently awaiting!");
+};
+
+exampleSocket.onmessage = function(event) {
+  console.log(event.data);
+}
+
+//ui操作
+var btnPlay = $('.play'),
+  wheel = $('.wheel'),
+  btnDown = $('.down'),
+  vLvb = $('#lvb'),
+  front = $('.front').eq(0),
+  front_width = front.clientWidth,
+  front_height = front.clientHeight
+
+// $('.front video,.front canvas').css('width', front_height)
+
+btnPlay.on('click', start)
+btnDown.on('click', () => {
   toast('1.2秒后结束游戏...')
   setTimeout(end, 1200)
 })
 
 function start() {
-  show.call(wheel)
-  hide.call(btnPlay)
-  hide.call(vLvb)
+  wheel.show()
+  btnPlay.hide()
+  vLvb.hide()
 }
 
 function end() {
-  show.call(btnPlay)
-  show.call(vLvb)
-  hide.call(wheel)
+  wheel.hide()
+  btnPlay.show()
+  vLvb.show()
 }
 
-function show() {
-  this.style.display = 'block'
-}
+$('.top').on('click', function() {
 
-function hide() {
-  this.style.display = 'none'
-}
\ No newline at end of file
+})
+
+$('.right').on('click', function() {
+
+})
+
+$('.bottom').on('click', function() {
+
+})
+
+$('.left').on('click', function() {
+
+})
+
+$('.down').on('click', function() {
+
+})
\ No newline at end of file

less/index.less

@@ -7,6 +7,8 @@
 }
 
 @color: rgba(250, 206, 1, .9);
+@front_width: 450;
+@front_height: @front_width*4/3;
 
 body {
   background-color: rgba(255, 239, 161, 1);
@@ -21,8 +23,8 @@ body {
 }
 
 .front {
-  .size(500, 700);
-  .pos(125, 100);
+  .size(@front_width, @front_height);
+  .pos((750+-@front_width) / 2, 100);
   overflow: hidden;
 }
 
@@ -106,10 +108,16 @@ body {
 
 canvas,
 #lvb,
-#lvb video {
+#lvb video,
+.front video {
   width: 100%;
   height: 100%;
-  .pos(0, 0);
+  // .pos(0, 0);
+}
+
+#lvb video,
+.front video {
+  transform: rotate(-270deg)
 }
 
 #lvb {

libs/android.js

@@ -24,15 +24,18 @@ module.exports = function() {
       } else {
         //创建房间
         WebRTCAPI.createRoom({
-          roomid: RoomNumber,
-          role: Role
-        }, onCreateRoomCallback);
+          roomid: 59,
+          role: 'LiveGuest'
+        }, function(result) {
+          console.log(result)
+        });
       }
     },
     onLocalStreamAdd: function(e) {
 
     },
     onRemoteStreamAdd: function(stream, videoId) {
+      console.log(stream, videoId)
       var videoElement = document.getElementById("remoteVideo");
       videoElement.srcObject = stream;
     },
@@ -44,10 +47,7 @@ module.exports = function() {
 
     },
     onUpdateRemoteStream: function(stream, videoId, type, ssrState, openId) {
-      var videoElement = document.getElementById(videoId);
-      videoElement.parentNode.removeChild(videoElement)
-      //这里调用remotestreamadd的回调函数
-      onRemoteStreamAdd(stream, videoId, openId);
+      this.onRemoteStreamAdd(stream, videoId, openId);
     },
     onKickout: function() {
       alert("其他地方登录，被T下线")
@@ -67,9 +67,10 @@ module.exports = function() {
     }
 
   }, {
-    openid: "1574",
+    openid: "1585",
     sdkAppId: 1400050371,
     accountType: 19242,
-    userSig: "eJxFkFFPgzAUhf8LrzNyCytVEx-qYGQGE8fAZHtpKnTkOmEddAM0-neRjPh6vtyc79xvK4k2t1JrzIU0wq1z68EC62aMVaexVkLujaqHmFBKHYCJXlTd4LEagAOEEscF*IeYq8rgHsdDzjm9v4IGiyF5CdLFyk-t*LCLi26RaB9ksA6Lks1t8hSuGnnq4*VH28PsEpEy4xjw1t62Jf1iBN8*qyXwu-dot-UTrzinJx2Em3XCQxV3s*dX-jiV5Qcxbvuznw92FFxGrtBgqcZVxGOeS9lkKLPseK6MML1W4zN*fgGy2FYp",
+    closeLocalMedia: true,
+    userSig: "eJxFkF1PgzAUQP8Lr5itLe1qTHyAjTEnIzFjXXxqyFrkbvIhtFNi-O8iYfH1nNzcc**3k8b7WdY0oGRmpNcq58FBzt2I9VcDrZZZbnQ7YMwYIwjd7FW3HdTVIAjCDBMPoX8JSlcGcpgG79nEO3gbwC48LJ8iteYHunG37D0-0nPpJoEV5TY4NpammzylHCI8Xy8TX-gQ*vZj8VlEzIW56M-7uCb8uuoRR4H-Ghf2IsLi2QY78ZLo7vG2TF3keNpfAx3iGPI4nqSBUo9teME54YROPDudalsZafpGj7-4*QXQ01T-",
   })
 }
\ No newline at end of file

utils/player.js

+function player(url) {
+  this.ws = new WebSocket(url)
+  this.ws.onopen = function(event) {
+    this.ws.send("Here's some text that the server is urgently awaiting!");
+  };
+ 
+  this.ws.onmessage = function(event) {
+    console.log(event.data);
+  }
+}
+
+player.prototype.send = function() {
+
+}
+
+module.exports = player
\ No newline at end of file

utils/zepto.js

+function zepto(s) {
+  this.ele = document.querySelectorAll(s)
+  this.length = this.ele.length
+}
+
+function each(callback) {
+  this.forEach(function(item, index) {
+    callback(item, index)
+  })
+}
+
+zepto.prototype.show = function() {
+  each.call(this.ele, function(item) {
+    item.style.display = 'block'
+  })
+  return this.ele
+}
+zepto.prototype.hide = function() {
+  each.call(this.ele, function(item) {
+    item.style.display = 'none'
+  })
+  return this.ele
+}
+
+zepto.prototype.on = function(event, callback) {
+  each.call(this.ele, function(item) {
+    item.addEventListener(event, callback)
+  })
+
+  return this.ele
+}
+
+zepto.prototype.css = function(property, value) {
+  each.call(this.ele, function(item) {
+    item.style[property] = value
+  })
+
+  return this.ele
+}
+
+
+zepto.prototype.eq = function(index) {
+  return this.ele[index]
+}
+
+zepto.prototype.height = function() {
+  return this.style.height
+}
+
+window.$ = (selector) => {
+  return new zepto(selector)
+}
+
+export default window.$
\ No newline at end of file