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'; ...@@ -12,8 +12,8 @@ const baseUrl = 'https://oc-testapi.finezb.com';
// } // }
const request = (url, method, data) => { const request = (url, method, data) => {
var header = { var header = {
"Token":localStorage.getItem('user_token'), "Token":uni.getStorageSync('user_token'),
"Encrypt":localStorage.getItem('room_id'), "Encrypt":uni.getStorageSync('room_id'),
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (method === 'GET') { if (method === 'GET') {
......
components/chat/chat.vue
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<view class="box"> <view class="box">
<!-- 特效礼物 --> <!-- 特效礼物 -->
<special :url="specialUrl"></special> <special :url="specialUrl"></special>
<scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="true"> <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 datalist" :key="index+''"> <view class="cavasation my-1" v-for="(item,index) in msgList" :key="index">
<view class="person"> <view class="person">
<u-avatar :src="item.avatar" size="80"></u-avatar> <u-avatar :src="item.avatar" size="80"></u-avatar>
<span class="ml-1">{{item.name}}</span> <span class="ml-1">{{item.name}}</span>
...@@ -18,49 +18,109 @@ ...@@ -18,49 +18,109 @@
<script> <script>
import special from "@/components/footer/gift/special-effects/special.vue" import special from "@/components/footer/gift/special-effects/special.vue"
var Live
export default { export default {
name: "chat", name: "chat",
components:{ special }, components: {
props:["specialUrl"], special
},
props: ["specialUrl"],
data() { data() {
return { return {
scrollFalg: false, scrollFalg: false,
datalist: [{ scrollTop: 0,
avatar: "../../static/images/礼物@2x.png", msgList: []
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: "课程生动有趣"
},
]
} }
}, },
created() {
this.getusertoken()
},
methods: { 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> </script>
......
components/footer/footer.vue
...@@ -4,14 +4,15 @@ ...@@ -4,14 +4,15 @@
style="width: 68rpx;margin: 0 20rpx 0 0;"></image> style="width: 68rpx;margin: 0 20rpx 0 0;"></image>
<view class="input"> <view class="input">
<u--input style="background-color: #d9d9d9;height: 64rpx;padding-left:20rpx;" type="text" border="none" <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>
<view class="icon" v-show="inputFalg"> <view class="icon" v-show="inputFalg">
<image v-for="(item,index) in imageList" :key="index+''" :src="item.url" style="width:68rpx" mode="widthFix" <image v-for="(item,index) in imageList" :key="index+''" :src="item.url" style="width:68rpx" mode="widthFix"
@click="iconbtn(item.title)"></image> @click="iconbtn(item.title)"></image>
</view> </view>
<view class="icon-right" v-show="inputFalg"> <view class="icon-right" v-show="inputFalg">
<image class="iconright" v-for="(item,index) in imageListRight" :key="index+''" :src="item.url" <image class="iconright" v-for="(item,index) in imageListRight" :key="index+''" :src="item.url"
style="width:68rpx" mode="widthFix" @click="iconbtn(item.title)"></image> style="width:68rpx" mode="widthFix" @click="iconbtn(item.title)"></image>
...@@ -28,6 +29,7 @@ ...@@ -28,6 +29,7 @@
import service from "./service/service.vue"; import service from "./service/service.vue";
import reward from "./reward/reward.vue"; import reward from "./reward/reward.vue";
import shoplist from "./shopList/shoplist.vue" import shoplist from "./shopList/shoplist.vue"
import msg from "@/components/chat/chat.vue"
export default { export default {
name: "foot", name: "foot",
components: { components: {
...@@ -85,6 +87,15 @@ ...@@ -85,6 +87,15 @@
}; };
}, },
methods: { methods: {
//提交输入
send(){
var obj = {
type:1,
sendText:this.value
}
msg.methods.send(obj)
this.value = ""
},
// 输入框聚焦事件 // 输入框聚焦事件
inputFocus() { inputFocus() {
this.inputFalg = false this.inputFalg = false
......
components/live/live.vue
<template> <template>
<view> <view class="plays">
<view id="playerWapper" v-show="show_play"></view>
<view id="playerback" v-show="!show_play"></view>
</view> </view>
</template> </template>
<script> <script>
import lives from "@/components/live/live.vue"
import courseware from "@/components/tabs/courseware/courseware.vue"
var player
var hlsJsPlayer
export default { export default {
name:"live", name: "live",
created() {
this.getusertoken()
},
data() { data() {
return { 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> </script>
<style> <style>
.plays {
</style> width: 100%;
\ No newline at end of file height: 420rpx;
}
</style>
components/login/login.vue
...@@ -109,8 +109,10 @@ ...@@ -109,8 +109,10 @@
that.login_show = true that.login_show = true
} else { } else {
that.$api.livechecktoken(uni.getStorageSync("user_token")).then(res => { that.$api.livechecktoken(uni.getStorageSync("user_token")).then(res => {
uni.setStorageSync("login_ok", 'success')
console.log(res); console.log(res);
if (res.data.data.stats == 0) { if (res.data.data.stats == 0) {
uni.setStorageSync("login_ok", 'fail')
that.is_show = true that.is_show = true
that.login_show = true that.login_show = true
} }
...@@ -166,13 +168,13 @@ ...@@ -166,13 +168,13 @@
//获取观看方式 //获取观看方式
get_watchtype() { get_watchtype() {
this.$api.roomwatchytype().then(res => { this.$api.roomwatchytype().then(res => {
uni.setStorageSync("watch_type",res.data.data.types + "")
this.watch_info = res.data.data this.watch_info = res.data.data
console.log(res.data.data); console.log(res.data.data);
if (this.watch_info.types == 1) { if (this.watch_info.types == 1) {
this.$api.roomwatchytypefree() this.$api.roomwatchytypefree()
this.is_show = false this.is_show = false
} else { } else {
this.check_watchtype() this.check_watchtype()
} }
}) })
......
index.html
<!DOCTYPE html> <html lang="zh-CN">
<html lang="en"> <head>
<head> <meta charset="utf-8">
<meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<script> <title>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || <%= htmlWebpackPlugin.options.title %>
CSS.supports('top: constant(a)')) </title>
document.write( <script>
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS
(coverSupport ? ', viewport-fit=cover' : '') + '" />') .supports('top: constant(a)'))
</script> document.write(
<title></title> '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
<!--preload-links--> (coverSupport ? ', viewport-fit=cover' : '') + '" />')
<!--app-context--> </script>
</head> <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
<body> <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<div id="app"><!--app-html--></div> <script src="https://static.oclive.cn/live.player_commons_5.2.js"> </script>
<script type="module" src="/main.js"></script> <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.19/skins/default/aliplayer-min.css">
</body> <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> </html>
manifest.json
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
"quickapp" : {}, "quickapp" : {},
/* 小程序特有相关 */ /* 小程序特有相关 */
"mp-weixin" : { "mp-weixin" : {
"appid" : "", "appid" : "wx5d159f9ae29679e9",
"setting" : { "setting" : {
"urlCheck" : false "urlCheck" : false
}, },
...@@ -73,6 +73,7 @@ ...@@ -73,6 +73,7 @@
"router" : { "router" : {
"mode" : "history" "mode" : "history"
}, },
"title" : "智课" "title" : "智课",
"template" : "index.html"
} }
} }
pages/index/index.vue
<template> <template>
<view class="contents"> <view class="contents">
<login></login>
<!-- 视频区 --> <!-- 视频区 -->
<view class="banner"></view> <view class="banner">
<!-- <login></login> --> <lives></lives>
<tabs @skipComponent = "skip"></tabs> </view>
<tabs @skipComponent="skip"></tabs>
<!-- 聊天 --> <!-- 聊天 -->
<component :is="currentTabComponent" :specialUrl="special"></component> <component :is="currentTabComponent" :specialUrl="special"></component>
<!-- 底部 --> <!-- 底部 -->
<view class="footer" v-show="currentTabComponent == 'chat'"> <view class="footer" v-show="currentTabComponent == 'chat'">
<foot @specialShow="specialShow"></foot> <foot @specialShow="specialShow"></foot>
</view> </view>
</view> </view>
</template> </template>
...@@ -19,35 +21,43 @@ ...@@ -19,35 +21,43 @@
import foot from "@/components/footer/footer.vue" import foot from "@/components/footer/footer.vue"
import chat from "@/components/chat/chat.vue" import chat from "@/components/chat/chat.vue"
import sinatv from "@/components/tabs/sinaTv/sinaTv.vue" import sinatv from "@/components/tabs/sinaTv/sinaTv.vue"
import lives from "@/components/live/live.vue"
import courseware from "@/components/tabs/courseware/courseware.vue" import courseware from "@/components/tabs/courseware/courseware.vue"
export default { export default {
components: { components: {
foot,chat,login,tabs,sinatv,courseware foot,
chat,
login,
tabs,
sinatv,
courseware,
lives
}, },
data() { data() {
return { return {
loading: true, loading: true,
value:'', value: '',
currentTabComponent:'chat', currentTabComponent: 'chat',
special:"" special: "",
} }
}, },
onLoad() { created() {
}, },
onshow() { onshow() {
}, },
methods: { methods: {
skip(value){
skip(value) {
this.currentTabComponent = value this.currentTabComponent = value
}, },
specialShow(url){ specialShow(url) {
this.special = url this.special = url
let _this = this let _this = this
let timer = setTimeout(() => { let timer = setTimeout(() => {
_this.special = '' _this.special = ''
},1000) }, 1000)
}, },
} }
} }
...@@ -84,7 +94,13 @@ ...@@ -84,7 +94,13 @@
bottom: 0; bottom: 0;
display: flex; display: flex;
background-color: white; background-color: white;
box-shadow: 0 -2rpx 30rpx #dadada;; box-shadow: 0 -2rpx 30rpx #dadada;
;
}
#playerback{
width: 100%;
height: 420rpx;
z-index: 0;
} }
} }
</style> </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)')) <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
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> .supports('top: constant(a)'))
\ No newline at end of file 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