Skip to content

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

解决圈子小生态互动直播二期冲突

上级 a937c5f6 7c0318fd
显示空白字符变更
内嵌 并排
正在显示 包含 1475 行增加 和 85 行删除
src/utils/download/download2.js 0 → 100644
浏览文件 @ 2c840a10
//download.js v3.0, by dandavis; 2008-2014. [CCBY2] see http://danml.com/download.html for tests/usage
// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support
// data can be a string, Blob, File, or dataURL
export default function (data, strFileName, strMimeType) {
var self = window, // this script is only for browsers anyway...
u = "application/octet-stream", // this default mime also triggers iframe downloads
m = strMimeType || u,
x = data,
D = document,
a = D.createElement("a"),
z = function(a){return String(a);},
B = self.Blob || self.MozBlob || self.WebKitBlob || z,
BB = self.MSBlobBuilder || self.WebKitBlobBuilder || self.BlobBuilder,
fn = strFileName || "download",
blob,
b,
ua,
fr;
//if(typeof B.bind === 'function' ){ B=B.bind(self); }
if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
x=[x, m];
m=x[0];
x=x[1];
}
//go ahead and download dataURLs right away
if(String(x).match(/^data\:[\w+\-]+\/[\w+\-]+[,;]/)){
return navigator.msSaveBlob ? // IE10 can't do a[download], only Blobs:
navigator.msSaveBlob(d2b(x), fn) :
saver(x) ; // everyone else can save dataURLs un-processed
}//end if dataURL passed?
try{
blob = x instanceof B ?
x :
new B([x], {type: m}) ;
}catch(y){
if(BB){
b = new BB();
b.append([x]);
blob = b.getBlob(m); // the blob
}
}
function d2b(u) {
var p= u.split(/[:;,]/),
t= p[1],
dec= p[2] == "base64" ? atob : decodeURIComponent,
bin= dec(p.pop()),
mx= bin.length,
i= 0,
uia= new Uint8Array(mx);
for(i;i<mx;++i) uia[i]= bin.charCodeAt(i);
return new B([uia], {type: t});
}
function saver(url, winMode){
if ('download' in a) { //html5 A[download]
a.href = url;
a.setAttribute("download", fn);
a.innerHTML = "downloading...";
D.body.appendChild(a);
setTimeout(function() {
a.click();
D.body.removeChild(a);
if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(a.href);}, 250 );}
}, 66);
return true;
}
//do iframe dataURL download (old ch+FF):
var f = D.createElement("iframe");
D.body.appendChild(f);
if(!winMode){ // force a mime that will download:
url="data:"+url.replace(/^data:([\w\/\-\+]+)/, u);
}
f.src = url;
setTimeout(function(){ D.body.removeChild(f); }, 333);
}//end saver
if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
return navigator.msSaveBlob(blob, fn);
}
if(self.URL){ // simple fast and modern way using Blob and URL:
saver(self.URL.createObjectURL(blob), true);
}else{
// handle non-Blob()+non-URL browsers:
if(typeof blob === "string" || blob.constructor===z ){
try{
return saver( "data:" + m + ";base64," + self.btoa(blob) );
}catch(y){
return saver( "data:" + m + "," + encodeURIComponent(blob) );
}
}
// Blob but not URL:
fr=new FileReader();
fr.onload=function(e){
saver(this.result);
};
fr.readAsDataURL(blob);
}
return true;
} /* end download() */
src/utils/download/download4.js 0 → 100644
浏览文件 @ 2c840a10
//download.js v3.0, by dandavis; 2008-2014. [CCBY2] see http://danml.com/download.html for tests/usage
// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support
// https://github.com/rndme/download
// data can be a string, Blob, File, or dataURL
// function download(data, strFileName, strMimeType) {
export default function (data, strFileName, strMimeType) {
var self = window, // this script is only for browsers anyway...
u = "application/octet-stream", // this default mime also triggers iframe downloads
m = strMimeType || u,
x = data,
D = document,
a = D.createElement("a"),
z = function(a){return String(a);},
B = (self.Blob || self.MozBlob || self.WebKitBlob || z);
B=B.call ? B.bind(self) : Blob ;
var fn = strFileName || "download",
blob,
fr;
if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
x=[x, m];
m=x[0];
x=x[1];
}
//go ahead and download dataURLs right away
if(String(x).match(/^data\:[\w+\-]+\/[\w+\-]+[,;]/)){
return navigator.msSaveBlob ? // IE10 can't do a[download], only Blobs:
navigator.msSaveBlob(d2b(x), fn) :
saver(x) ; // everyone else can save dataURLs un-processed
}//end if dataURL passed?
blob = x instanceof B ?
x :
new B([x], {type: m}) ;
function d2b(u) {
var p= u.split(/[:;,]/),
t= p[1],
dec= p[2] == "base64" ? atob : decodeURIComponent,
bin= dec(p.pop()),
mx= bin.length,
i= 0,
uia= new Uint8Array(mx);
for(i;i<mx;++i) uia[i]= bin.charCodeAt(i);
return new B([uia], {type: t});
}
function saver(url, winMode){
if ('download' in a) { //html5 A[download]
a.href = url;
a.setAttribute("download", fn);
a.innerHTML = "downloading...";
D.body.appendChild(a);
setTimeout(function() {
a.click();
D.body.removeChild(a);
if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(a.href);}, 250 );}
}, 66);
return true;
}
if(typeof safari !=="undefined" ){ // handle non-a[download] safari as best we can:
url="data:"+url.replace(/^data:([\w\/\-\+]+)/, u);
if(!window.open(url)){ // popup blocked, offer direct download:
if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){ location.href=url; }
}
return true;
}
//do iframe dataURL download (old ch+FF):
var f = D.createElement("iframe");
D.body.appendChild(f);
if(!winMode){ // force a mime that will download:
url="data:"+url.replace(/^data:([\w\/\-\+]+)/, u);
}
f.src=url;
setTimeout(function(){ D.body.removeChild(f); }, 333);
}//end saver
if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
return navigator.msSaveBlob(blob, fn);
}
if(self.URL){ // simple fast and modern way using Blob and URL:
saver(self.URL.createObjectURL(blob), true);
}else{
// handle non-Blob()+non-URL browsers:
if(typeof blob === "string" || blob.constructor===z ){
try{
return saver( "data:" + m + ";base64," + self.btoa(blob) );
}catch(y){
return saver( "data:" + m + "," + encodeURIComponent(blob) );
}
}
// Blob but not URL:
fr=new FileReader();
fr.onload=function(e){
saver(this.result);
};
fr.readAsDataURL(blob);
}
return true;
} /* end download() */
src/utils/fetch.js
浏览文件 @ 2c840a10
......@@ -54,7 +54,8 @@ service.interceptors.request.use(config => {
}
if( process.env.BUILD_ENV == "development" ){ // 本地开发环境qgit
// console.log('环境变量>>>> ', process.env.BUILD_ENV);
config.headers['token'] = 'F64D5633857D4E16B3C2CCE5E48B0D1E';
config.headers['token'] = '28731437A7EF482ABC5DF4D4DB13B3ED';
// config.headers['token'] = localStorage.getItem('storageToken')
}else{
config.headers['token'] = localStorage.getItem('storageToken')
......
src/utils/filter.js
浏览文件 @ 2c840a10
......@@ -498,5 +498,15 @@ const vueFilter = {
return '-'
}
},
streamTypeFilter: (value) => {
if (value == 1) {
return '网页直播'
}else if (value == 2) {
return '拉流直播'
}else {
return '-'
}
},
}
export default vueFilter
src/utils/qiniu-util.js
浏览文件 @ 2c840a10
import {isEmptyUtils, isNotEmptyUtils, subString} from "./utils";
import fetchQiniu from './fetch-qiniu.js';
import { getQiniuToken1, uploadVideo, uploadImg } from './index'
import fetch from "./fetch";
let fileApiUrl = getQiniuToken1()
//该对象有一个 unsubscribe 方法取消订阅，同时终止上传行为。
......@@ -443,3 +444,7 @@ export const doUpload = (self, file, filePath, previewId, progressId, fileType)
window.QNSubscription = subscription;
});
};
// 取消上传
export const unsubscribe = () => {
subscription.unsubscribe();
}
src/utils/yqrange/yqrangeApi.js
浏览文件 @ 2c840a10
......@@ -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',
data: params,
description: '设置/关闭回放',
})
};
export const updateLiveStatus = (params) => {
return fetch({
headers,
url: getBaseUrl(`rtc/liveAdmin/switchLiveStatus`),
method: 'put',
data: params,
description: '更新直播状态',
})
};
src/views/yqrange/create-live.vue
浏览文件 @ 2c840a10
......@@ -26,7 +26,7 @@
label-suffix="："
class="basic-form">
<el-form-item label="直播标题" prop="name">
<el-col :span="13">
<el-col :span="18">
<el-input
size="small"
v-model="formData.name"
......@@ -50,6 +50,38 @@
<el-radio label="1">是（收集姓名等信息）</el-radio>
</el-radio-group>
</el-form-item>
<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="18">
<el-input
size="small"
v-model="formData.pullStreamRtmp"
placeholder="请输入拉流地址"
style="width:70%;"
:disabled="styleEditFlag">
<template slot="prepend">APP</template>
</el-input>
</el-col>
<el-col :span="18">
<el-input
size="small"
v-model="formData.pullStreamHttp"
placeholder="请输入拉流地址"
style="width:70%;"
:disabled="styleEditFlag">
<template slot="prepend">H5&nbsp;&nbsp;&nbsp;</template>
</el-input>
</el-col>
</el-form-item>
<el-form-item label="直播开始时间" prop="openTime">
<el-col :span="6">
......@@ -60,53 +92,106 @@
placeholder="请选择直播开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions0"
:disabled="formData.liveStatus == 2 || formData.liveStatus == 4"
style="width: 100%;"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="直播简介" class="required-label">
<el-col :span="12">
<el-col :span="16">
<div style="color:#666666;font-size:10px;">直播图片可选择仅文字版，仅图片版或文字版+图片版</div>
<el-input type="textarea" v-model="formData.textContent" placeholder="请输入直播简介" maxlength="300" rows="4" style="width:80%;"></el-input>
<span class="word-num">{{(formData.textContent).replace(/\s+/g,"").length}}/300</span>
<span class="word-num">{{(formData.textContent).replace(/\s+/g,"").length }}/300</span>
<div style="color:#666666;font-size:12px;">文字版</div>
</el-col>
<el-col :span="12" class="basic-item-icon" style="margin-top:35px;">
<!--<el-col :span="12" class="basic-item-icon" style="margin-top:35px;">-->
<!--<el-upload-->
<!--v-model="formData.imageContent"-->
<!--class="bg-uploader"-->
<!--action="#"-->
<!--:show-file-list="false"-->
<!--:before-upload="beforeUploadPic1"-->
<!--&gt;-->
<!--<img-->
<!--v-if="formData.imageContent"-->
<!--:src="formData.imageContent"-->
<!--@mouseover.stop="imgMouseOver1=true"-->
<!--class="bg-img"-->
<!--/>-->
<!--<img-->
<!--v-if="!formData.imageContent"-->
<!--class="bg-img"-->
<!--src="../../assets/image/small.png"-->
<!--/>-->
<!--<div-->
<!--class="img-delete"-->
<!--v-show="imgMouseOver1"-->
<!--@click.stop="deleteImg(1)"-->
<!--@mouseout.stop="imgMouseOver1=false"-->
<!--&gt;-->
<!--<i class="el-icon-delete"></i>-->
<!--</div>-->
<!--<div class="limit-text">-->
<!--<p>限制大小: 2mb</p>-->
<!--<p>尺寸：750*（不限高度）</p>-->
<!--<p>支持jpeg, png格式</p>-->
<!--</div>-->
<!--</el-upload>-->
<!--<div style="color:#666666;font-size:12px;">图片版</div>-->
<!--</el-col>-->
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="图片">
<el-row>
<el-col :span="24">
<el-button size="small" type="info" @click="addIntroImage()">+新增图片（可上传5张）</el-button>
</el-col>
<el-col :span="16">
<!--<div v-for="(item, index) in formData.rtcIntroduces.filter(obj=> obj.type === 2)" :key="index" style="margin-left:0px;min-width: 380px;display: flex;align-items: center">-->
<div v-for="(item, index) in rtcIntroducesImages" :key="index" style="margin-left:0px;min-width: 380px;display: flex;align-items: center">
<el-upload
v-model="formData.imageContent"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic1"
>
:before-upload="beforeUploadPic1">
<img
v-if="formData.imageContent"
:src="formData.imageContent"
@mouseover.stop="imgMouseOver1=true"
v-if="item.content"
:src="item.content"
class="bg-img"
/>
@click="getIndexIntroduce(index)"/>
<img
v-if="!formData.imageContent"
v-if="!item.content"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete"
v-show="imgMouseOver1"
@click.stop="deleteImg(1)"
@mouseout.stop="imgMouseOver1=false"
>
<i class="el-icon-delete"></i>
</div>
<div class="limit-text">
<p>限制大小: 2mb</p>
<p>尺寸：750*（不限高度）</p>
@click="getIndexIntroduce(index)"/>
</el-upload>
<div class="limit-text" style="font-size: 12px;color: #999;margin-left: 10px;margin-top: -10px;">
<p>限制大小: 2Mb</p>
<p>尺寸:750*（高度<3000）</p>
<p>支持jpeg, png格式</p>
</div>
</el-upload>
<div style="color:#666666;font-size:12px;">图片版</div>
<!--<img-->
<!--@click="addIntroImage(index)"-->
<!--class="edit-img"-->
<!--src="../../assets/image/plus.png"-->
<!--v-if="isPreview!=1"-->
<!--/>-->
<!--<img-->
<!--@click="delIntroImage(index)"-->
<!--v-if="index >= 1 && isPreview!=1"-->
<!--class="edit-img"-->
<!--src="../../assets/image/trash.png"-->
<!--/>-->
<el-button size="danger" @click="delIntroImage(index, item)">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage2">请选择直播封面</p>
</div>
<div class="basic-item-icon">
<el-form-item label="直播封面" class="required-label">
<el-upload
......@@ -181,7 +266,7 @@
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage3">请选择直播预告图</p>
</div>
<el-form-item label="直播角色">
<el-form-item label="直播角色" v-if="formData.streamType == 1">
<div style="color:#666666;font-size:10px;">讲师（必填）</div>
<el-row>
<el-col :span="10">
......@@ -191,6 +276,7 @@
v-model="formData.lecturesUserName"
placeholder="请输入姓名"
style="width:85%;"
:disabled="liveEditFlag"
></el-input>
</el-form-item>
</el-col>
......@@ -205,6 +291,7 @@
v-model="formData.lecturesPhone"
placeholder="请输入手机号"
style="width:85%;"
:disabled="liveEditFlag"
></el-input>
</el-form-item>
</el-col>
......@@ -221,6 +308,7 @@
v-model="item.username"
placeholder="请输入姓名"
style="width:85%;"
:disabled="guestEditFlag"
></el-input>
</el-form-item>
</el-col>
......@@ -234,6 +322,7 @@
v-model="item.phone"
placeholder="请输入手机号"
style="width:85%;"
:disabled="guestEditFlag"
></el-input>
</el-form-item>
</el-col>
......@@ -264,7 +353,7 @@
</template>
<script>
import BreadCrumb from "@/components/breadcrumb.vue";
import { openLoading, closeLoading } from "../../utils/utils";
import { isEmptyUtils, openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import { checkMobile } from '../../utils/patients/checkValid';
import { getRtcInfo } from "../../utils/yqrange/yqrangeApi";
......@@ -292,25 +381,26 @@
curmbSecond: '直播管理',
curmbThird: '新建直播',// /live-manage?id=
jumPathThird: '',
showIntroImageFlag: false,
introduceIndex: 0,
isDisabledIns: false,//为了防止上传多图时，点太快图片错位
//页面展示位置
isCollectShow: false,
styleEditFlag: false,// 直播方式是否可以编辑
liveEditFlag: false,// 直播方式、讲师是否可以编辑
guestEditFlag: false,// 嘉宾是否可以编辑
pullFlag: false, // 是否显示拉流地址
formData: {
circleId: "",// 圈子ID
name: '',// 直播名称
liveStatus: "1", // 直播状态
streamType: "1", // 直播方式
pullStreamRtmp: "", //APP拉流地址
pullStreamHttp: "", //H5拉流地址
scope: "1",// 直播范围 1-非公开 2-公开
infoCollect: "0",// 是否采集用户信息 0-否 1-是
openTime: '',// 直播开始时间
rtcIntroduces:[{
seqNo: "",
content: '',
type: "1" // 文字
},
{
seqNo: "",
content: '',
type: "2" // 图片
}
],// 直播简介
rtcIntroduces:[],// 直播简介
cover: '', // 直播封面url 直播第一帧图片
preImage: '', // 直播预告图url
textContent: '', // 直播简介文字版
......@@ -336,6 +426,9 @@
username: ''
}] // 嘉宾
},
introTextNum: 0,
rtcIntroducesText:[],
rtcIntroducesImages: [],
// imgUrl1: '',
imgUrl1More: {},
guestErrFlag: false,
......@@ -367,6 +460,10 @@
},
{ validator: checkProjectStr, trigger: "blur" }
],
streamType: [{
required: true, message: "请选择直播方式", trigger: 'blur'
}],
scope:[
{required: true}
],
......@@ -405,21 +502,13 @@
}
},
created() {
// 区分内部用户和外部用户
let idType = localStorage.getItem('storageIdType');
this.circleId = this.$route.query.circleId;
this.formData.circleId = this.circleId;
this.jumPathThird = '/live-manage?id=' + this.circleId;
// if(circleId){
// this.curmbThird = "新建直播";
// }
// vm = this;
// vm.entryId = vm.getUrlSearch(window.location.href, "entryId");
// vm.peopleLevel = vm.getUrlSearch(window.location.href, "level");
// vm.init();
},
mounted() {
const rtcId = this.$route.query.rtcId;
......@@ -448,6 +537,27 @@
if(res.code == "000000") {
this.formData = res.data;
if(this.formData != null){
// 讲师、嘉宾是否可以编辑
// //直播状态 1-未开始 2-直播中 3-暂停中 4-已结束 5-回放中目前只能用到1，2，4
// 预告状态时，所以都可以修改
if(this.formData.liveStatus == "1"){
this.styleEditFlag = false;
this.liveEditFlag = false;// 可以编辑
this.guestEditFlag = false;
}
// 直播中状态时，直播方式、讲师不可修改，其他都可修改
else if(this.formData.liveStatus == "2"){
this.styleEditFlag = true;
this.liveEditFlag = true;// 不可以编辑
this.guestEditFlag = false;
}
// 直播结束状态时，直播方式、讲师、嘉宾不可修改，其他都可修改
else if(this.formData.liveStatus == "4"){
this.styleEditFlag = true;
this.liveEditFlag = true;
this.guestEditFlag = true;
}
if(this.formData.guests == null || this.formData.guests.length == 0){
this.formData.guests = [{phone: '',username: ''}];
}
......@@ -458,23 +568,36 @@
}
}).catch((error) => {
this.$message({
message: error,
message: "请重试",
type: 'error'
});
})
},
getIndexIntroduce(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('正在上传，请稍等')
// }
},
//上传直播简介
beforeUploadPic1(file) {
let fileLimit = {
width: 750,
height: "",
height: 3000,
size: 2,
sizeText: "2Mb",
key: "imageContent",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
this.beforeUpload(file, fileLimit);
this.beforeUploadMore(file, fileLimit);
},
// 上传直播封面
beforeUploadPic2(file) {
......@@ -555,6 +678,123 @@
};
return isJPG && isLt2M;
},
beforeUploadMore(file, fileLimit) {
let vm = this;
console.log('简介配置图上传前',file)
if (isEmptyUtils(file)) {
return;
}
vm.isDisabledIns = true;
// vm.$message.info('开始上传');
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < fileLimit.size
if (!isJPG && !isPNG) {
vm.$message.error('上传直播简介图片只能是 JPEG或者png 格式!')
// vm.isDisabledIns = false;
return;
}
if (!isLt2M) {
vm.$message.error('图片大小不符合规范，请根据规范上传图片')
// vm.isDisabledIns = false;
return;
}
var _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _this = this;
if ( _this.width != fileLimit.width || _this.height > fileLimit.height) {
vm.$message.error('图片尺寸不符合规范，请根据规范上传图片');
// vm.isDisabledIns = false;
return;
}else {
openLoading(vm);
doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
closeLoading(vm);
// vm.cleatBroadcast.liveIntroduceModel[vm.introduceIndex].content = path.fullPath;
vm.rtcIntroducesImages[vm.introduceIndex].content = path.fullPath;
vm.rtcIntroducesImages[vm.introduceIndex].seqNo = vm.introduceIndex+1;
vm.$message.success('上传成功');
// vm.isDisabledIns = false;
});
}
// vm.cleatBroadcast.liveIntroduceModel[vm.introduceIndex].content1 = _this.width + '*' + _this.height;
}
}
return false;
},
//上传图片
// beforeUploadMore(file, fileLimit) {
// let vm = this;
// const isJPG = file.type === "image/jpeg";
// const isPNG = file.type === "image/png";
// const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
// if (!isJPG && !isPNG) {
// vm.$message.error("图片格式不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
// return;
// }
// let _img = new FileReader();
// _img.readAsDataURL(file);
// _img.onload = function(theFile) {
// let image = new Image();
// image.src = theFile.target.result;
// image.onload = function() {
// let _this = this;
//
// if(fileLimit.key == "imageContent" & _this.width != fileLimit.width){
// vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
// }
// else if (fileLimit.key != "imageContent" & (_this.width != fileLimit.width || _this.height != fileLimit.height)) {
// vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
// } else {
// openLoading(vm);
// doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function(path) {
// closeLoading(vm);
// console.log('上传成功后路径',path);
// if (fileLimit.show == "uploadImgMessage1") {
// vm.uploadImgMessage1 = false;
// } else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
// else if (fileLimit.show == "uploadImgMessage3") {
// vm.uploadImgMessage3 = false;
// }
// vm.formData[fileLimit.key] = path.fullPath;
// vm.formData[fileLimit.more] = {
// attachmentName: path.name,
// attachmentExt: path.ext,
// attachmentSize: path.size
// };
// vm.$message.success("上传成功");
// });
// }
// };
// };
// return isJPG && isLt2M;
// },
// 直播方式
changeStreamType(){
if(this.formData.streamType == 2){
this.pullFlag = true;
}
else {
this.pullFlag = false;
}
},
// 是否公开
changeScope(value){
if(value == 2){
......@@ -564,19 +804,80 @@
this.isCollectShow = false;
}
},
// 校验拉流地址
checkpullStream(){
let flag = true;
if(this.formData.streamType == "2"){
// 公开直播，两个拉流地址都需要
if(this.formData.scope == "2"){
if(this.formData.pullStreamRtmp == "" && this.formData.pullStreamHttp == ""){
this.$message.warning("请输入APP拉流地址和H5拉流地址");
flag = false;
return flag;
}
if(this.formData.pullStreamRtmp == ""){
this.$message.warning("请输入APP拉流地址");
flag = false;
return flag;
}
if(this.formData.pullStreamHttp == ""){
this.$message.warning("请输入H5拉流地址");
flag = false;
return flag;
}
}
else {
if(this.formData.pullStreamRtmp == "" && this.formData.pullStreamHttp == ""){
this.$message.warning("请输入APP拉流地址或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 == ""
& this.formData.imageContent == ""){
// if(this.formData.textContent == ""
// & this.formData.imageContent == ""){
if(this.formData.rtcIntroduces == null || this.formData.rtcIntroduces.length == 0){
flag = false;
this.$message.error("直播简介中可选择仅文字版，仅图片版或文字版+图片版");
}
return flag;
},
// 增加直播简介
addIntroImage(){
let length = this.rtcIntroducesImages.length;
if(length >= 5){
this.$message.warning("直播简介图片最多支持新增5张图片!");
return;
}
this.showIntroImageFlag = true;
const item = {
seqNo: length + 1,
content: "",
type: 2 // 文字
};
this.rtcIntroducesImages.push(item);
},
// 删除直播简介
delIntroImage(index, item){
this.rtcIntroducesImages.splice(index, 1);
},
//删除图片
deleteImg(type) {
if (type == 1) {
......@@ -682,6 +983,10 @@
// 增加嘉宾
addGuest(index) {
if(this.guestEditFlag){
return;
}
this.submitFlag = false;
if(!this.checkGuests()){
......@@ -702,29 +1007,61 @@
// 删除嘉宾
delGuest(index) {
if(this.guestEditFlag){
return;
}
this.formData.guests.splice(index, 1);
},
// 封装数据
initFormData(){
this.formData.streamType = String(this.formData.streamType);
this.changeStreamType();
this.formData.scope = String(this.formData.scope);
if(this.formData.scope == "2"){
this.isCollectShow = true;
}
this.formData.infoCollect = String(this.formData.infoCollect);
this.$set(this.formData, 'textContent', "");
if(this.formData.rtcIntroduces != null){
this.rtcIntroducesImages = [];
for(let i=0;i<this.formData.rtcIntroduces.length;i++) {
if(this.formData.rtcIntroduces[i].type == "1"){
// this.formData.textContent = this.formData.rtcIntroduces[i].content;
this.$set(this.formData, 'textContent', this.formData.rtcIntroduces[i].content);
// break;
}
else if(this.formData.rtcIntroduces[i].type == "2"){
// this.formData.imageContent = this.formData.rtcIntroduces[i].content;
this.$set(this.formData, 'imageContent', this.formData.rtcIntroduces[i].content);
else {
// this.$set(this.formData, "rtcIntroducesImages", )
this.rtcIntroducesImages.push(this.formData.rtcIntroduces[i]);
}
// else if(this.formData.rtcIntroduces[i].type == "2"){
// // this.formData.imageContent = this.formData.rtcIntroduces[i].content;
// this.$set(this.formData, 'imageContent', this.formData.rtcIntroduces[i].content);
// }
}
// this.rtcIntroducesImages = this.formData.rtcIntroduces.filter(function (item) {
// return item.type == "2";
// });
}
// (formData.textContent).replace(/\s+/g,"").length
// if(this.formData.textContent == ""){
// this.introTextNum = 0;
// }
// else {
// this.introTextNum
// }
// 设置讲师
if(this.formData.lecturers != null){
if(this.formData.lecturers.length > 0){
// this.formData.lecturesUserName = this.formData.lecturers[0].username;
// this.formData.lecturesPhone = this.formData.lecturers[0].phone;
this.$set(this.formData, 'lecturesUserName', this.formData.lecturers[0].username);
......@@ -734,12 +1071,45 @@
},
// 封装数据
setFormData(){
if(this.formData.streamType == "1"){
this.formData.pullStreamRtmp = "";
this.formData.pullStreamHttp = "";
}
// 直播简介图片版
if(this.rtcIntroducesImages != null && this.rtcIntroducesImages.length != 0){
let rtcIntroducesImagesArray = this.rtcIntroducesImages.filter(function (item) {
return item.content != "";
});
if(rtcIntroducesImagesArray != null && rtcIntroducesImagesArray.length != 0){
// 直播简介图片版
this.formData.rtcIntroduces = JSON.parse(JSON.stringify(this.rtcIntroducesImages));
}
else {
this.formData.rtcIntroduces = [];
}
}
else {
this.formData.rtcIntroduces = JSON.parse(JSON.stringify(this.rtcIntroducesImages));
}
// 直播简介文字版
this.formData.rtcIntroduces[0].type = 1;
this.formData.rtcIntroduces[0].content = this.formData.textContent;
if(this.formData.textContent != null && this.formData.textContent != ""){
this.rtcIntroducesText = this.formData.rtcIntroduces.filter(function (item) {
return item.type == "1";
});
if(this.rtcIntroducesText.length == 0){
this.formData.rtcIntroduces.push({type:1,content:this.formData.textContent});
}
}
// this.formData.rtcIntroduces[0].content = this.formData.textContent;
// 直播简介图片版
this.formData.rtcIntroduces[1].type = 2;
this.formData.rtcIntroduces[1].content = this.formData.imageContent;
// this.formData.rtcIntroduces[1].type = 2;
// this.formData.rtcIntroduces[1].content = this.formData.imageContent;
// 设置讲师
// if(this.formData.lecturers == undefined){
// this.formData.lecturers
......@@ -748,8 +1118,9 @@
//
// this.formData.lecturers.push({username: this.formData.lecturesUserName, phone: this.formData.lecturesPhone});
// }
this.formData.lecturers[0].username = this.formData.lecturesUserName;
this.formData.lecturers[0].phone = this.formData.lecturesPhone;
if(this.formData.lecturesUserName){
this.formData.lecturers = [{username: this.formData.lecturesUserName,phone: this.formData.lecturesPhone}];
}
},
complete(formName) {
......@@ -769,6 +1140,10 @@
this.submitFlag = true;
this.setFormData();
// 校验拉流地址
if(!this.checkpullStream()){
return;
}
// 校验直播简介文字版或图片版
if(!this.checkIntroduce()){
return;
......@@ -782,6 +1157,11 @@
return;
}
if(!this.pullFlag){
this.formData.pullStreamHttp = "";
this.formData.pullStreamRtmp = "";
}
let req = this.formData;
openLoading(this);
this.POST('rtc/liveAdmin', req).then((res) => {
......@@ -796,6 +1176,10 @@
})
}
else {
this.formData.guests = [{
phone: '',
username: ''
}];
this.$message.error("操作失败，请重试");
}
})
......
src/views/yqrange/create-range.vue
浏览文件 @ 2c840a10
......@@ -85,10 +85,10 @@
//完成
complete() {
if(this.$refs.org.selectionList == null || this.$refs.org.selectionList == ""){
this.$message.warning('请选择机构');
return;
}
// if(this.$refs.org.selectionList == null || this.$refs.org.selectionList == ""){
// this.$message.warning('请选择机构');
// return;
// }
console.log(this.formData.id);
let req = {
circleId: this.formData.id,
......
src/views/yqrange/live-manage.vue
浏览文件 @ 2c840a10
......@@ -52,25 +52,42 @@
<span>{{ scope.row.liveStatus | liveStatusFilter }}</span>
</template>
</el-table-column>
<el-table-column prop="streamType" label="直播方式" min-width="100" align="center">
<template slot-scope="scope">
<span>{{ scope.row.streamType | streamTypeFilter }}</span>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" min-width="100" align="center"></el-table-column>
<el-table-column prop="startTime" label="开始时间" min-width="100" align="center"></el-table-column>
<el-table-column prop="endTime" label="结束时间" min-width="100" align="center"></el-table-column>
<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" v-if="scope.row.playbackSetFlag == 1 && scope.row.canPlayback == 0 ">设置回放</el-button>
<el-button @click="closePlayback(scope.row)" type="text" size="small" v-if="scope.row.playbackSetFlag == 1 && scope.row.canPlayback == 1 ">关闭回放</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>-->
<!-- 1.拉流直播，如果是非公开的话，在直播列表不显示直播链接入口;2.网页直播，非公开，已经结束，不显示直播链接入口 -->
<el-button
@click="liveLink(scope.row)"
type="text"
size="small"
v-if="!(scope.row.liveStatus==4 && scope.row.liveScope==1)"
>直播链接</el-button>
v-if="!((scope.row.liveStatus==4 && scope.row.liveScope==1) || (scope.row.streamType==2 && 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>
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="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>
......@@ -112,7 +129,7 @@
>
<input type="text" id="copyInput" class="hidden-input" />
<div class="live_url_style" v-if="this.liveStatus==1 || this.liveStatus==2">
<div class="live_url_style" v-if="streamType == 1 && (this.liveStatus==1 || this.liveStatus==2)">
<div class="href_style">讲师链接 {{lecturerUrl}}</div>
<el-col class="href_outer_border">
<el-link type="primary" @click="copyTxt(1)" size="small" class="href_button_style">复制</el-link>
......@@ -121,7 +138,7 @@
</el-col>
</div>
<div class="live_url_style" v-if="this.liveStatus==1 || this.liveStatus==2">
<div class="live_url_style" v-if="streamType == 1 && (this.liveStatus==1 || this.liveStatus==2)">
<el-col class="href_style">嘉宾链接 {{guestUrl}}</el-col>
<el-col class="href_outer_border">
<el-link type="primary" @click="copyTxt(2)" size="small" class="href_button_style">复制</el-link>
......@@ -130,19 +147,127 @@
</el-col>
</div>
<div class="live_url_style" v-if="this.liveScope==2">
<div class="live_url_style" v-if="streamType == 2 || this.liveScope==2">
<div class="href_style">观众链接 {{audienceUrl}}</div>
<el-col class="href_outer_border">
<el-link type="primary" @click="copyTxt(3)" size="small" class="href_button_style">复制</el-link>
</el-col>
</div>
</el-dialog>
<el-dialog
title="设置回放"
:visible.sync="dialogLivePlaybackVisible"
width="500px"
:close-on-click-modal="false"
@close="handleLivePlaybackClose"
center>
<el-form ref="playbackForm" :model="playbackForm">
<!--<input type="text" id="copyInput" class="hidden-input" />-->
<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 v-if="uploadFlag" style="line-height: 40px;">
<div v-if="numberShowFlag">
<span style="margin-left: 25px;">存在</span><span style="color:#449284;">"{{videoNumber}}段"</span><span>直播原视频，请下载合并后上传</span>
</div>
<div style="margin-left:30px;" v-if="downloadVideoFlag">
<span>①下载原视频</span>
<!--<el-col :span="1">-->
<!--</el-col>-->
<el-button @click="downloadV('model')" size="small" type="text"><img style="vertical-align: middle;margin-left: 56px;width: 25%;height: 25%;" src="../../assets/image/icon_download.png" />下载</el-button>
</div>
<div style="margin-left:30px;">
<span v-show="downloadVideoFlag">②上传回放视频</span>
<span v-show="!downloadVideoFlag">①上传回放视频</span>
<el-upload style="float:right;"
v-model="playbackUrl"
action="#"
accept="*/*"
:limit="1"
:show-file-list="false"
:before-upload="beforeUploadVideo">
<!--<el-col :span="1">-->
<!--</el-col>-->
<el-button type="text" size="small" style="margin-top: -10px;" v-if="fileFlag"><img style="vertical-align: middle;width: 13%;height: 13%;" src="../../assets/image/icon_upload.png" />上传（仅支持mp4,限制大小800M）</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="20"
:percentage="uploadProgress1"
status="success"
v-show="uploadProgress1 > 0 && uploadProgress1 < 100 && deleteFileFlag">
</el-progress>
<div v-if="deleteFileFlag">
<span v-show="playbackForm.videos[0].videoSource == 2">{{videoToName(playbackForm.videos[0].videoName, 6)}}({{videoToSize(playbackForm.videos[0].videoSize, 1)}}M)</span>
<el-button v-show="playbackForm.videos[0].videoSource == 2 && (deleteFileFlag || uploadProgress1 > 0)" @click="delVideo" style="margin-left: 100px;" size="small" type="text">{{uploadProgress1 && uploadProgress1 < 100 ? '取消上传' : '删除'}}</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>-->
</div>
</div>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: right;">
<el-button type="primary" @click="submitPlayback(1)" :disabled="disabledOpenFlag && uploadProgress1 < 100" 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, closeLoading} from "../../utils/utils";
import DownloadJS from "@/utils/download/download4";
let vm = null;
import BreadCrumb from "@/components/breadcrumb.vue";
import { getPlayback, postPlayback, updateLiveStatus } from "../../utils/yqrange/yqrangeApi";
import { doUpload, getFilePath, unsubscribe } from "../../utils/qiniu-util";
export default {
components: {
BreadCrumb
......@@ -153,6 +278,15 @@ export default {
curmbSecond: "直播管理",
dialogStatisticsVisible: false,
dialogLivelinkVisible: false,
dialogLivePlaybackVisible: false,
// closePlaybackVisible: false,
playbackSetFlag: 1,
canPlayback: "1",
uploadFlag: false,
selectFlag: true,
numberShowFlag: false,
videoNumber: 0,
playbackUrl: "",
searchForm: {
liveName: "",
liveStatus: "",
......@@ -197,8 +331,33 @@ export default {
lecturerUrl: "https://dev.yunxin.163.com/",
guestUrl: "https://www.cnblogs.com/",
audienceUrl: "https://www.soho.com",
circleId: null
playbackForm: {
canPlayback: 0,
playbackUrls: {
downloadUrls: [],//下载地址,已按时间正序排序
originalUrls: [],
},
rtcId: "",
videoSource: "1",
videos: [{
seqNo: "",
videoName: "",
videoSize: "",
videoSource: "",
videoType: "",
videoUrl: ""
}]
},
disabledOpenFlag: false, // 开启回放是否可点
downloadVideoFlag: true,// 拉流直播不显示下载
videoNumber: 0,
uploadProgress1: 0,
fileName: "",
fileSize: 0,
fileFlag: true,
deleteFileFlag: false,
circleId: null,
streamType: 1,
};
},
created() {
......@@ -253,6 +412,7 @@ export default {
this.dialogLivelinkVisible = true;
this.liveScope = row.liveScope;
this.liveStatus = row.liveStatus;
this.streamType = row.streamType;
console.log(
"liveLink() : liveScope = " +
this.liveScope +
......@@ -273,10 +433,438 @@ export default {
},
//关闭直播链接弹窗
handleLivelinkClose() {
this.dialogLivelinkVisible = false;
vm.dialogLivelinkVisible = false;
},
//回放
reviewLive(row) {},
// // 查询回放信息
// getPlayback(){
//
// }
//设置回放
setPlayback(row) {
vm.dialogLivePlaybackVisible = true;
const rtcId = row.rtcId;
vm.streamType = row.streamType;
// 拉流直播不显示选择区域
if(vm.streamType == 2){
vm.selectFlag = false;
vm.uploadFlag = true;
vm.downloadVideoFlag = false;
}
else {
vm.selectFlag = true;
}
openLoading(this);
getPlayback({rtcId}).then((res) => {
closeLoading(this);
if(res.code == "000000") {
vm.playbackForm = res.data;
if(vm.playbackForm.playbackUrls != null){
// if(vm.playbackForm.playbackUrls.originalUrls != null){
vm.playbackForm.videoSource = String(vm.playbackForm.videoSource);
// if(vm.playbackForm.videos != null && vm.playbackForm.videos.length > 0){
// vm.playbackForm.videos[0].videoSize = vm.videoSize(vm.playbackForm.videos[0].videoSize, 1);
// }
// 拉流直播 不显示两个选择按钮；只显示①上传回放视频
if(vm.streamType == 2){
vm.playbackForm.videoSource = "2";
vm.selectFlag = false;
vm.downloadVideoFlag = false;
}
// 网页直播
else {
// 存在多个原视频,如果直播原视频有大于1段，不显示两个选择按钮，而显示“存在..直播原视频，请下载合并后上传”
if(vm.playbackForm.playbackUrls.downloadUrls.length > 1){
vm.uploadFlag = true;
vm.selectFlag = false;
vm.numberShowFlag = true;
vm.videoNumber = this.playbackForm.playbackUrls.downloadUrls.length;
vm.playbackForm.videoSource = "2";
}
else {
vm.selectFlag = true;
vm.changeVideoSource();
vm.numberShowFlag = false;
// 当选择第二个按钮“上传回放视频”时，显示①下载②上传
if(vm.playbackForm.videoSource == "2"){
vm.downloadVideoFlag = true;
}
}
}
// 如果回放视频有，则显示删除，不显示上传
if(vm.playbackForm.videos != null && vm.playbackForm.videos.length > 0){
// 当选择第二个按钮“上传回放视频”时，显示①下载②上传,如果videoSource等于1，原视频直播，要显示上传，不显示删除
if(vm.playbackForm.videoSource == "1"){
vm.fileFlag = true;
vm.deleteFileFlag = false;
}
// 当选择第二个按钮“上传回放视频”时，显示①下载②上传,如果videoSource等于2，回放视频，要显示删除，不显示上传
else {
vm.fileFlag = false;
vm.deleteFileFlag = true;
}
}
// if(row.streamType == 1){
//
// vm.downloadVideoFlag = true;
// vm.changeVideoSource();
// }
// else {
// vm.playbackForm.videoSource = "2";
// }
// }
}
}
}).catch((error) => {
vm.$message({
message: "请重试",
type: 'error'
});
})
},
//关闭设置回放弹窗
handleLivePlaybackClose() {
vm.dialogLivePlaybackVisible = false;
vm.uploadFlag = false;
vm.delVideo();
closeLoading(this);
},
// 设置回放方式
changeVideoSource(){
if(vm.playbackForm.videoSource == "2"){
vm.uploadFlag = true;
}
else {
vm.uploadFlag = false;
}
},
// 下载
downloadV(type){
let downloadUrl = "";
if (type == "model") {
if(vm.numberShowFlag){
for(let i=0;i< vm.playbackForm.playbackUrls.downloadUrls.length;i++) {
vm.downloadVideo(vm.playbackForm.playbackUrls.downloadUrls[i]);
}
}
else {
// downloadUrl = "http://1302268825.vod2.myqcloud.com/22ae71e7vodcq1302268825/317cf9115285890804733258933/f0.mp4";
downloadUrl = vm.playbackForm.playbackUrls.downloadUrls[0];
console.log("下载", type, downloadUrl);
setTimeout(() => {
vm.downloadVideo(downloadUrl);
}, 500);
}
} else if (type == "fail") {
// downloadUrl = vm.failExcelUrl;
}
},
downloadVideo(downloadUrl){
// downloadUrl = "http://test1-videos.yunqueyi.com/video/mp4/protal/project/20200708120235951.mp4"
if(downloadUrl == null || downloadUrl == ""){
vm.$message.warning("下载地址不正确");
return;
}
// var link = document.createElement("a");
// downloadUrl = "http://1302268825.vod2.myqcloud.com/22ae71e7vodcq1302268825/317cf9115285890804733258933/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{
// window.open(url,'_blank')
// }
// let url = window.URL.createObjectURL(new Blob([data]))
// let link = document.createElement('a')
// link.style.display = 'none'
// link.href = "https://test1-videos.yunqueyi.com/video/mp4/protal/project/20200708120235951.mp4";
// link.setAttribute('download', '20200708120235951.mp4')
//
// document.body.appendChild(link)
// link.click()
// let fileName = "20200708120235951.mp4";
let fileName = vm.getFileName(downloadUrl);
if(downloadUrl.indexOf("http://") != -1){
let downArray = downloadUrl.split("://");
downloadUrl = downArray[0] + "s://" + downArray[1];
}
vm.downloadfile(downloadUrl, fileName, vm.getFileType(fileName));
},
// // 上传
// upload(){
//
// },
// 视频Size转换
videoToSize(fileSize, number){
return (fileSize / 1024 / 1024).toFixed(number);
},
videoToName(fileName, number){
if(fileName != null && fileName != ""){
const index = fileName.indexOf(".mp4");
const str = fileName.slice(0, index);
if(str.length > number){
return str.slice(0,number+1) + "..." + ".mp4";
}
else {
return fileName;
}
}
return fileName;
},
//上传直播简介
beforeUploadVideo(file) {
let fileLimit = {
// width: 750,
// height: 3000,
size: 800,
sizeText: "800Mb",
key: "imageContent",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
this.beforeUploadMore(file, fileLimit);
},
// 上传视频
beforeUploadMore(file, fileLimit){
const isMp4 = file.type === 'video/mp4'
const isSize = file.size / 1024 / 1024 < fileLimit.size
if (!isMp4) {
vm.$message.error('上传回放视频只能是mp4格式!')
// vm.isDisabledIns = false;
return;
}
if (!isSize) {
vm.$message.error('视频大小不符合规范，请根据规范上传视频')
// vm.isDisabledIns = false;
return;
}
vm.disabledOpenFlag = true;
vm.fileFlag = false;
vm.deleteFileFlag = true;
// vm.fileName = file.name;
// if(file.size != null){
// vm.fileSize = vm.videoSize(file.size, 1);
// }
// else {
// vm.fileSize = file.size;
// }
vm.playbackForm.videos = [{
seqNo: 0,
videoName: file.name,
videoSize: file.size,
videoSource: 2,
videoType: 1,
videoUrl: ""
}];
// 初始化
vm.uploadProgress1 = 0;
vm.uploadProgress = 0;
// vm.$message.success('开始上传')
doUpload(vm,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
if(vm.playbackForm.videos != null && vm.playbackForm.videos[0] != null){
vm.playbackForm.videos[0].videoUrl = path.fullPath;
}
// vm.playbackForm.videos[0].videoSize =
// 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(){
if(vm.uploadProgress1 > 0 && vm.uploadProgress1 < 100){
unsubscribe();
}
vm.uploadProgress1 = 0;
vm.fileFlag = true;
vm.deleteFileFlag = false;
vm.playbackForm.videos = [];
vm.disabledOpenFlag = false;
},
// 开启回放/结束回放
submitPlayback(canPlayback){
if(vm.videoSource == 1 && (vm.playbackForm.originalUrls != null && vm.playbackForm.originalUrls.length > 0)){
this.$message.warning("原视频地址不正确，请确认");
return;
}
if(vm.uploadFlag && canPlayback == 1){
if(vm.playbackForm.videos == null || vm.playbackForm.videos.length == 0){
this.$message.warning("请上传回放视频");
return;
}
}
openLoading(this);
// 开启回放
this.playbackForm.canPlayback = canPlayback;
let params = this.playbackForm;
postPlayback(params).then((res) => {
closeLoading(this);
if(res.code == "000000") {
if(canPlayback == 1){
this.$message.success("开启成功");
}
else {
this.$message.success("关闭成功");
}
vm.dialogLivePlaybackVisible = false;
vm.getLiveList("", "");
} else {
if(canPlayback == 1){
this.$message.error("开启失败，请重试");
}
else {
this.$message.error("关闭失败，请重试");
}
}
}).catch((error) => {
this.$message.error("请重试");
})
},
// 关闭回放
closePlayback(row){
this.$confirm(`确定关闭回放吗？`, "", {
confirmButtonText: "关闭回放",
cancelButtonText: "取消",
type: "warning"
// customClass: 'range-make-box',
})
.then(() => {
openLoading(this);
// vm.submitPlayback(0);
let params = {rtcId: row.rtcId, canPlayback: 0};
postPlayback(params).then((res) => {
closeLoading(this);
if(res.code == "000000") {
// if(canPlayback == 0){
vm.$message.success("关闭成功");
vm.getLiveList("", "");
} else {
this.$message.error("关闭失败，请重试");
}
}).catch((error) => {
vm.$message.error("请重试");
})
})
.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") {
this.$message.success("结束成功");
vm.getLiveList("", "");
} else {
this.$message.error("结束失败，请重试");
}
}).catch((error) => {
this.$message.error("请重试");
})
})
.catch(() => {});
},
//数据统计
countLive(row) {
this.dialogStatisticsVisible = true;
......@@ -381,6 +969,9 @@ export default {
liveName: res.data.pageContents[i].name,
liveScope: res.data.pageContents[i].scope,
liveStatus: res.data.pageContents[i].liveStatus,
streamType: res.data.pageContents[i].streamType,
playbackSetFlag: res.data.pageContents[i].playbackSetFlag,
canPlayback: res.data.pageContents[i].canPlayback,
createTime: res.data.pageContents[i].createdTime,
startTime: res.data.pageContents[i].openTime,
endTime: res.data.pageContents[i].endTime,
......@@ -421,7 +1012,121 @@ export default {
url = this.guestUrl;
}
window.open(url);
},
/*
* 使用download.js 强制浏览器下载图片、视频等文件
* @param {any} url url链接地址
* @param {any} strFileName 文件名
* @param {any} strMimeType 文件类型
*/
downloadfile(url, strFileName, strMimeType) {
var xmlHttp = null;
if (window.ActiveXObject) {
// IE6, IE5 浏览器执行代码
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlHttp = new XMLHttpRequest();
}
//2.如果实例化成功，就调用open（）方法：
if (xmlHttp != null) {
xmlHttp.open("get", url, true);
xmlHttp.responseType = 'blob';//关键
xmlHttp.send();
xmlHttp.onreadystatechange = doResult; //设置回调函数
}
function doResult() {
if (xmlHttp.readyState == 4) { //4表示执行完成
if (xmlHttp.status == 200) { //200表示执行成功
DownloadJS(xmlHttp.response, strFileName, strMimeType);
}
// else {
// vm.$message.error("下载失败");
// }
}
}
},
getFileName(url){
const urlArray = url.split("/");
const length = urlArray.length;
const fileName = urlArray[length-1];
return fileName;
},
getFileType(fileName) {
// 后缀获取
let suffix = '';
// 获取类型结果
let result = '';
try {
const flieArr = fileName.split('.');
suffix = flieArr[flieArr.length - 1];
} catch (err) {
suffix = '';
}
// fileName无后缀返回 false
if (!suffix) { return false; }
suffix = suffix.toLocaleLowerCase();
// 图片格式
const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
// 进行图片匹配
result = imglist.find(item => item === suffix);
if (result) {
return 'image';
}
// 匹配txt
const txtlist = ['txt'];
result = txtlist.find(item => item === suffix);
if (result) {
return 'txt';
}
// 匹配 excel
const excelist = ['xls', 'xlsx'];
result = excelist.find(item => item === suffix);
if (result) {
return 'excel';
}
// 匹配 word
const wordlist = ['doc', 'docx'];
result = wordlist.find(item => item === suffix);
if (result) {
return 'word';
}
// 匹配 pdf
const pdflist = ['pdf'];
result = pdflist.find(item => item === suffix);
if (result) {
return 'pdf';
}
// 匹配 ppt
const pptlist = ['ppt', 'pptx'];
result = pptlist.find(item => item === suffix);
if (result) {
return 'ppt';
}
// 匹配 视频
const videolist = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
result = videolist.find(item => item === suffix);
if (result) {
return 'video';
}
// 匹配 音频
const radiolist = ['mp3', 'wav', 'wmv'];
result = radiolist.find(item => item === suffix);
if (result) {
return 'radio';
}
// 其他 文件类型
return 'other';
}
}
};
</script>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或