Skip to content

H
h5-watch
Commit 55478b93 by suwenbiao
Options

直播接入，聊条接入

parent 0a066635
Showing with 284 additions and 87 deletions
api/request.js
......@@ -12,8 +12,8 @@ const baseUrl = 'https://oc-testapi.finezb.com';
// }
const request = (url, method, data) => {
var header = {
"Token":localStorage.getItem('user_token'),
"Encrypt":localStorage.getItem('room_id'),
"Token":uni.getStorageSync('user_token'),
"Encrypt":uni.getStorageSync('room_id'),
}
return new Promise((resolve, reject) => {
if (method === 'GET') {
......
components/chat/chat.vue
......@@ -2,8 +2,8 @@
<view class="box">
<!-- 特效礼物 -->
<special :url="specialUrl"></special>
<scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="true">
<view class="cavasation my-1" v-for="(item,index) in datalist" :key="index+''">
<scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="false" :scroll-top="scrollTop">
<view class="cavasation my-1" v-for="(item,index) in msgList" :key="index">
<view class="person">
<u-avatar :src="item.avatar" size="80"></u-avatar>
<span class="ml-1">{{item.name}}</span>
......@@ -18,49 +18,109 @@
<script>
import special from "@/components/footer/gift/special-effects/special.vue"
var Live
export default {
name: "chat",
components:{ special },
props:["specialUrl"],
components: {
special
},
props: ["specialUrl"],
data() {
return {
scrollFalg: false,
datalist: [{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
{
avatar: "../../static/images/礼物@2x.png",
name: "主播",
content: "课程生动有趣"
},
]
scrollTop: 0,
msgList: []
}
},
created() {
this.getusertoken()
},
methods: {
gsnickname(val) {
var msgname = val
msgname = msgname.replace(/\d{8,}/g, "*")
msgname = msgname.length > 8 ? msgname.substring(0, 8) + "..." : msgname
return msgname
},
//获取房间token
getusertoken() {
this.$nextTick(() => {
if (uni.getStorageSync("login_ok") == 'success') {
this.$api.getusertoken().then(res => {
var that = this
var roomdid = res.data.data
if (uni.getStorageSync('room_token')) {
roomdid = uni.getStorageSync('room_token')
}
Live = new Finezb.Live(roomdid)
Live.login(function() {
console.log('登录成功', JSON.stringify(Live.getLoginUser()))
uni.setStorageSync("user_account", Live.getLoginUser().account)
})
})
}
})
},
//发送消息
send(val) {
if (!val.sendText) {
return;
}
let data = {
text: val.sendText,
type: val.type,
nickName: uni.getStorageSync("user_name"),
};
if (uni.getStorageSync("watch_type") == 4 && uni.getStorageSync("wxnick") == 0) {
data.nickName = uni.getStorageSync("user_name1")
}
data.extra = {
headUrl: getStorageSync("user_headimg"),
role: 4,
isDirty: 0
};
// var sendlist = this.chatsetinfo.sensitiveWord
// if (this.chatsetinfo.sensitive && sendlist.length > 0) {
// for (var index in sendlist) {
// if (sendlist[index] != "" && sendlist[index].trim() != "" && this.sendText.includes(sendlist[
// index])) {
// data.extra.isDirty = 1
// break;
// }
// }
// }
data.extra = JSON.stringify(data.extra);
let msg = {
type: val.type,
sendTime: new Date().getTime(),
extra: {
headUrl: getStorageSync("user_headimg"),
role: 4
},
sendName: uni.getStorageSync("user_name"),
text: face.replaceEm(this.sendText)
}
if (uni.getStorageSync("watch_type") == 4 && uni.getStorageSync("wxnick") == 0) {
msg.sendName = uni.getStorageSync("user_name1")
}
msg.sendName = msg.sendName.replace(/\d{8,}/g, "*")
msg.sendName = msg.sendName.length > 8 ? msg.sendName.substring(0, 8) + "..." : msg.sendName
this.msgList.push(msg)
this.sendText = '';
// let id = 'msg' + msg.sendTime;
// this.msgBoxToBottom(id);
this.showexpression = false
this.showgift = false
console.log(data);
Live.sendMsg(data, function(ack) {
console.log(ack);
if (ack.code === 200) {
this.scrollTop = 500
}
})
},
}
}
</script>
......
components/footer/footer.vue
......@@ -4,14 +4,15 @@
style="width: 68rpx;margin: 0 20rpx 0 0;"></image>
<view class="input">
<u--input style="background-color: #d9d9d9;height: 64rpx;padding-left:20rpx;" type="text" border="none"
shape="circle" placeholder="说点什么吧..." v-model="value" @focus="inputFocus" @blur="inputblur"></u--input>
shape="circle" placeholder="说点什么吧..." v-model="value" @focus="inputFocus" @blur="inputblur"
confirmType="发送" confirm="send"></u--input>
</view>
<view class="icon" v-show="inputFalg">
<image v-for="(item,index) in imageList" :key="index+''" :src="item.url" style="width:68rpx" mode="widthFix"
@click="iconbtn(item.title)"></image>
</view>
<view class="icon-right" v-show="inputFalg">
<image class="iconright" v-for="(item,index) in imageListRight" :key="index+''" :src="item.url"
style="width:68rpx" mode="widthFix" @click="iconbtn(item.title)"></image>
......@@ -28,6 +29,7 @@
import service from "./service/service.vue";
import reward from "./reward/reward.vue";
import shoplist from "./shopList/shoplist.vue"
import msg from "@/components/chat/chat.vue"
export default {
name: "foot",
components: {
......@@ -85,6 +87,15 @@
};
},
methods: {
//提交输入
send(){
var obj = {
type:1,
sendText:this.value
}
msg.methods.send(obj)
this.value = ""
},
// 输入框聚焦事件
inputFocus() {
this.inputFalg = false
......
components/live/live.vue
<template>
<view>
<view class="plays">
<view id="playerWapper" v-show="show_play"></view>
<view id="playerback" v-show="!show_play"></view>
</view>
</template>
<script>
import lives from "@/components/live/live.vue"
import courseware from "@/components/tabs/courseware/courseware.vue"
var player
var hlsJsPlayer
export default {
name:"live",
name: "live",
created() {
this.getusertoken()
},
data() {
return {
show_play: false,
roomconfig: {},
};
}
},
methods: {
//获取房间token
getusertoken() {
this.$nextTick(() => {
if (uni.getStorageSync("login_ok") == 'success') {
this.$api.getusertoken().then(res => {
var that = this
this.getroomconfig()
var roomdid = res.data.data
//获取观看地址
var opts = {
"width": "100%",
"height": "100%",
"showLoading": 1,
"mode": 1,
"autoplay": true,
};
if (uni.getStorageSync('room_token')) {
roomdid = uni.getStorageSync('room_token')
}
player = new Finezb.Player(roomdid, opts);
player.onPubStatusChange(function(status) {
console.log("主播端推流状态：" + status);
if (status == 0) {
that.show_play = false
that.getbackinfo()
player.pause();
} else if (status == 1) {
if (hlsJsPlayer) {
hlsJsPlayer.destroy()
}
that.show_play = true
player.play();
}
});
player.appendTo("playerWapper")
})
}
})
},
//获取房间基础设置
getroomconfig() {
this.$api.roomconfig().then(res => {
this.roomconfig = res.data.data
}).catch(err => {
console.log(err);
})
},
//获取回看地址
getbackinfo() {
this.$api.getbackinfo().then(res => {
if (res.data.data.videoUrl && this.roomconfig.replayEnable) {
var backinfourl = res.data.data.videoUrl
console.log(backinfourl);
if (backinfourl.indexOf('http:') == 0) {
backinfourl = backinfourl.replace('http:', '')
} else {
backinfourl = backinfourl.replace('https:', '')
}
if (hlsJsPlayer) {
hlsJsPlayer.destroy()
}
this.$nextTick(() => {
hlsJsPlayer = new HlsPlayer({
id: 'playerback',
url: backinfourl,
width: '100%',
height: '420rpx',
playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
});
})
} else {
}
})
},
},
}
</script>
<style>
</style>
\ No newline at end of file
.plays {
width: 100%;
height: 420rpx;
}
</style>
components/login/login.vue
......@@ -109,8 +109,10 @@
that.login_show = true
} else {
that.$api.livechecktoken(uni.getStorageSync("user_token")).then(res => {
uni.setStorageSync("login_ok", 'success')
console.log(res);
if (res.data.data.stats == 0) {
uni.setStorageSync("login_ok", 'fail')
that.is_show = true
that.login_show = true
}
......@@ -166,13 +168,13 @@
//获取观看方式
get_watchtype() {
this.$api.roomwatchytype().then(res => {
uni.setStorageSync("watch_type",res.data.data.types + "")
this.watch_info = res.data.data
console.log(res.data.data);
if (this.watch_info.types == 1) {
this.$api.roomwatchytypefree()
this.is_show = false
} else {
this.check_watchtype()
}
})
......
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS
.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="https://static.oclive.cn/live.player_commons_5.2.js"> </script>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.19/skins/default/aliplayer-min.css">
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.min.css" rel="stylesheet"/>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/TXLivePlayer-1.2.3.min.js"></script>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 协议的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/hls.min.1.1.5.js"></script>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/flv.min.1.6.3.js"></script>
<!-- built files will be auto injected -->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.v4.5.4.min.js"></script>
<script src="//unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js" charset="utf-8"></script>
<script src="//unpkg.byted-static.com/xgplayer-hls/2.5.2/dist/index.min.js" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
manifest.json
......@@ -50,7 +50,7 @@
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"appid" : "wx5d159f9ae29679e9",
"setting" : {
"urlCheck" : false
},
......@@ -73,6 +73,7 @@
"router" : {
"mode" : "history"
},
"title" : "智课"
"title" : "智课",
"template" : "index.html"
}
}
pages/index/index.vue
<template>
<view class="contents">
<login></login>
<!-- 视频区 -->
<view class="banner"></view>
<!-- <login></login> -->
<tabs @skipComponent = "skip"></tabs>
<view class="banner">
<lives></lives>
</view>
<tabs @skipComponent="skip"></tabs>
<!-- 聊天 -->
<component :is="currentTabComponent" :specialUrl="special"></component>
<!-- 底部 -->
<view class="footer" v-show="currentTabComponent == 'chat'">
<foot @specialShow="specialShow"></foot>
<foot @specialShow="specialShow"></foot>
</view>
</view>
</template>
......@@ -19,35 +21,43 @@
import foot from "@/components/footer/footer.vue"
import chat from "@/components/chat/chat.vue"
import sinatv from "@/components/tabs/sinaTv/sinaTv.vue"
import lives from "@/components/live/live.vue"
import courseware from "@/components/tabs/courseware/courseware.vue"
export default {
components: {
foot,chat,login,tabs,sinatv,courseware
foot,
chat,
login,
tabs,
sinatv,
courseware,
lives
},
data() {
return {
loading: true,
value:'',
currentTabComponent:'chat',
special:""
value: '',
currentTabComponent: 'chat',
special: "",
}
},
onLoad() {
created() {
},
onshow() {
},
methods: {
skip(value){
skip(value) {
this.currentTabComponent = value
},
specialShow(url){
specialShow(url) {
this.special = url
let _this = this
let timer = setTimeout(() => {
_this.special = ''
},1000)
}, 1000)
},
}
}
......@@ -84,7 +94,13 @@
bottom: 0;
display: flex;
background-color: white;
box-shadow: 0 -2rpx 30rpx #dadada;;
box-shadow: 0 -2rpx 30rpx #dadada;
;
}
#playerback{
width: 100%;
height: 420rpx;
z-index: 0;
}
}
</style>
unpackage/dist/build/h5/index.html
<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>智课</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2772579d.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.93fd1780.js></script><script src=/static/js/index.32321f34.js></script></body></html>
\ No newline at end of file
<html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>智课</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS
.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2772579d.css><script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script src=https://static.oclive.cn/live.player_commons_5.2.js></script><link rel=stylesheet href=https://g.alicdn.com/de/prismplayer/2.9.19/skins/default/aliplayer-min.css><link href=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.min.css rel=stylesheet><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/TXLivePlayer-1.2.3.min.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/hls.min.1.1.5.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/flv.min.1.6.3.js></script><script src=https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.v4.5.4.min.js></script><script src=//unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js charset=utf-8></script><script src=//unpkg.byted-static.com/xgplayer-hls/2.5.2/dist/index.min.js charset=utf-8></script></head><body><div id=app></div><script src=/static/js/chunk-vendors.eceae362.js></script><script src=/static/js/index.9df6f2ec.js></script></body></html>
\ No newline at end of file
unpackage/dist/build/h5/static/js/chunk-vendors.93fd1780.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
unpackage/dist/build/h5/static/js/chunk-vendors.eceae362.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
unpackage/dist/build/h5/static/js/index.32321f34.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
unpackage/dist/build/h5/static/js/index.9df6f2ec.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
unpackage/dist/build/h5/static/js/pages-index-index.25de38a3.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
unpackage/dist/build/h5/static/js/pages-index-index.b0505925.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment