提交 fd6168d9 编写于 作者: api工厂's avatar api工厂

直播推拉流

上级 ba062451
......@@ -61,7 +61,9 @@
"pages": [
"pages/videoCall/videoCall",
"pages/live-anchor/index",
"pages/live-anchor/list"
"pages/live-anchor/list",
"pages/live-client/list",
"pages/live-client/client"
]
}
],
......
module.exports = {
version: '11.2.0',
note: '三级分销增加抢客功能', // 这个为版本描述,无需修改
version: '11.3.2',
note: '直播推拉流', // 这个为版本描述,无需修改
subDomain: 'tz', // liu123 此处改成你自己的专属域名。什么是专属域名?请看教程 https://www.it120.cc/help/qr6l4m.html
merchantId: 951, // 商户ID,可在后台工厂设置-->商户信息查看
sdkAppID: 1400450467, // 腾讯实时音视频应用编号,请看教程 https://www.it120.cc/help/nxoqsl.html
......
......@@ -95,7 +95,7 @@ module.exports =
/* eslint-disable */
// 小程序开发api接口工具包,https://github.com/gooking/wxapi
var API_BASE_URL = 'https://api.it120.cc';
// var API_BASE_URL = 'http://192.168.31.76:8081';
// var API_BASE_URL = 'http://127.0.0.1:8081';
var subDomain = '-';
var merchantId = '0';
......@@ -1551,12 +1551,21 @@ module.exports = {
myLiveRooms: function myLiveRooms(data) {
return request('/liveRooms/my', true, 'post', data);
},
liveRooms: data => {
return request('/liveRooms/list', true, 'post', data)
},
myLiveRoomsInfo: function myLiveRoomsInfo(token, id) {
return request('/liveRooms/my/info', true, 'get', { token: token, id: id });
},
liveRoomsInfo: (token, id) => {
return request('/liveRooms/info', true, 'get', { token, id })
},
liveRoomGoodsMainly: function liveRoomGoodsMainly(data) {
return request('/liveRooms/goods/mainly', true, 'post', data);
},
likeLiveRoom: (token, id) => {
return request('/liveRooms/like', true, 'post', { token, id })
},
stopLiveRoom: function stopLiveRoom(token, id) {
return request('/liveRooms/my/stop', true, 'post', { token: token, id: id });
},
......
let queue = {};
let timer = 0;
let ctx = null;
const badges = {};
Component({
properties: {
count: {
type: Number,
observer: "likeChange",
value: 0,
},
height: {
type: Number,
value: 300
},
width: {
type: Number,
value: 90
}
},
methods: {
/**点赞个数变化 */
likeChange(newVal, oldVal) {
if (newVal - oldVal > 0) {
this.likeClick();
}
},
/**点赞 */
likeClick() {
const image = "./images-v2/" + this.getRandomInt(1, 13) + ".png";
const anmationData = {
id: new Date().getTime(),
timer: 0,
opacity: 0.5,
pathData: this.generatePathData(),
image: image,
factor: {
speed: 0.4, // 运动速度,值越小越慢
t: 0 // 贝塞尔函数系数
}
};
if (Object.keys(queue).length > 0) {
queue[anmationData.id] = anmationData;
} else {
queue[anmationData.id] = anmationData;
this.bubbleAnimate();
}
},
/**获取最大最小随机值 */
getRandom(min, max) {
return Math.random() * (max - min) + min;
},
/**获取最大最小之前随机值的整数 */
getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
/**获取图片路径 */
generatePathData() {
let width = this.data.width,
height = this.data.height;
const p0 = {
x: 0.65 * width,
y: height
};
const p1 = {
x: this.getRandom(0.22 * width, 0.33 * width),
y: this.getRandom(0.5 * height, 0.75 * height)
};
const p2 = {
x: this.getRandom(0, 0.88 * width),
y: this.getRandom(0.25 * height, 0.5 * height)
};
const p3 = {
x: this.getRandom(0, 0.88 * width),
y: this.getRandom(0, 0.125 * height)
};
return [p0, p1, p2, p3];
},
/**更新图片的最新运动路径 */
updatePath(data, factor) {
const p0 = data[0];
const p1 = data[1];
const p2 = data[2];
const p3 = data[3];
const t = factor.t;
/*计算多项式系数 (下同)*/
const cx1 = 3 * (p1.x - p0.x);
const bx1 = 3 * (p2.x - p1.x) - cx1;
const ax1 = p3.x - p0.x - cx1 - bx1;
const cy1 = 3 * (p1.y - p0.y);
const by1 = 3 * (p2.y - p1.y) - cy1;
const ay1 = p3.y - p0.y - cy1 - by1;
const x = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p0.x;
const y = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p0.y;
return {
x,
y
};
},
/**点赞动画 */
bubbleAnimate() {
let width = this.data.width,
height = this.data.height;
Object.keys(queue).forEach(key => {
const anmationData = queue[+key];
const {
x,
y
} = this.updatePath(
anmationData.pathData,
anmationData.factor
);
const speed = anmationData.factor.speed;
anmationData.factor.t += speed;
var curWidth = 30;
curWidth = (height - y) / 1.5;
curWidth = Math.min(30, curWidth);
var curAlpha = anmationData.opacity;
curAlpha = y / height;
curAlpha = Math.min(1, curAlpha);
ctx.globalAlpha = curAlpha;
ctx.drawImage(anmationData.image, x - curWidth / 2, y, curWidth, curWidth);
if (anmationData.factor.t > 1) {
delete queue[anmationData.id];
}
if (y > height) {
delete queue[anmationData.id];
}
});
ctx.draw();
if (Object.keys(queue).length > 0) {
timer = setTimeout(() => {
this.bubbleAnimate();
}, 5);
} else {
clearTimeout(timer);
ctx.draw(); // 清空画面
}
}
},
ready() {
ctx = wx.createCanvasContext("bubble", this);
queue = {};
},
detached() {
if (timer) {
clearTimeout(timer);
}
}
});
\ No newline at end of file
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<canvas canvas-id="bubble" style="width:{{width}}px;height:{{height}}px" class="like-fx" ></canvas>
\ No newline at end of file
.like-fx {
position: absolute;
right: 0;
bottom: 140rpx;
pointer-events: none;
z-index: 9999999;
}
......@@ -81,13 +81,6 @@ Page({
this.getUserInfo()
this.myLiveRoomsInfo()
this.initWebSocket()
this.getPushInfo(options.roomid) //获取直播信息
// wx.showLoading({
// title: '加载中...',
// })
that = this;
// 设置屏幕常亮 兼容ios
wx.setKeepScreenOn({
keepScreenOn: true
......@@ -97,17 +90,6 @@ Page({
this.ctx = wx.createLivePusherContext('pusher')
// if (options.object) { // 开启直播传递过来直播间的名称和封面图
// let parse = JSON.parse(options.object)
// let { name, cover, ids, category_id } = parse
// this.setData({
// live_name: name,
// cover,
// ids,
// category_id
// })
// this.getPushInfo()
// }
let query = wx.createSelectorQuery()
query.select('.barrage').boundingClientRect(function (rect) {
// console.log(rect)
......@@ -259,96 +241,6 @@ Page({
showEmpty: true,
})
},
// 获取推流信息
getPushInfo(roomid) {
var that = this
wx.showLoading({
title: '加载中',
})
wx.request({
url: CONFIG.HTTP_REQUEST_URL + "selectRoomDetailById",
data: {
roomid: roomid,
userOpenId: wx.getStorageSync('openid')
},
method: "GET",
header: {
'Content-Type': 'application/json;charset=utf-8 '
},
success: function (res2) {
//console.log("live-author---selectRoomDetailById",res2);
if (res2.data.code == 500) {
wx.showToast({
title: res2.data.message,
duration: 1500,
icon: 'none',
mask: true,
})
return
}
let info = res2.data.map;
that.setData({
info: info,
roomId: info.id
});
if (app.globalData.socketStatus == 'closedinit') {
// websocket方式
app.openSocket(info.id, that, "author")
}
},
complete: function (c) {
wx.hideLoading()
}
})
// let data = this.data
// console.log(wx.getStorageSync('token'))
// console.log(data.live_name)
// console.log(data.ids)
// console.log(data.category_id)
// wx.uploadFile({
// url: Config.HTTP_REQUEST_URL + '/wxsmall/Live/push',
// filePath: data.cover,
// name: 'cover', // 后端需要通过此字段来获取
// header: {
// "Content-Type": "multipart/form-data",
// "Charset": "utf-8"
// },
// formData: {
// token: wx.getStorageSync('token'),
// title: data.live_name,
// goods_ids: data.ids,
// live_category_id: data.category_id,
// v: 2, // 1 腾讯IM 2 websocket
// },
// success: function(res) {
// res = JSON.parse(res.data)
// if (res.code == 0) { // 推流信息
// that.setData({
// info: res.data,
// main_goods: res.data.main_goods,
// online: res.online
// })
// // websocket starts
// app.openSocket(res.data.number, that)
// // websocket ends
// } else {
// app.msg(res.message)
// setTimeout(() => {
// wx.navigateBack({ delta: 1 })
// }, 2000)
// }
// },
// fail: function(res) {
// console.log(res)
// },
// complete: function() {
// wx.hideLoading()
// }
// })
},
onReady(res) {
this.ctx = wx.createLivePusherContext('pusher')
},
......@@ -408,7 +300,7 @@ Page({
return {
title: '快来我的直播间看看吧~',
imageUrl: this.data.liveRoomsInfo.roomInfo.coverImage,
path: `/packageStreamMedia/pages/live-anchor/index?id=${this.data.id}`
path: `/packageStreamMedia/pages/live-client/client?id=${this.data.id}`
}
},
async getUserInfo() {
......@@ -442,7 +334,6 @@ Page({
return
}
let mainlyGoods = null
console.log(res.data.goodsList);
if (res.data.mainlyGoodsId) {
mainlyGoods = res.data.goodsList.find(ele => {
return ele.id == res.data.mainlyGoodsId
......
......@@ -108,9 +108,9 @@
<!-- send barrage -->
<input cursor-spacing='0' bindkeyboardheightchange="keyboardEvent" wx:if='{{ showInput }}' focus="{{ focus }}" placeholder-class="holder-class" placeholder='说点什么吧...' value="{{ inputVal }}" class="send-barrage" confirm-type='send' bindconfirm="onComment" bindinput="bindInput"></input>
<cover-view wx:if='{{ showInput }}' class="send-btn" catchtap="onComment">
<!-- <cover-view wx:if='{{ showInput }}' class="send-btn" catchtap="onComment">
发送
</cover-view>
</cover-view> -->
<!-- 点击人员列表 -->
<cover-view class="goods-list {{ showPeopleInfo ? 'open' : 'close' }}">
......
const WXAPI = require('apifm-wxapi')
// websocket 第一步
let socketOpen = false
let socketMsgQueue = []
Page({
/**
* 页面的初始数据
*/
data: {
viewNumber: 0, // 观看人数
likeNumber: 0, // 点赞数量
follow: true,
inputVal: '',
userId: '', // 用户id
groupId: null, // 群id
playUrl: '', // 拉流地址
barrageList: [], // 用户聊天记录
showInput: false, // 是否显示输入框
focus: false,
goodsList: [],
pageIndex: 1,
pageSize: 10,
hasMore: true,
showGoodsInfo: false,
firstTap: false,
showEmpty: false, // 是否展示缺省提示
nickname: '', // 当前用户昵称
scrollTop: '', // 设置cover-view 设置顶部滚动的偏移量
online: '',
showTips: false, // 是否显示某个人加入进入直播间
online_people: '', // 观看人数
anchor_cover: '', // 主播封面
roomId:undefined,
intoRoomStatus:true
},
// 通知主播已经下线
showWarningOffAndExit() {
wx.showModal({
title: '提示',
content: '主播已经离开了~,下次再见,拜拜!',
showCancel: false,
confirmText: '我知道了',
confirmColor: '#FE6889',
success: res => {
if (res.confirm) {
wx.navigateBack()
}
}
})
},
// 通知被主播拉黑下线
lahei() {
wx.showToast({
title: '系统异常,强制退出直播间',
icon: 'none',
duration: 2000
})
setTimeout(function(){
wx.switchTab({
url : "/pages/index/index"
})
},3000);
},
// 某人加入房间
showTips(avatarurl, msg) {
this.setData({
showTips: true,
showTipsAvatarUrl: avatarurl,
showTipsMsg: msg
})
if (!this.data.focus) {
this.setScrollTop();
}
setTimeout(() => {
this.setData({
showTips: false
})
}, 3000);
},
setScrollTop() {
var query = wx.createSelectorQuery();
wx.createSelectorQuery().in(this).select('.barrage').boundingClientRect(res => {
console.log(res)
this.setData({
chatbottom: res.bottom,
})
}).exec()
query.in(this).select('.item-outer').boundingClientRect(res => {
if (res.bottom > this.data.chatbottom) {
let temp = Math.ceil(parseInt(res.bottom) - parseInt(e.data.chatbottom))
this.setData({
scrollTop: temp // 如此保证scrollTop的值 让滚动条一直滚动到最后 9999 开发工具可以设置为辞职 苹果真机不行
})
}
}).exec()
},
onLoad: function(options) {
// options.id = 15
this.data.id = options.id
// 读取自定义头高度
const systemInfo = wx.getSystemInfoSync()
const custom = wx.getMenuButtonBoundingClientRect()
this.setData({
systemInfo,
customBarHeight: custom.bottom + custom.top - systemInfo.statusBarHeight