Skip to content

P
pica.cloud.web-education-admin
提交 dfd2aaf1 编写于 作者: bo.dang's avatar bo.dang
浏览文件
操作

直播管理二期

上级 28f22214
隐藏空白字符变更
内嵌 并排
正在显示 包含 427 行增加 和 42 行删除
src/utils/yqrange/yqrangeApi.js
浏览文件 @ dfd2aaf1
......@@ -45,5 +45,35 @@ export const getRtcInfo = (params) => {
})
};
// 查询回放信息
export const getPlayback = (params) => {
return fetch({
headers,
url: getBaseUrl(`rtc/liveAdmin/playback/${params.rtcId}`),
method: 'get',
// params: params,
description: '查询回放信息',
})
};
export const postPlayback = (params) => {
return fetch({
headers,
url: getBaseUrl(`rtc/liveAdmin/playback`),
method: 'post',
params: params,
description: '设置/关闭回放',
})
};
export const updateLiveStatus = (params) => {
return fetch({
headers,
url: getBaseUrl(`rtc/liveAdmin/switchLiveStatus`),
method: 'put',
params: params,
description: '更新直播状态',
})
};
src/views/yqrange/create-live.vue
浏览文件 @ dfd2aaf1
......@@ -37,22 +37,39 @@
<span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/20</span>
</el-col>
</el-form-item>
<el-form-item label="直播方式">
<el-radio-group v-model="formData.streamType" size="small" @change="changeStyle">
<el-form-item label="直播方式" prop="streamType">
<el-radio-group v-model="formData.streamType" size="small" @change="changeStreamType">
<el-radio label="1" :disabled="styleEditFlag">网页直播</el-radio>
<el-radio label="2" :disabled="styleEditFlag">拉流直播</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="拉流地址" v-if="pullFlag" class="required-label">
<el-col :span="13">
<el-input
size="small"
v-model="formData.pullStreamRtmp"
maxlength="20"
placeholder="请输入App拉流地址"
style="width:70%;"
:disabled="styleEditFlag"
></el-input>
</el-col>
<el-col :span="13">
<el-input
size="small"
v-model="formData.name"
v-model="formData.pullStreamHttp"
maxlength="20"
placeholder="请填写拉流地址"
placeholder="请输入H5拉流地址"
style="width:70%;"
:disabled="styleEditFlag"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="是否公开" prop="scope">
<el-radio-group v-model="formData.scope" size="small" @change="changeScope">
<el-radio label="1">否（仅限圈内人观看）</el-radio>
......@@ -135,8 +152,7 @@
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic1"
:disabled="isDisabledIns">
:before-upload="beforeUploadPic1">
<img
v-if="item.content"
:src="item.content"
......@@ -372,10 +388,13 @@
styleEditFlag: false,// 直播方式是否可以编辑
liveEditFlag: false,// 直播方式、讲师是否可以编辑
guestEditFlag: false,// 嘉宾是否可以编辑
pullFlag: false, // 是否显示拉流地址
formData: {
circleId: "",// 圈子ID
name: '',// 直播名称
style: "1", // 直播方式
streamType: "1", // 直播方式
pullStreamRtmp: "", //APP拉流地址
pullStreamHttp: "", //H5拉流地址
scope: "1",// 直播范围 1-非公开 2-公开
infoCollect: "0",// 是否采集用户信息 0-否 1-是
openTime: '',// 直播开始时间
......@@ -436,6 +455,10 @@
},
{ validator: checkProjectStr, trigger: "blur" }
],
streamType: [{
required: true, message: "请选择直播方式", trigger: 'blur'
}],
scope:[
{required: true}
],
......@@ -546,14 +569,17 @@
})
},
getIndexIntroduce(index) {
if (!this.isDisabledIns) {
if(this.formData.rtcIntroduces != null && this.formData.rtcIntroduces.length > index){
// if (!this.isDisabledIns) {
if(this.formData.rtcIntroduces != null && this.formData.rtcIntroduces.length == 1){
index = 0;
}
else if(this.formData.rtcIntroduces != null && this.formData.rtcIntroduces.length > index){
index = index + 1;
}
this.introduceIndex = index;
}else {
this.$message.warning('正在上传，请稍等')
}
// }else {
// this.$message.warning('正在上传，请稍等')
// }
},
//上传直播简介
beforeUploadPic1(file) {
......@@ -661,12 +687,12 @@
const isLt100kb = file.size / 1024 < 100
if (!isJPG && !isPNG) {
vm.$message.error('上传直播简介图片只能是 JPEG或者png 格式!')
vm.isDisabledIns = false;
// vm.isDisabledIns = false;
return;
}
if (!isLt100kb) {
vm.$message.error('上传图片大小不能超过 100kb')
vm.isDisabledIns = false;
// vm.isDisabledIns = false;
return;
}
......@@ -679,7 +705,7 @@
let _this = this;
if (_this.width !== 750) {
vm.$message.info('图片尺寸不一致，无法提交!');
vm.isDisabledIns = false;
// vm.isDisabledIns = false;
return;
}else {
doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
......@@ -687,7 +713,7 @@
vm.formData.rtcIntroduces[vm.introduceIndex].content = path.fullPath;
vm.formData.rtcIntroduces[vm.introduceIndex].seqNo = vm.introduceIndex+1;
vm.$message.success('上传成功');
vm.isDisabledIns = false;
// vm.isDisabledIns = false;
});
}
// vm.cleatBroadcast.liveIntroduceModel[vm.introduceIndex].content1 = _this.width + '*' + _this.height;
......@@ -751,7 +777,13 @@
// return isJPG && isLt2M;
// },
// 直播方式
changeStyle(){
changeStreamType(){
if(this.formData.streamType == 2){
this.pullFlag = true;
}
else {
this.pullFlag = false;
}
},
......@@ -765,10 +797,26 @@
this.isCollectShow = false;
}
},
// 校验拉流地址
checkpullStream(){
let flag = true;
if(this.pullFlag){
if(this.formData.pullStreamRtmp == ""){
this.$message.warning("请输入APP拉流地址");
flag = false;
}
if(this.formData.pullStreamHttp == ""){
this.$message.warning("请输入H5拉流地址");
flag = false;
}
}
return flag;
},
// 校验直播简介文字版或图片版
checkIntroduce(){
// console.log(this.formData.rtcIntroduces[0].content);
console.log(this.formData.rtcIntroduces[1].content);
// console.log(this.formData.rtcIntroduces[1].content);
let flag = true;
if(this.formData.textContent == ""
......@@ -781,6 +829,8 @@
// 增加直播简介
addIntroImage(){
let length = this.formData.rtcIntroduces.length;
if(length > 5){
this.$message.warning("直播简介图片最多支持新增5张图片!");
return;
......@@ -791,7 +841,6 @@
content: '',
type: 2 // 文字
};
this.formData.rtcIntroduces.push(item);
},
......@@ -994,6 +1043,10 @@
this.submitFlag = true;
this.setFormData();
// 校验拉流地址
if(!this.checkpullStream()){
return;
}
// 校验直播简介文字版或图片版
if(!this.checkIntroduce()){
return;
......@@ -1007,6 +1060,11 @@
return;
}
if(!this.pullFlag){
this.formData.pullStreamHttp = "";
this.formData.pullStreamRtmp = "";
}
let req = this.formData;
openLoading(this);
this.POST('rtc/liveAdmin', req).then((res) => {
......
src/views/yqrange/live-manage.vue
浏览文件 @ dfd2aaf1
......@@ -58,18 +58,29 @@
<el-table-column label="操作" min-width="300" align="center">
<template slot-scope="scope">
<!-- <el-button @click="reviewLive(scope.row)" type="text" size="small">设置回放</el-button> -->
<el-button @click="setPlayback(scope.row)" type="text" size="small">设置回放</el-button>
<el-button @click="closePlayback(scope.row)" type="text" size="small">关闭回放</el-button>
<el-button
@click="liveLink(scope.row)"
type="text"
size="small"
v-if="!(scope.row.liveStatus==4 && scope.row.liveScope==1)">直播链接</el-button>
<el-button
@click="updatelive(scope.row)"
type="text"
size="small"
v-if="scope.row.liveStatus==2 && scope.row.streamType==2">结束直播</el-button>
<el-button
@click="countLive(scope.row)"
type="text"
size="small"
v-if="scope.row.liveStatus==4">数据统计</el-button>
<el-button @click="editLive(scope.row)" type="text" size="small">编辑</el-button>
<el-button @click="setPlayback(scope.row)" type="text" size="small" v-if="playbackSetFlag == 1">设置回放</el-button>
<!--<el-button @click="setPlayback(scope.row)" type="text" size="small" v-if="scope.row.playbackSetFlag == 1">设置回放</el-button>-->
<!--<el-button @click="setPlayback(scope.row)" type="text" size="small" v-if="scope.row.playbackSetFlag == 1">关闭回放</el-button>-->
<!-- <el-button @click="deleteLive(scope.row)" type="text" size="small">删除</el-button> -->
</template>
</el-table-column>
......@@ -144,49 +155,109 @@
:close-on-click-modal="false"
@close="handleLivePlaybackClose"
center>
<el-form :model="playbackForm">
<!--<input type="text" id="copyInput" class="hidden-input" />-->
<div class="live_url_style">
<el-radio-group size="small" style="line-height: 30px;" v-model="canPlayback" @change="changePlayback">
<div class="live_url_style" v-if="selectFlag">
<el-radio-group size="small" style="line-height: 30px;" v-model="playbackForm.videoSource" @change="changeVideoSource">
<el-radio label="1">使用直播原视频播放</el-radio>
<el-radio label="2">上传回放视频（下载原视频编辑后上传）</el-radio>
</el-radio-group>
</div>
<div style="float:left;margin-left:30px;">
<div v-if="uploadFlag">
<div v-if="numberShowFlag">
<span>存在"{{}}"直播原视频，请下载合并后上传</span>
</div>
<div style="margin-left:30px;">
<span>①下载原视频</span>
<el-button @click="download('model')" type="text" size="small">下载</el-button>
<!--<el-col :span="1">-->
<!--<img style="vertical-align: middle" src="../../assets/image/icon_download.png" />-->
<!--</el-col>-->
<el-button @click="download('model')" style="margin-left: 190px;" size="small" type="text">下载</el-button>
</div>
<div style="float:left;margin-left:30px;">
<div style="margin-left:30px;">
<span>②上传回放视频</span>
<el-upload
v-if="isMgUrl"
<el-upload style="float:right;"
v-model="playbackUrl"
class="bg-uploader"
action="#"
accept="*/*"
:limit="1"
:before-upload="beforeVideoUpload">
<!--<el-col :span="1">-->
<!--<img style="vertical-align: middle" src="../../assets/image/icon_upload.png" />-->
<!--</el-col>-->
<el-button type="text" size="small" v-if="fileFlag">上传（仅支持mp4）</el-button>
<!--<video class="video-mg-url" controls preload :src="cleatBroadcast.liveInfo.mgUrl"></video>-->
<!-- <img v-if="!cleatBroadcast.liveInfo.mgUrl" class="video-bg-img" src="../../../static/img/small.png"> -->
</el-upload>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="uploadProgress1"
status="success"
v-show="uploadProgress1 > 0 && uploadProgress1 < 100">
</el-progress>
<div v-if="deleteFileFlag">
<span>{{fileName}}({{fileSize}}M)</span>
<el-button @click="delVideo" style="margin-left: 190px;" size="small" type="text">删除</el-button>
</div>
<!--<div v-if="fileFlag">-->
<!---->
<!--<el-progress-->
<!--:text-inside="true"-->
<!--:stroke-width="16"-->
<!--:percentage="uploadProgress1"-->
<!--status="success"-->
<!--v-show="uploadProgress1 > 0 && uploadProgress1 < 100">-->
<!--</el-progress>-->
<!--</div>-->
<el-button @click="upload" type="text" size="small">上传（仅支持mp4）</el-button>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="openPlay" right>开启回放</el-button>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: right;">
<el-button type="primary" @click="submitPlayback(1)" right>开启回放</el-button>
</div>
</el-dialog>
<!--<el-dialog-->
<!--title="关闭回放"-->
<!--:visible.sync="closePlaybackVisible"-->
<!--width="500px"-->
<!--:close-on-click-modal="false"-->
<!--@close="handleLivePlaybackClose"-->
<!--center>-->
<!--<div slot="footer" class="dialog-footer" style="text-align: right;">-->
<!--<el-button @click="closePlaybackVisible = false">取 消</el-button>-->
<!--<el-button type="primary" @click="submitPlayback(0)" right>结束回放</el-button>-->
<!--</div>-->
<!--</el-dialog>-->
</div>
</div>
</template>
<script>
import {openLoading} from "../../utils/utils";
let vm = null;
import BreadCrumb from "@/components/breadcrumb.vue";
import { getPlayback, postPlayback, updateLiveStatus } from "../../utils/yqrange/yqrangeApi";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
export default {
components: {
BreadCrumb
......@@ -198,8 +269,14 @@ export default {
dialogStatisticsVisible: false,
dialogLivelinkVisible: false,
dialogLivePlaybackVisible: false,
// closePlaybackVisible: false,
playbackSetFlag: 1,
canPlayback: 1,
canPlayback: "1",
uploadFlag: false,
selectFlag: true,
numberShowFlag: false,
videoNumber: 0,
playbackUrl: "",
searchForm: {
liveName: "",
liveStatus: "",
......@@ -244,7 +321,28 @@ export default {
lecturerUrl: "https://dev.yunxin.163.com/",
guestUrl: "https://www.cnblogs.com/",
audienceUrl: "https://www.soho.com",
playbackForm: {
canPlayback: 0,
playbackUrls: {
downloadUrls: [],
originalUrls: [],
},
rtcId: "",
videoSource: 1,
videos: [{
seqNo: "",
videoName: "",
videoSize: "",
videoSource: "",
videoType: "",
videoUrl: ""
}]
},
uploadProgress1: 0,
fileName: "",
fileSize: 0,
fileFlag: true,
deleteFileFlag: false,
circleId: null
};
},
......@@ -322,20 +420,58 @@ export default {
handleLivelinkClose() {
this.dialogLivelinkVisible = false;
},
//回放
// // 查询回放信息
// getPlayback(){
//
// }
//设置回放
setPlayback(row) {
this.dialogLivePlaybackVisible = true;
const rtcId = row.rtcId;
getPlayback({rtcId}).then((res) => {
if(res.code == "000000") {
this.playbackForm = res.data;
if(this.playbackForm.playbackUrls != null){
if(this.playbackForm.playbackUrls.originalUrls != null){
// 存在多个原视频
if(this.playbackForm.playbackUrls.originalUrls.length > 1){
this.selectFlag = false;
this.numberShowFlag = true;
this.videoNumber = this.playbackForm.playbackUrls.originalUrls.length;
}
else {
this.selectFlag = true;
this.numberShowFlag = false;
}
}
}
}
}).catch((error) => {
this.$message({
message: error,
type: 'error'
});
})
},
//关闭设置回放弹窗
handleLivePlaybackClose() {
this.dialogLivePlaybackVisible = false;
this.uploadFlag = false;
},
// 设置回放方式
changePlayback(){
if(this.canPlayback == 2){
changeVideoSource(){
if(this.playbackForm.videoSource == 2){
this.uploadFlag = true;
}
else {
this.uploadFlag = false;
}
},
......@@ -350,9 +486,29 @@ export default {
} else if (type == "fail") {
downloadUrl = vm.failExcelUrl;
}
console.log("下载", type, downloadUrl);
setTimeout(() => {
window.open(downloadUrl);
var link = document.createElement("a");
link.download = "f0.mp4";
var url = downloadUrl;
link.href = url;
if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE9.0" ||
navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE10.0"){
window.open(url,'blank')
}else if (navigator.userAgent.indexOf("Firefox/") > -1){
window.open(url,'blank')
} else{
// link.click();
window.open(url,'blank')
}
// window.open(downloadUrl,'_blank');
}, 500);
......@@ -363,24 +519,165 @@ export default {
},
// 上传视频
beforeVideoUpload(){
beforeVideoUpload(file){
vm.fileFlag = true;
vm.fileName = file.name;
if(file.size != null){
vm.fileSize = (file.size / 1024 / 1024).toFixed(1);
}
else {
vm.fileSize = file.size;
}
vm.$message.success('开始上传')
doUpload(vm,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
vm.cleatBroadcast.liveInfo.mgUrl = path.fullPath;
vm.playbackForm.videos = [{
seqNo: 0,
videoName: vm.fileName,
videoSize: file.size,
videoSource: 2,
videoType: 1,
videoUrl: path.fullPath
}];
// vm.playbackForm.videos[0].seqNo = 0;
// vm.playbackForm.videos[0].videoName = vm.fileName;
// vm.playbackForm.videos[0].videoSize = file.size();
// vm.playbackForm.videos[0].videoSource = 2;
// vm.playbackForm.videos[0].videoType = 1;
// vm.playbackForm.videos[0].videoUrl = path.fullPath;
vm.fileFlag = false;
vm.deleteFileFlag = true;
vm.$message.success('上传成功')
});
},
// 删除视频
delVideo(){
vm.fileFlag = true;
vm.deleteFileFlag = false;
vm.playbackForm.videos = [];
},
// 开启回放/结束回放
submitPlayback(canPlayback){
openLoading(this);
if(vm.uploadFlag && canPlayback == 1){
if(vm.playbackForm.videos == null || vm.playbackForm.videos.length == 0){
this.$message.warning("请上传回放视频");
}
}
// 开启回放
this.playbackForm.canPlayback = canPlayback;
let params = this.playbackForm;
postPlayback(params).then((res) => {
closeLoading(this);
if(res.code == "000000") {
if(canPlayback == 0){
this.$message.error("开启成功");
}
else {
this.$message.error("关闭成功");
}
} else {
if(canPlayback == 0){
this.$message.error("开启失败，请重试");
}
else {
this.$message.error("关闭失败，请重试");
}
}
}).catch((error) => {
this.$message.error("请重试");
})
},
// 关闭回放
closePlayback(){
this.$confirm(`确定关闭回放吗？`, "", {
confirmButtonText: "关闭回放",
cancelButtonText: "取消",
type: "warning"
// customClass: 'range-make-box',
})
.then(() => {
openLoading(this);
// confirm
let params = {rtcId: row.rtcId, canPlayback: 0};
updateLiveStatus(params).then((res) => {
closeLoading(this);
if(res.code == "000000") {
if(canPlayback == 0){
this.$message.success("关闭成功");
}
} else {
this.$message.error("关闭失败，请重试");
}
}).catch((error) => {
this.$message.error("请重试");
})
// 开启回放
openPlay(){
})
.catch(() => {});
},
// 结束直播
updatelive(row){
this.$confirm(`确定结束直播吗？`, "", {
confirmButtonText: "结束直播",
cancelButtonText: "取消",
type: "warning"
// customClass: 'range-make-box',
})
.then(() => {
openLoading(this);
// confirm
let params = {rtcId: row.rtcId,liveStatus: 4};
updateLiveStatus(params).then((res) => {
closeLoading(this);
if(res.code == "000000") {
if(canPlayback == 0){
this.$message.success("结束成功");
}
} else {
this.$message.error("结束失败，请重试");
}
}).catch((error) => {
this.$message.error("请重试");
})
})
.catch(() => {});
},
//数据统计
countLive(row) {
this.dialogStatisticsVisible = true;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或