parent
eb68c1e5c9
commit
eaad8a51c2
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,406 @@ |
|||||||
|
<template> |
||||||
|
<v-card class="fill-height align-center"> |
||||||
|
<v-dialog v-model="fileSystem"> |
||||||
|
<v-card> |
||||||
|
<v-card-title>File System</v-card-title> |
||||||
|
<v-card-text> |
||||||
|
<v-file-input label="Upload" id="ufile"></v-file-input><v-btn @click="uploadfile">upload</v-btn> |
||||||
|
<v-row> |
||||||
|
<v-col cols="12" md="2" v-for="file in files" :key="file"> |
||||||
|
<v-card> |
||||||
|
{{file}} |
||||||
|
</v-card> |
||||||
|
</v-col> |
||||||
|
</v-row> |
||||||
|
</v-card-text> |
||||||
|
</v-card> |
||||||
|
</v-dialog> |
||||||
|
<v-dialog v-model="createSceneModel" max-width="300px"> |
||||||
|
<v-card> |
||||||
|
<v-card-title>New Scene</v-card-title> |
||||||
|
<v-card-text> |
||||||
|
<v-text-field v-model="sceneName" label="Scene Name"></v-text-field> |
||||||
|
</v-card-text> |
||||||
|
<v-card-actions> |
||||||
|
<v-btn text @click="createSceneModel=false">Cancel</v-btn> |
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-btn text color="primary" @click="createScene">Save</v-btn> |
||||||
|
</v-card-actions> |
||||||
|
</v-card> |
||||||
|
</v-dialog> |
||||||
|
<v-dialog v-model="createSceneItem" max-width="300px"> |
||||||
|
<v-card> |
||||||
|
<v-card-title>New Source</v-card-title> |
||||||
|
<v-card-text> |
||||||
|
<v-text-field v-model="sourceName" label="Source Name"></v-text-field> |
||||||
|
<v-select v-model="sourceType" item-value="value" item-text="name" :items="[{name:'Image', value:'image_source'},{name: 'VLC Source', value: 'vlc_source'},{name: 'Media Source', value: 'ffmpeg_source'},{name: 'Text', value: 'text_ft2_source_v2'}]" label="Source Type"></v-select> |
||||||
|
<v-text-field label="Image Path" v-model="sourceSettings.file" v-if="sourceType === 'image_source'"></v-text-field> |
||||||
|
<v-text-field label="File Path" v-model="sourceSettings.localFile" v-if="sourceType === 'ffmpeg_source'"></v-text-field> |
||||||
|
<div v-if="sourceType === 'vlc_source'"> |
||||||
|
<div v-for="(file, index) in sourceSettings.playlist" :key="index"> |
||||||
|
{{file}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<v-text-field v-if="sourceType === 'vlc_source'" v-model="sourceSettings.file"></v-text-field><v-btn small text @click="addPlaylist(sourceSettings.file)">+</v-btn> |
||||||
|
</v-card-text> |
||||||
|
<v-card-actions> |
||||||
|
<v-btn text @click="createSceneItem=false">Cancel</v-btn> |
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-btn text color="primary" @click="createSource">Save</v-btn> |
||||||
|
</v-card-actions> |
||||||
|
</v-card> |
||||||
|
</v-dialog> |
||||||
|
<v-card-text> |
||||||
|
<v-row> |
||||||
|
<v-col cols="12" md="9"> |
||||||
|
<v-card ref="mainvid" id="mainvid" |
||||||
|
:style="`font-size:10px;height: ${vidheight}px;background: #ccc;position: relative`" |
||||||
|
v-if="selecteScene"> |
||||||
|
<div :style="`border:1px solid #ccc;width:${source.cx*vidperm}px;z-index:${selecteScene.sources.length - index};height:${source.cy*vidperm}px;background-size: 100% 100%;top:${source.y*vidperm}px;left:${source.x*vidperm}px;position:absolute;min-width:50px;min-height:50px;background:url()`" |
||||||
|
v-for="(source,index) in selecteScene.sources" :key="index"> |
||||||
|
<div style="top:0;left:0;position: absolute;color:#fff;text-shadow: #000 1px 1px"> |
||||||
|
{{source.name}} ({{source.id}}) |
||||||
|
</div> |
||||||
|
<div style="top:0;right:0;position: absolute;color:#fff;text-shadow: #000 1px 1px"> |
||||||
|
{{source.type}} ({{source.source_cx}} x {{source.source_cy}} ) |
||||||
|
</div> |
||||||
|
<img v-if="source.srcdata" width="100%" height="100%" :src="source.srcdata"/> |
||||||
|
</div> |
||||||
|
</v-card> |
||||||
|
</v-col> |
||||||
|
<v-col cols="12" md="3"> |
||||||
|
<v-card v-if="selectedItemProps"> |
||||||
|
<v-card-text> |
||||||
|
<v-text-field label="Name" v-model="selectedItemProps.name"></v-text-field> |
||||||
|
<v-text-field :label="`Width (Source: ${selectedItemProps.sourceWidth})`" |
||||||
|
v-model="selectedItemProps.width" @keyup="selectedItemProps.height=selectedItemProps.width * (selectedItemProps.sourceHeight/selectedItemProps.sourceWidth)"></v-text-field> |
||||||
|
<v-text-field :label="`Height (Source: ${selectedItemProps.sourceHeight})`" |
||||||
|
v-model="selectedItemProps.height"></v-text-field> |
||||||
|
</v-card-text> |
||||||
|
<v-card-actions> |
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-btn small @click="saveSelectedItem">Save</v-btn> |
||||||
|
</v-card-actions> |
||||||
|
</v-card> |
||||||
|
<br/> |
||||||
|
<v-card v-if="selectedItemSourceProps"> |
||||||
|
<v-card-title>Source Options |
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-btn icon x-smal @click="panels.source = !panels.source"> |
||||||
|
<v-icon>mdi-menu</v-icon> |
||||||
|
</v-btn> |
||||||
|
</v-card-title> |
||||||
|
<v-card-text v-show="panels.source"> |
||||||
|
<v-text-field v-if="selectedItemSourceProps.sourceType === 'xcomposite_input'" |
||||||
|
label="Capture Window" |
||||||
|
v-model="selectedItemSourceProps.sourceSettings.capture_window"></v-text-field> |
||||||
|
<v-text-field v-if="selectedItemSourceProps.sourceType === 'image_source'" label="File" |
||||||
|
v-model="selectedItemSourceProps.sourceSettings.file"></v-text-field> |
||||||
|
<div v-if="selectedItemSourceProps.sourceType === 'vlc_source'"> |
||||||
|
<div v-for="(item, index) in selectedItemSourceProps.sourceSettings.playlist" |
||||||
|
:key="index"> |
||||||
|
<v-row> |
||||||
|
<v-col cols="12" md="10">{{item.value}}</v-col> |
||||||
|
<v-col cols="12" md="2"> |
||||||
|
<v-btn icon small |
||||||
|
@click="selectedItemSourceProps.sourceSettings.playlist.splice(index,1)"> |
||||||
|
<v-icon>mdi-delete</v-icon> |
||||||
|
</v-btn> |
||||||
|
</v-col> |
||||||
|
</v-row> |
||||||
|
</div> |
||||||
|
<v-text-field v-if="selectedItemSourceProps.sourceType === 'vlc_source'" label="File" |
||||||
|
v-model="selectedItemSourceProps.file"></v-text-field> |
||||||
|
|
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-btn small |
||||||
|
@click="selectedItemSourceProps.sourceSettings.playlist.push({ hidden: false, selected: false, value: selectedItemSourceProps.file}); selectedItemSourceProps.file=''"> |
||||||
|
Add To Playlist |
||||||
|
</v-btn> |
||||||
|
|
||||||
|
</div> |
||||||
|
</v-card-text> |
||||||
|
<v-card-actions v-show="panels.source"> |
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-btn small>Save</v-btn> |
||||||
|
</v-card-actions> |
||||||
|
</v-card> |
||||||
|
<br/> |
||||||
|
<v-card v-if="selectedItemProps"> |
||||||
|
<v-card-title>Position |
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-btn icon x-smal @click="panels.position = !panels.position" l> |
||||||
|
<v-icon>mdi-menu</v-icon> |
||||||
|
</v-btn> |
||||||
|
</v-card-title> |
||||||
|
<v-card-text v-show="panels.position"> |
||||||
|
<v-text-field label="X" v-model="selectedItemProps.position.x"></v-text-field> |
||||||
|
<v-text-field label="Y" v-model="selectedItemProps.position.y"></v-text-field> |
||||||
|
<v-text-field label="Rotation" v-model="selectedItemProps.rotation"></v-text-field> |
||||||
|
</v-card-text> |
||||||
|
<v-card-actions v-show="panels.position"> |
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-btn small>Save</v-btn> |
||||||
|
</v-card-actions> |
||||||
|
|
||||||
|
</v-card> |
||||||
|
<br/> |
||||||
|
|
||||||
|
<v-card v-if="selectedItemProps"> |
||||||
|
<v-card-title>Crop |
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-btn icon x-smal @click="panels.crop = !panels.crop"> |
||||||
|
<v-icon>mdi-menu</v-icon> |
||||||
|
</v-btn> |
||||||
|
</v-card-title> |
||||||
|
<v-card-text v-show="panels.crop"> |
||||||
|
<v-text-field label="Top" v-model="selectedItemProps.crop.top"></v-text-field> |
||||||
|
<v-text-field label="Left" v-model="selectedItemProps.crop.left"></v-text-field> |
||||||
|
<v-text-field label="Bottom" v-model="selectedItemProps.crop.bottom"></v-text-field> |
||||||
|
<v-text-field label="Right" v-model="selectedItemProps.crop.right"></v-text-field> |
||||||
|
</v-card-text> |
||||||
|
<v-card-actions v-show="panels.crop"> |
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-btn small>Save</v-btn> |
||||||
|
</v-card-actions> |
||||||
|
|
||||||
|
</v-card> |
||||||
|
</v-col> |
||||||
|
</v-row> |
||||||
|
<v-row> |
||||||
|
<v-col cols="12" md="3"> |
||||||
|
<v-list> |
||||||
|
<v-list-item-group v-model="selecteSceneName" color="primary"> |
||||||
|
|
||||||
|
<v-list-item v-for="(scene,index) in scenes" :key="index" @click="setSelect(scene)"> |
||||||
|
<v-list-item-content> |
||||||
|
<v-list-item-title v-text="scene.name"></v-list-item-title> |
||||||
|
</v-list-item-content> |
||||||
|
</v-list-item> |
||||||
|
<v-list-item> |
||||||
|
<v-list-item-content> |
||||||
|
<v-list-item-title @click="createSceneModel=true">New Scene</v-list-item-title> |
||||||
|
</v-list-item-content> |
||||||
|
</v-list-item> |
||||||
|
</v-list-item-group> |
||||||
|
</v-list> |
||||||
|
</v-col> |
||||||
|
|
||||||
|
<v-col cols="12" md="3"> |
||||||
|
<v-list v-if="selecteScene"> |
||||||
|
<v-list-item v-for="(source,index) in selecteScene.sources" :key="index" |
||||||
|
@click="setItemSelect(source)"> |
||||||
|
<v-list-item-content> |
||||||
|
<v-list-item-title v-text="source.name"></v-list-item-title> |
||||||
|
</v-list-item-content> |
||||||
|
</v-list-item> |
||||||
|
<v-list-item> |
||||||
|
<v-list-item-content> |
||||||
|
<v-list-item-title @click="createSceneItem=true">New Item</v-list-item-title> |
||||||
|
</v-list-item-content> |
||||||
|
</v-list-item> |
||||||
|
</v-list> |
||||||
|
</v-col> |
||||||
|
</v-row> |
||||||
|
</v-card-text> |
||||||
|
</v-card> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
const OBSWebSocket = require('obs-websocket-js'); |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "ObsVue", |
||||||
|
props: { |
||||||
|
server: String |
||||||
|
}, |
||||||
|
data: () => ({ |
||||||
|
obs: null, |
||||||
|
selectedItemProps: null, |
||||||
|
selectedItemSourceProps: null, |
||||||
|
createSceneModel: false, |
||||||
|
createSceneItem: false, |
||||||
|
sourceSettings: { |
||||||
|
playlist: [], |
||||||
|
file: '', |
||||||
|
localFile: '' |
||||||
|
}, |
||||||
|
files: [ |
||||||
|
'test.jpg', |
||||||
|
'test.png' |
||||||
|
], |
||||||
|
sourceType: '', |
||||||
|
sourceName: '', |
||||||
|
scenes: [], |
||||||
|
sources: [], |
||||||
|
panels: { |
||||||
|
source: false, |
||||||
|
position: false, |
||||||
|
crop: false |
||||||
|
}, |
||||||
|
previewInterval: 0, |
||||||
|
selecteScene: null, |
||||||
|
sceneName: '', |
||||||
|
vidheight: 0, |
||||||
|
vidperm: 0, |
||||||
|
selecteSceneName: null, |
||||||
|
fileSystem: true |
||||||
|
|
||||||
|
}), |
||||||
|
mounted() { |
||||||
|
this.obs = new OBSWebSocket() |
||||||
|
this.getfiles() |
||||||
|
this.obs.connect({address: 'ws://localhost:4444', password: 'neverdie'}).then(this.connected) |
||||||
|
this.obs.on('error', err => { |
||||||
|
console.error('socket error:', err); |
||||||
|
}); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
uploadfile() { |
||||||
|
var file = document.getElementById('ufile') |
||||||
|
console.log(file.files[0]) |
||||||
|
var filereader = new FileReader() |
||||||
|
filereader.onloadend = () => { |
||||||
|
this.$axios.post('http://localhost:5000/api/upload', {"file": filereader.result.split(';base64,')[1], 'file_name': file.files[0].name}).then(this.getfiles) |
||||||
|
} |
||||||
|
|
||||||
|
filereader.readAsDataURL(file.files[0]); |
||||||
|
}, |
||||||
|
getfiles () { |
||||||
|
this.$axios.get('http://localhost:5000/api/files').then(result => { |
||||||
|
this.files = result.data |
||||||
|
}) |
||||||
|
}, |
||||||
|
addPlaylist(item) { |
||||||
|
this.sourceSettings.playlist.push({hidden: false, selected: false, value:item}) |
||||||
|
console.log(this.sourceSettings) |
||||||
|
}, |
||||||
|
createScene() { |
||||||
|
this.obs.send('CreateNewScene', {'sceneName': this.sceneName}).then(response => { |
||||||
|
console.log(response) |
||||||
|
this.sceneName = '' |
||||||
|
this.createSceneModel = false |
||||||
|
this.sceneList() |
||||||
|
}) |
||||||
|
}, |
||||||
|
createSource() { |
||||||
|
var sourceSetting; |
||||||
|
if (this.sourceType === 'vlc_source') sourceSetting = {playlist: this.sourceSettings.playlist} |
||||||
|
if (this.sourceType === 'ffmpeg_source') sourceSetting = {localfile: this.sourceSettings.localfile} |
||||||
|
if (this.sourceType === 'image_source') sourceSetting = {file: this.sourceSettings.file} |
||||||
|
console.log({sourceName: this.sourceName,sourceSettings: sourceSetting, sourceType: this.sourceType }) |
||||||
|
this.obs.send('CreateNewSource', {sourceName: this.sourceName,sourceSettings: sourceSetting, sourceType: this.sourceType }).then(response => { |
||||||
|
console.log(response) |
||||||
|
this.sceneName = '' |
||||||
|
this.createSceneModel = false |
||||||
|
this.obs.send('AddToScene', {sourceName:this.sourceName }) |
||||||
|
this.sceneList() |
||||||
|
}) |
||||||
|
}, |
||||||
|
onAuth() { |
||||||
|
console.log("auth") |
||||||
|
}, |
||||||
|
newScene() { |
||||||
|
|
||||||
|
}, |
||||||
|
setItemSelect(item) { |
||||||
|
this.obs.send("GetSceneItemProperties", { |
||||||
|
item: item.name, |
||||||
|
"scene-name": this.selecteScene.name |
||||||
|
}).then(data => { |
||||||
|
console.log("GetSceneItemProperties") |
||||||
|
console.log(data) |
||||||
|
this.selectedItemProps = data |
||||||
|
}) |
||||||
|
this.obs.send("GetSourceSettings", {sourceName: item.name}).then(data => { |
||||||
|
console.log("GetSourceSettings") |
||||||
|
console.log(data) |
||||||
|
this.selectedItemSourceProps = data |
||||||
|
}) |
||||||
|
}, |
||||||
|
setSelect(item) { |
||||||
|
console.log(item) |
||||||
|
this.selecteScene = item |
||||||
|
this.selecteSceneName = item.name |
||||||
|
this.obs.send('GetSourcesList').then(data => { |
||||||
|
console.log('GetSourcesList') |
||||||
|
console.log(data) |
||||||
|
}) |
||||||
|
|
||||||
|
if (this.previewInterval > 0) clearInterval(this.previewInterval) |
||||||
|
this.previewInterval = setInterval(() => { |
||||||
|
this.selecteScene.sources.forEach(sitem => { |
||||||
|
this.obs.send('TakeSourceScreenshot', { |
||||||
|
sourceName: sitem.name, |
||||||
|
embedPictureFormat: 'png' |
||||||
|
}).then(data => { |
||||||
|
sitem.srcdata = data.img |
||||||
|
this.selecteScene.__ob__.dep.notify() |
||||||
|
this.vidheight = document.getElementById('mainvid').offsetWidth / (16 / 9) |
||||||
|
this.vidperm = this.vidheight / 1080.0 |
||||||
|
}).catch(err => { |
||||||
|
console.log(err) |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, 500) |
||||||
|
|
||||||
|
}, |
||||||
|
saveSelectedItem() { |
||||||
|
console.log( { |
||||||
|
'item': this.selectedItemProps.name, |
||||||
|
position: { |
||||||
|
x: parseInt(this.selectedItemProps.position.x), |
||||||
|
y: parseInt(this.selectedItemProps.position.y), |
||||||
|
}, |
||||||
|
crop: this.selectedItemProps.crop, |
||||||
|
rotation: this.selectedItemProps.rotation, |
||||||
|
height: this.selectedItemProps.height, |
||||||
|
scale: {x:this.selectedItemProps.width/this.selectedItemProps.sourceWidth,y:this.selectedItemProps.height/this.selectedItemProps.sourceHeight} |
||||||
|
}) |
||||||
|
this.obs.send('SetSceneItemProperties', { |
||||||
|
item: this.selectedItemProps.name, |
||||||
|
position: { |
||||||
|
x: parseInt(this.selectedItemProps.position.x), |
||||||
|
y: parseInt(this.selectedItemProps.position.y), |
||||||
|
}, |
||||||
|
crop: { |
||||||
|
top:parseInt(this.selectedItemProps.crop.top), |
||||||
|
bottom:parseInt(this.selectedItemProps.crop.bottom), |
||||||
|
left:parseInt(this.selectedItemProps.crop.left), |
||||||
|
right:parseInt(this.selectedItemProps.crop.right), |
||||||
|
}, |
||||||
|
rotation: this.selectedItemProps.rotation, |
||||||
|
height: this.selectedItemProps.height, |
||||||
|
scale: {x:this.selectedItemProps.width/this.selectedItemProps.sourceWidth,y:this.selectedItemProps.height/this.selectedItemProps.sourceHeight} |
||||||
|
}).then(data => { |
||||||
|
console.log(data) |
||||||
|
this.sceneList() |
||||||
|
}) |
||||||
|
}, |
||||||
|
sceneList() { |
||||||
|
this.obs.send('GetSceneList').then(data => { |
||||||
|
console.log("scene", data) |
||||||
|
this.scenes = data.scenes |
||||||
|
data.scenes.forEach(item => { |
||||||
|
if (item.name === data["current-scene"]) { |
||||||
|
this.setSelect(item) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
connected() { |
||||||
|
this.obs.send('GetVersion').then(data => { |
||||||
|
this.obs.send('GetVersion').then(data2 => { |
||||||
|
console.log(data) |
||||||
|
console.log(data2) |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.sceneList() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,112 @@ |
|||||||
|
<template> |
||||||
|
<RemoteFeed v-if="remoteStream" :single-view="true" :opaqueId="opaqueId" :mypvtid="mypvtid" :feedid="remoteStream.id" :remote-stream="remoteStream" :janusInit="janusInit" :room="1234" ></RemoteFeed> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import RemoteFeed from "@/lib/RemoteFeed"; |
||||||
|
export default { |
||||||
|
name: "RemoteFeedOnly", |
||||||
|
props: { |
||||||
|
server: String, |
||||||
|
room: Number, |
||||||
|
user: String |
||||||
|
}, |
||||||
|
components: {RemoteFeed}, |
||||||
|
data: () => ({ |
||||||
|
remoteStream: null, |
||||||
|
opaqueId: null, |
||||||
|
mypvtid: null, |
||||||
|
janusInit: null, |
||||||
|
run: false |
||||||
|
}), |
||||||
|
mounted() { |
||||||
|
this.janusInit = new this.$janus({ |
||||||
|
success: this.janusSuccess, |
||||||
|
server: this.server, |
||||||
|
error: function (error) { |
||||||
|
this.$janus.error(error); |
||||||
|
}, |
||||||
|
//webrtcState: this.webrtcState, |
||||||
|
destroyed: function () { |
||||||
|
window.location.reload(); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
janusMessage(msg, jsep) { |
||||||
|
console.log(msg); |
||||||
|
var event = msg["videoroom"]; |
||||||
|
|
||||||
|
if (event !== undefined) { |
||||||
|
|
||||||
|
if (event === "joined") { |
||||||
|
this.myid = msg["id"]; |
||||||
|
this.mypvtid = msg["private_id"]; |
||||||
|
this.$janus.log("Successfully joined room " + msg["room"] + " with ID " + this.myid); |
||||||
|
// this.restartDevices() |
||||||
|
if (msg["publishers"] !== undefined && msg["publishers"] !== null) { |
||||||
|
msg['publishers'].forEach(publisher => { |
||||||
|
console.log(publisher.id) |
||||||
|
console.log(publisher) |
||||||
|
if (publisher.display === this.user) { |
||||||
|
this.remoteStream = publisher |
||||||
|
this.run = true |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
} else if (event === "event") { |
||||||
|
if (msg["publishers"] !== undefined && msg["publishers"] !== null) { |
||||||
|
msg['publishers'].forEach(publisher => { |
||||||
|
console.log(publisher.id) |
||||||
|
console.log(publisher) |
||||||
|
if (publisher.display === this.user) { |
||||||
|
this.remoteStream = publisher |
||||||
|
this.run = true |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
} else if (msg["leaving"] !== undefined && msg["leaving"] !== null) { |
||||||
|
console.log("leaving") |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
if (jsep !== undefined && jsep !== null) { |
||||||
|
|
||||||
|
console.log("Handling SDP as well..."); |
||||||
|
console.log(jsep); |
||||||
|
this.pluginHandle.handleRemoteJsep({jsep: jsep}); |
||||||
|
var audio = msg["audio_codec"]; |
||||||
|
if (this.mystream && this.mystream.getAudioTracks() && this.mystream.getAudioTracks().length > 0 && !audio) { |
||||||
|
console.log("Our audio stream has been rejected, viewers won't hear us"); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
janusPluginSuccess (pluginHandle) { |
||||||
|
this.pluginHandle = pluginHandle |
||||||
|
this.$janus.log("Plugin attached! (" + this.pluginHandle.getPlugin() + ", id=" + this.pluginHandle.getId() + ")"); |
||||||
|
this.$janus.log(" -- This is a publisher/manager"); |
||||||
|
|
||||||
|
var register = { "request": "join", "room": this.room, "ptype": "publisher" }; |
||||||
|
pluginHandle.send({"message": register}); |
||||||
|
}, |
||||||
|
janusSuccess() { |
||||||
|
this.opaqueId = "videoroomtest-" + this.$janus.randomString(12); |
||||||
|
|
||||||
|
this.janusInit.attach( |
||||||
|
{ |
||||||
|
plugin: "janus.plugin.videoroom", |
||||||
|
opaqueId: this.opaqueId, |
||||||
|
success: this.janusPluginSuccess, |
||||||
|
error: this.janusPluginError, |
||||||
|
onmessage: this.janusMessage, |
||||||
|
} |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,720 @@ |
|||||||
|
<template> |
||||||
|
<v-container> |
||||||
|
<v-row class="fill-height"> |
||||||
|
<v-col cols="24" md="1"> |
||||||
|
<v-card width="100%" dark class="fill-height"> |
||||||
|
<v-card-text> |
||||||
|
<v-row> |
||||||
|
<v-col> |
||||||
|
<v-icon @click="addItemStart('text')">mdi-format-color-text</v-icon> |
||||||
|
</v-col> |
||||||
|
<v-col> |
||||||
|
<v-icon @mousedown="addItemStart('rect')" @mouseup="clearStart()"> |
||||||
|
mdi-rectangle-outline |
||||||
|
</v-icon> |
||||||
|
</v-col> |
||||||
|
<v-col> |
||||||
|
<v-icon @mousedown="addItemStart('image')" @mouseup="clearStart()">mdi-image</v-icon> |
||||||
|
</v-col> |
||||||
|
</v-row> |
||||||
|
</v-card-text> |
||||||
|
</v-card> |
||||||
|
</v-col> |
||||||
|
<v-col cols="24" md="9"> |
||||||
|
<v-card width="100%" min-height="600" dark class="fill-height"> |
||||||
|
<v-card-text color="white"> |
||||||
|
<div ref="vid" @click="handleAction" style="width: 100%;background: #fff;position: relative"> |
||||||
|
<div v-for="(track, index) in mainTracks" :key="index"> |
||||||
|
<div v-for="(keyframe, index) in track.keyframes" :key="index"> |
||||||
|
<div @click="selectTrack(track)" |
||||||
|
v-if="keyframe.start <= currentTime && keyframe.end >=currentTime && track.type === 'text'" |
||||||
|
@mouseenter="colorBorder(track)" |
||||||
|
@mouseleave="colorBorderClear(track)" @mousedown="itemMoveStart" |
||||||
|
@mouseup="itemMoveEnd" :ref="'item'+track.id" @dblclick="editText(track)" |
||||||
|
:style="`padding:4px;color:${track.color};position:absolute;opacity:${vidTracks[track.id].opacity};top:${vidTracks[track.id].y-4}px;left:${vidTracks[track.id].x-4}px;font-size:${track.size};font-family:${track.font};border: 1px solid ${selectedTrack?(selectedTrack.id === track.id?'#ff0000':'transparent'):'transparent'}`" |
||||||
|
> |
||||||
|
<span :style="`line-height:${vidTracks[track.id].lineHeight}!important;letter-spacing:${vidTracks[track.id].letterSpacing}!important;`" v-html="track.text.replace(/\n/g, '<br>')"></span> |
||||||
|
<div></div> |
||||||
|
</div> |
||||||
|
<div @click="selectTrack(track)" @mouseenter="colorBorder(track)" |
||||||
|
v-if="keyframe.start <= currentTime && keyframe.end >=currentTime && track.type === 'image'" |
||||||
|
@mouseleave="colorBorderClear(track)" @mousedown="itemMoveStart" |
||||||
|
@mouseup="itemMoveEnd" :ref="'item'+track.id" @dblclick="editText(track)" |
||||||
|
:style="`padding:4px;color:${track.color};position:absolute;opacity:${vidTracks[track.id].opacity};top:${vidTracks[track.id].y-4}px;left:${vidTracks[track.id].x-4}px;font-size:${track.size};font-family:${track.font};border: 1px solid ${selectedTrack?(selectedTrack.id === track.id?'#ff0000':'transparent'):'transparent'}`" |
||||||
|
> |
||||||
|
<img :src="track.image_data" |
||||||
|
:width="vidTracks[track.id].width>0?vidTracks[track.id].width+'px':''" |
||||||
|
:height="vidTracks[track.id].height>0?vidTracks[track.id].height+'px':''"> |
||||||
|
<div></div> |
||||||
|
</div> |
||||||
|
<div @click="selectTrack(track)" @mouseenter="colorBorder(track)" |
||||||
|
v-if="keyframe.start <= currentTime && keyframe.end >=currentTime && track.type === 'rect'" |
||||||
|
@mouseleave="colorBorderClear(track)" @mousedown="itemMoveStart" |
||||||
|
@mouseup="itemMoveEnd" :ref="'item'+track.id" @dblclick="editText(track)" |
||||||
|
:style="`padding:4px;color:${track.color};position:absolute;opacity:${vidTracks[track.id].opacity};top:${vidTracks[track.id].y-4}px;left:${vidTracks[track.id].x-4}px;font-size:${track.size};font-family:${track.font};border: 1px solid ${selectedTrack?(selectedTrack.id === track.id?'#ff0000':'transparent'):'transparent'}`" |
||||||
|
> |
||||||
|
<div :style="`width:${vidTracks[track.id].width}px;height:${vidTracks[track.id].height}px;background-color:${track.color}`"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</v-card-text> |
||||||
|
</v-card> |
||||||
|
</v-col> |
||||||
|
<v-col cols="24" md="2"> |
||||||
|
<v-card width="100%" dark class="fill-height"> |
||||||
|
<v-card-text> |
||||||
|
<v-row> |
||||||
|
<v-col v-if="selectedTrack"> |
||||||
|
<v-text-field v-if="selectedTrack.type === 'text'" label="Font Size" |
||||||
|
placeholder="Font Size" |
||||||
|
v-model="mainTracks[currentKeyTrack.track].size" |
||||||
|
@keyup="mainTracks.__ob__.dep.notify()"></v-text-field> |
||||||
|
<v-textarea v-if="selectedTrack.type === 'text'" label="Text" |
||||||
|
@keyup="mainTracks.__ob__.dep.notify()" placeholder="Text" |
||||||
|
v-model="mainTracks[currentKeyTrack.track].text"></v-textarea> |
||||||
|
<v-text-field v-if="selectedTrack.type !== 'text'" label="Name" |
||||||
|
@keyup="mainTracks.__ob__.dep.notify()" placeholder="Name" |
||||||
|
v-model="mainTracks[currentKeyTrack.track].text"></v-text-field> |
||||||
|
|
||||||
|
<v-menu |
||||||
|
ref="menu" |
||||||
|
v-model="colorMenu" |
||||||
|
:close-on-content-click="false" |
||||||
|
|
||||||
|
transition="scale-transition" |
||||||
|
offset-y |
||||||
|
min-width="290px" |
||||||
|
v-if="selectedTrack.type !== 'image'" |
||||||
|
> |
||||||
|
<template v-slot:activator="{ on }"> |
||||||
|
<v-text-field |
||||||
|
v-model="mainTracks[currentKeyTrack.track].color" |
||||||
|
label="Color" |
||||||
|
readonly |
||||||
|
v-on="on" |
||||||
|
></v-text-field> |
||||||
|
</template> |
||||||
|
<v-color-picker v-model="mainTracks[currentKeyTrack.track].color" no-title |
||||||
|
scrollable show-swatches> |
||||||
|
<v-spacer></v-spacer> |
||||||
|
</v-color-picker> |
||||||
|
</v-menu> |
||||||
|
<v-text-field v-if="selectedTrack.type !== 'text'" label="Width" |
||||||
|
@keyup="mainTracks.__ob__.dep.notify()" placeholder="Width" |
||||||
|
v-model="mainTracks[currentKeyTrack.track].keyframes[currentKeyTrack.keyframe].width"></v-text-field> |
||||||
|
|
||||||
|
<v-text-field v-if="selectedTrack.type === 'text'" label="Line Height" |
||||||
|
@keyup="mainTracks.__ob__.dep.notify()" placeholder="Line Height" |
||||||
|
v-model="mainTracks[currentKeyTrack.track].keyframes[currentKeyTrack.keyframe].lineHeight"></v-text-field> |
||||||
|
<v-text-field v-if="selectedTrack.type === 'text'" label="Letter Spacing" |
||||||
|
@keyup="mainTracks.__ob__.dep.notify()" placeholder="Letter Spacing" |
||||||
|
v-model="mainTracks[currentKeyTrack.track].keyframes[currentKeyTrack.keyframe].letterSpacing"></v-text-field> |
||||||
|
<v-text-field v-if="selectedTrack.type !== 'text'" label="Height" |
||||||
|
@keyup="mainTracks.__ob__.dep.notify()" placeholder="Height" |
||||||
|
v-model="mainTracks[currentKeyTrack.track].keyframes[currentKeyTrack.keyframe].height"></v-text-field> |
||||||
|
<v-text-field v-if="selectedTrack.type === 'text'" label="Font" |
||||||
|
@keyup="mainTracks.__ob__.dep.notify()" placeholder="Text" |
||||||
|
v-model="mainTracks[currentKeyTrack.track].font"></v-text-field> |
||||||
|
<v-text-field label="X" @keyup="mainTracks.__ob__.dep.notify()" placeholder="X" |
||||||
|
v-model="mainTracks[currentKeyTrack.track].keyframes[currentKeyTrack.keyframe].x"></v-text-field> |
||||||
|
<v-text-field label="Y" @keyup="mainTracks.__ob__.dep.notify()" placeholder="Y" |
||||||
|
v-model="mainTracks[currentKeyTrack.track].keyframes[currentKeyTrack.keyframe].y"></v-text-field> |
||||||
|
<v-text-field label="Opacity" @keyup="mainTracks.__ob__.dep.notify()" |
||||||
|
placeholder="Opacity" |
||||||
|
v-model="mainTracks[currentKeyTrack.track].keyframes[currentKeyTrack.keyframe].opacity"></v-text-field> |
||||||
|
<v-btn small text @click="newKeyFrame">new keyframe</v-btn> |
||||||
|
<v-btn small text @click="newMask">new mask</v-btn> |
||||||
|
|
||||||
|
</v-col> |
||||||
|
</v-row> |
||||||
|
</v-card-text> |
||||||
|
</v-card> |
||||||
|
</v-col> |
||||||
|
<v-col cols="12" md="12"> |
||||||
|
<v-card width="100%" min-height="100" dark> |
||||||
|
<v-card-text ref="videoPanel"> |
||||||
|
<div id="video_tracks" ref="vidPanelTracks" @mouseleave="allmoveend"> |
||||||
|
<div :ref="'vidtrack'+track.id" v-for="(track, index) in mainTracks" :key="index" |
||||||
|
style="position: relative;padding: 3px"> |
||||||
|
<div @click="selectTrack(track)" @mousedown="startPositionTrack" @mouseup="allmoveend" |
||||||
|
|
||||||
|
:style="`border:1px solid ${selectedTrack?(selectedTrack.id===track.id?'#f00':'#ccc'):'#ccc'};position: absolute;height:23px;top:${(index*23)}px;left:${((track.start/timeLength)*100)}%;width:${((track.end-track.start)/timeLength)*100}%`"> |
||||||
|
<div style="background: #ededed;right: 0px;top:0px;position: absolute;height: 22px;width: 5px;" |
||||||
|
@mousedown="startChangeSizeTrack" @mouseup="allmoveend()"></div> |
||||||
|
<div>{{ track.text }} ({{ (track.end - track.start).toFixed(2) }} sec)</div> |
||||||
|
<div v-for="(keyframe , index) in track.keyframes" :key="index" |
||||||
|
:style="`position:absolute;height:8px;width:8px;background:red;top:6px;margin-left:-4px;left:${(((keyframe.start - track.start)/track.end)*100)}%`"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style="position: absolute;width: 5px; background: #aa00ff;height: 120px;top:3px;" |
||||||
|
ref="currentTime" @mousedown="moveStartTime=true" @mouseup="moveStartTime=false"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</v-card-text> |
||||||
|
<v-card-actions> |
||||||
|
<v-text-field label="Total Secs" v-model="timeLength"></v-text-field> |
||||||
|
<v-text-field label="Current" v-model="currentTime"></v-text-field> |
||||||
|
<v-btn @click="preview">Start</v-btn> |
||||||
|
<v-btn @click="previewStop">Stop</v-btn> |
||||||
|
</v-card-actions> |
||||||
|
</v-card> |
||||||
|
</v-col> |
||||||
|
</v-row> |
||||||
|
<div ref="vm"> |
||||||
|
<v-icon color="primary" :style="'position: absolute;left:' + moveX + 'px;top:'+ moveY + 'px'" |
||||||
|
v-if="create==='text'">mdi-format-color-text |
||||||
|
</v-icon> |
||||||
|
<v-icon color="primary" :style="'position: absolute;left:' + moveX + 'px;top:'+ moveY + 'px'" |
||||||
|
v-if="create==='image'">mdi-image |
||||||
|
</v-icon> |
||||||
|
<v-icon color="primary" :style="'position: absolute;left:' + moveX + 'px;top:'+ moveY + 'px'" |
||||||
|
v-if="create==='rect'">mdi-rectangle-outline |
||||||
|
</v-icon> |
||||||
|
<div :style="`position: absolute;border:1px solid #ff0000;width:${width}px;height:${height}px;left:${moveX}px;top:${moveY}px`" |
||||||
|
ref="rectcreate" v-if="create==='rect' && action==='paint'"></div> |
||||||
|
<div :style="`position: absolute;border:1px solid #ff0000;width:${width}px;height:${height}px;left:${moveX}px;top:${moveY}px`" |
||||||
|
ref="mask" v-if="oncreateMask && action==='paint'"></div> |
||||||
|
</div> |
||||||
|
</v-container> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "Animator", |
||||||
|
data: () => ({ |
||||||
|
currentKeyTrack: { |
||||||
|
keyframe: 0, |
||||||
|
track: 0 |
||||||
|
}, |
||||||
|
vidTracks: {}, |
||||||
|
action: null, |
||||||
|
item: null, |
||||||
|
create: null, |
||||||
|
index: 1, |
||||||
|
colorPick: '', |
||||||
|
timeLength: 60, |
||||||
|
moveStartTime: false, |
||||||
|
currentTime: 0, |
||||||
|
oncreateMask: false, |
||||||
|
pinterval: 0, |
||||||
|
width: 0, |
||||||
|
colorMenu: false, |
||||||
|
heigth: 0, |
||||||
|
clickOffset: { |
||||||
|
x: 0, |
||||||
|
y: 0 |
||||||
|
}, |
||||||
|
moveX: 0, |
||||||
|
mainTracks: localStorage.getItem('animator')?JSON.parse(localStorage.getItem('animator')):[], |
||||||
|
moveItem: false, |
||||||
|
moveY: 0, |
||||||
|
selectedTrack: null, |
||||||
|
sizeChangeStart: false, |
||||||
|
positionChangeStart: false, |
||||||
|
editingItem: null |
||||||
|
}), |
||||||
|
mounted() { |
||||||
|
this.$refs.vid.style.height = (this.$refs.vid.offsetWidth / (16 / 9)) + "px" |
||||||
|
window.onmousemove = (event) => { |
||||||
|
this.itemMove(event) |
||||||
|
var bodyRect = document.body.getBoundingClientRect() |
||||||
|
if (this.moveItem && this.currentKeyTrack) { |
||||||
|
var elemRect = this.$refs.vid.getBoundingClientRect(), |
||||||
|
offsetY = elemRect.top - bodyRect.top, |
||||||
|
offsetX = elemRect.left - bodyRect.left |
||||||
|
this.mainTracks[this.currentKeyTrack.track].y = (event.clientY - offsetY) - this.clickOffset.y |
||||||
|
this.mainTracks[this.currentKeyTrack.track].x = (event.clientX - offsetX) - this.clickOffset.x |
||||||
|
this.mainTracks[this.currentKeyTrack.track].keyframes[this.currentKeyTrack.keyframe].x = (event.clientX - offsetX) - this.clickOffset.x |
||||||
|
this.mainTracks[this.currentKeyTrack.track].keyframes[this.currentKeyTrack.keyframe].y = (event.clientY - offsetY) - this.clickOffset.y |
||||||
|
this.mainTracks.__ob__.dep.notify() |
||||||
|
} |
||||||
|
if (this.moveStartTime) { |
||||||
|
console.log('') |
||||||
|
|
||||||
|
var vidtrack = this.$refs.vidPanelTracks.getBoundingClientRect() |
||||||
|
var offsetXVid = vidtrack.left - bodyRect.left |
||||||
|
var pos = (event.clientX - offsetXVid + 12) |
||||||
|
if (pos >= 15 && pos <= vidtrack.width + 15) { |
||||||
|
this.$refs.currentTime.style.left = pos + "px" |
||||||
|
console.log(offsetXVid, pos, vidtrack.width) |
||||||
|
this.currentTime = (this.timeLength / vidtrack.width) * (pos - 15) |
||||||
|
} |
||||||
|
} |
||||||
|
if (this.selectedTrack && this.positionChangeStart) { |
||||||
|
var bodyRect3 = document.body.getBoundingClientRect(), |
||||||
|
elemRect3 = this.$refs['vidtrack' + this.selectedTrack.id][0].getBoundingClientRect(), |
||||||
|
offsetX3 = elemRect3.left - bodyRect3.left |
||||||
|
var length2 = this.timeLength / 100 |
||||||
|
|
||||||
|
var totalLength2 = (((((event.clientX - this.clickOffset.x) - offsetX3)) / elemRect3.width) * length2) * 100 |
||||||
|
this.mainTracks.forEach(track => { |
||||||
|
var tn = track.end - track.start |
||||||
|
var originalstart = track.start |
||||||
|
if (track.id === this.selectedTrack.id) { |
||||||
|
track.start = totalLength2 |
||||||
|
track.end = track.start + tn |
||||||
|
track.keyframes.forEach(keyframe => { |
||||||
|
var tnx = track.end - track.start |
||||||
|
keyframe.start = track.start + (originalstart - track.start) |
||||||
|
keyframe.end = track.start + tnx |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
if (this.selectedTrack && this.sizeChangeStart) { |
||||||
|
var bodyRect2 = document.body.getBoundingClientRect(), |
||||||
|
elemRect2 = this.$refs['vidtrack' + this.selectedTrack.id][0].getBoundingClientRect(), |
||||||
|
offsetX2 = elemRect2.left - bodyRect2.left |
||||||
|
var length = this.timeLength / 100 |
||||||
|
|
||||||
|
var totalLength = ((((event.clientX - offsetX2) + 2) / elemRect2.width) * length) * 100 |
||||||
|
this.mainTracks.forEach(track => { |
||||||
|
if (track.id === this.selectedTrack.id) track.end = totalLength |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
window.onkeyup = (event) => { |
||||||
|
console.log(event.key) |
||||||
|
if (event.target === document.body) { |
||||||
|
if (event.key === 'ArrowDown' && this.selectedTrack) this.mainTracks[this.currentKeyTrack.track].keyframes[this.currentKeyTrack.keyframe].y++ |
||||||
|
if (event.key === 'ArrowUp' && this.selectedTrack) this.mainTracks[this.currentKeyTrack.track].keyframes[this.currentKeyTrack.keyframe].y-- |
||||||
|
if (event.key === 'ArrowLeft' && this.selectedTrack) this.mainTracks[this.currentKeyTrack.track].keyframes[this.currentKeyTrack.keyframe].x-- |
||||||
|
if (event.key === 'ArrowRight' && this.selectedTrack) this.mainTracks[this.currentKeyTrack.track].keyframes[this.currentKeyTrack.keyframe].x++ |
||||||
|
if (event.key === "Escape") { |
||||||
|
this.selectedTrack = null |
||||||
|
this.action = null |
||||||
|
this.create = null |
||||||
|
this.moveItem = false |
||||||
|
this.sizeChangeStart = false |
||||||
|
this.positionChangeStart = false |
||||||
|
this.moveStartTime = false |
||||||
|
this.previewStop() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
|
||||||
|
editingItem(newval, oldval) { |
||||||
|
console.log(newval) |
||||||
|
console.log('old', oldval) |
||||||
|
// if (oldval !== null) { |
||||||
|
// this.vidTracks.forEach(item => { |
||||||
|
// if (item.id === newval.id) item = newval |
||||||
|
// }) |
||||||
|
// } |
||||||
|
}, |
||||||
|
mainTracks (newval) { |
||||||
|
console.log('maintrack change') |
||||||
|
localStorage.setItem('animator', JSON.stringify(newval)) |
||||||
|
}, |
||||||
|
currentTime(newval) { |
||||||
|
if (newval) { |
||||||
|
var videoPanel = this.$refs.vidPanelTracks.getBoundingClientRect() |
||||||
|
var left = videoPanel.width / this.timeLength |
||||||
|
if (!this.moveStartTime) this.$refs.currentTime.style.left = ((left * newval) + 15) + "px" |
||||||
|
this.vidTracks = [] |
||||||
|
this.mainTracks.forEach((track, tindex) => { |
||||||
|
|
||||||
|
if (track.start <= newval && newval <= track.end) { |
||||||
|
var ttrack = track |
||||||
|
var keyframe = null |
||||||
|
var nextframe = null |
||||||
|
track.keyframes.forEach((kvarey, index) => { |
||||||
|
if (kvarey.start <= newval && newval <= kvarey.end) { |
||||||
|
keyframe = kvarey |
||||||
|
|
||||||
|
if (this.selectedTrack) { |
||||||
|
if (this.selectedTrack.id === track.id) { |
||||||
|
this.currentKeyTrack.keyframe = index |
||||||
|
this.currentKeyTrack.track = tindex |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
ttrack.x = keyframe.x |
||||||
|
ttrack.y = keyframe.y |
||||||
|
ttrack.width = keyframe.width |
||||||
|
ttrack.height = keyframe.height |
||||||
|
ttrack.opacity = keyframe.opacity |
||||||
|
|
||||||
|
var starter = null |
||||||
|
track.keyframes.forEach((kvarey, index) => { |
||||||
|
if (keyframe.end <= kvarey.start) { |
||||||
|
if (kvarey.start < starter || starter === null) nextframe = index |
||||||
|
if (starter === null) starter = kvarey.start |
||||||
|
} |
||||||
|
}) |
||||||
|
if (nextframe !== null) { |
||||||
|
console.log(nextframe) |
||||||
|
if (track.type === 'text') { |
||||||
|
ttrack.letterSpacing = keyframe.letterSpacing |
||||||
|
ttrack.lineHeight = keyframe.lineHeight |
||||||
|
if (track.keyframes[nextframe].lineHeight !== ttrack.lineHeight) { |
||||||
|
var difflineHeight = (track.keyframes[nextframe].lineHeight - ttrack.lineHeight) |
||||||
|
difflineHeight = difflineHeight / (keyframe.end - keyframe.start) |
||||||
|
difflineHeight = (newval - keyframe.start) * difflineHeight |
||||||
|
ttrack.lineHeight = parseFloat(ttrack.lineHeight) + parseFloat(difflineHeight) |
||||||
|
} |
||||||
|
if (track.keyframes[nextframe].letterSpacing !== ttrack.letterSpacing) { |
||||||
|
var diffletterSpacing = (track.keyframes[nextframe].letterSpacing - ttrack.letterSpacing) |
||||||
|
diffletterSpacing = diffletterSpacing / (keyframe.end - keyframe.start) |
||||||
|
diffletterSpacing = (newval - keyframe.start) * diffletterSpacing |
||||||
|
ttrack.lineHeight = parseFloat(ttrack.letterSpacing) + parseFloat(diffletterSpacing) |
||||||
|
} |
||||||
|
} |
||||||
|
if (track.keyframes[nextframe].x !== ttrack.x) { |
||||||
|
var diffx = (track.keyframes[nextframe].x - ttrack.x) |
||||||
|
diffx = diffx / (keyframe.end - keyframe.start) |
||||||
|
diffx = (newval - keyframe.start) * diffx |
||||||
|
ttrack.x = parseFloat(ttrack.x) + parseFloat(diffx) |
||||||
|
} |
||||||
|
if (track.keyframes[nextframe].width !== ttrack.width) { |
||||||
|
var diffwidth = (track.keyframes[nextframe].width - ttrack.width) |
||||||
|
diffwidth = diffwidth / (keyframe.end - keyframe.start) |
||||||
|
diffwidth = (newval - keyframe.start) * diffwidth |
||||||
|
ttrack.width = parseFloat(ttrack.width) + parseFloat(diffwidth) |
||||||
|
} |
||||||
|
if (track.keyframes[nextframe].height !== ttrack.height) { |
||||||
|
|
||||||
|
console.log('heig', track.keyframes[nextframe].height, ttrack.height) |
||||||
|
var diffheight = (track.keyframes[nextframe].height - ttrack.height) |
||||||
|
diffheight = diffheight / (keyframe.end - keyframe.start) |
||||||
|
diffheight = (newval - keyframe.start) * diffheight |
||||||
|
ttrack.height = parseFloat(ttrack.height) + parseFloat(diffheight) |
||||||
|
console.log(ttrack.height) |
||||||
|
|
||||||
|
} |
||||||
|
if (track.keyframes[nextframe].opacity !== ttrack.opacity) { |
||||||
|
console.log('opa', track.keyframes[nextframe].opacity, ttrack.opacity) |
||||||
|
var diffopacity = (track.keyframes[nextframe].opacity - ttrack.opacity) |
||||||
|
diffopacity = parseFloat(diffopacity) / parseFloat(keyframe.end - keyframe.start) |
||||||
|
console.log(diffopacity) |
||||||
|
diffopacity = (newval - keyframe.start) * diffopacity |
||||||
|
ttrack.opacity = parseFloat(ttrack.opacity) + parseFloat(diffopacity) |
||||||
|
console.log(ttrack.opacity) |
||||||
|
} |
||||||
|
|
||||||
|
if (track.keyframes[nextframe].y !== ttrack.y) { |
||||||
|
var diffy = (track.keyframes[nextframe].y - ttrack.y) |
||||||
|
diffy = diffy / (keyframe.end - keyframe.start) |
||||||
|
diffy = (newval - keyframe.start) * diffy |
||||||
|
ttrack.y = parseFloat(ttrack.y) + parseFloat(diffy) |
||||||
|
} |
||||||
|
} |
||||||
|
this.vidTracks[track.id] = ttrack |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
newMask() { |
||||||
|
this.oncreateMask = true |
||||||
|
this.create = 'mask' |
||||||
|
this.action = "create" |
||||||
|
}, |
||||||
|
itemMoveStart(event) { |
||||||
|
console.log(event) |
||||||
|
this.moveItem = true |
||||||
|
this.clickOffset.x = event.offsetX |
||||||
|
this.clickOffset.y = event.offsetY |
||||||
|
}, |
||||||
|
preview() { |
||||||
|
this.pinterval = setInterval(() => { |
||||||
|
this.currentTime += 1 / 60 |
||||||
|
if (this.currentTime >= 60) this.currentTime = 0 |
||||||
|
}, 1000 / 60) |
||||||
|
}, |
||||||
|
previewStop() { |
||||||
|
if (this.pinterval) clearInterval(this.pinterval) |
||||||
|
}, |
||||||
|
newKeyFrame() { |
||||||
|
this.mainTracks.forEach(track => { |
||||||
|
if (track.id === this.selectedTrack.id) { |
||||||
|
var pushFrame = null |
||||||
|
var newFrames = [] |
||||||
|
var endTime = null |
||||||
|
track.keyframes.forEach(keyframe => { |
||||||
|
if (keyframe.start <= this.currentTime && keyframe.end >= this.currentTime) { |
||||||
|
pushFrame = { |
||||||
|
start: keyframe.start, |
||||||
|
x: keyframe.x, |
||||||
|
y: keyframe.y, |
||||||
|
width: keyframe.width, |
||||||
|
opacity: keyframe.opacity, |
||||||
|
height: keyframe.height, |
||||||
|
} |
||||||
|
pushFrame.start = this.currentTime |
||||||
|
keyframe.end = this.currentTime |
||||||
|
} |
||||||
|
if (pushFrame && pushFrame.start < keyframe.start) { |
||||||
|
endTime = keyframe.start |
||||||
|
} |
||||||
|
newFrames.push(keyframe) |
||||||
|
}) |
||||||
|
pushFrame.end = endTime |
||||||
|
if (!pushFrame.end) pushFrame.end = track.end |
||||||
|
newFrames.push(pushFrame) |
||||||
|
track.keyframes = newFrames |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
selectTrack(track) { |
||||||
|
if (this.selectedTrack === track) { |
||||||
|
this.selectedTrack = null |
||||||
|
return |
||||||
|
} |
||||||
|
this.selectedTrack = track |
||||||
|
console.log(this.selectedTrack) |
||||||
|
this.mainTracks.forEach((track, tindex) => { |
||||||
|
|
||||||
|
if (this.selectedTrack.id === track.id) { |
||||||
|
|
||||||
|
track.keyframes.forEach((kvarey, index) => { |
||||||
|
if (kvarey.start <= this.currentTime && this.currentTime <= kvarey.end) { |
||||||
|
this.currentKeyTrack.keyframe = index |
||||||
|
this.currentKeyTrack.track = tindex |
||||||
|
|
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
startChangeSizeTrack() { |
||||||
|
this.sizeChangeStart = true |
||||||
|
console.log("start size") |
||||||
|
} |
||||||
|
, startPositionTrack(event) { |
||||||
|
|
||||||
|
if (!this.sizeChangeStart) this.positionChangeStart = true |
||||||
|
console.log("start pos", event) |
||||||
|
this.clickOffset.x = event.offsetX |
||||||
|
}, |
||||||
|
deselectTrack() { |
||||||
|
this.selectedTrack = null |
||||||
|
this.sizeChangeStart = false |
||||||
|
this.positionChangeStart = false |
||||||
|
}, |
||||||
|
allmoveend() { |
||||||
|
this.sizeChangeStart = false |
||||||
|
this.positionChangeStart = false |
||||||
|
}, |
||||||
|
colorBorderClear(track) { |
||||||
|
var refItem = this.$refs['item' + track.id][0] |
||||||
|
var id = "" |
||||||
|
if (this.selectedTrack !== null) { |
||||||
|
id = this.selectedTrack.id |
||||||
|
} |
||||||
|
if (id !== track.id) { |
||||||
|
refItem.style.border = "1px solid transparent" |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
colorBorder(track) { |
||||||
|
|
||||||
|
var refItem = this.$refs['item' + track.id][0] |
||||||
|
var id = "" |
||||||
|
if (this.selectedTrack !== null) { |
||||||
|
id = this.selectedTrack.id |
||||||
|
} |
||||||
|
if (id !== track.id) { |
||||||
|
refItem.style.border = "1px solid #ededed" |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
itemMoveEnd() { |
||||||
|
this.moveItem = false |
||||||
|
}, |
||||||
|
newTrack() { |
||||||
|
this.tracks.push({}) |
||||||
|
}, |
||||||
|
editItem(item) { |
||||||
|
console.log(item) |
||||||
|
this.editingItem = item |
||||||
|
var ref = this.$refs['item' + item.id][0] |
||||||
|
console.log(ref) |
||||||
|
// this.vidTracks.forEach(item => { |
||||||
|
// var refItem = this.$refs['item' + item.id][0] |
||||||
|
// refItem.style.border = "1px solid transparent" |
||||||
|
// |
||||||
|
// }) |
||||||
|
ref.style.border = "1px solid #000" |
||||||
|
}, |
||||||
|
itemMove(event) { |
||||||
|
|
||||||
|
if (this.action) { |
||||||
|
if (this.action === 'create') { |
||||||
|
this.moveX = event.clientX - 30 |
||||||
|
this.moveY = event.clientY - 30 |
||||||
|
} |
||||||
|
|
||||||
|
if (this.action === 'paint') { |
||||||
|
this.width = event.clientX - this.moveX |
||||||
|
this.height = event.clientY - this.moveY |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
handleAction() { |
||||||
|
console.log(this.action) |
||||||
|
if (this.action === "create" || this.action === 'paint') { |
||||||
|
var bodyRect = document.body.getBoundingClientRect(), |
||||||
|
elemRect = this.$refs.vid.getBoundingClientRect(), |
||||||
|
offsetY = elemRect.top - bodyRect.top, |
||||||
|
offsetX = elemRect.left - bodyRect.left |
||||||
|
if ((this.create === 'rect' || this.create === 'mask') && this.action === 'create') { |
||||||
|
this.action = 'paint' |
||||||
|
return |
||||||
|
} |
||||||
|
if (this.create === 'mask') { |
||||||
|
|
||||||
|
|
||||||
|
this.mainTracks[this.currentKeyTrack.track].mask = { |
||||||
|
x: this.moveX - offsetX, |
||||||
|
y: this.moveY - offsetY, |
||||||
|
width: this.width, |
||||||
|
height: this.height, |
||||||
|
} |
||||||
|
this.mainTracks.__ob__.dep.notify() |
||||||
|
this.oncreateMask = false |
||||||
|
return |
||||||
|
} |
||||||
|
console.log(offsetY, offsetX) |
||||||
|
var item = { |
||||||
|
x: this.moveX - offsetX, |
||||||
|
y: this.moveY - offsetY, |
||||||
|
width: 0, |
||||||
|
height: 0, |
||||||
|
type: this.create, |
||||||
|
opacity: 1, |
||||||
|
index: this.index, |
||||||
|
id: new Date().getTime(), |
||||||
|
color: "#000", |
||||||
|
mask: null |
||||||
|
} |
||||||
|
if (this.create === 'image') { |
||||||
|
var upload = document.createElement('input') |
||||||
|
upload.type = 'file' |
||||||
|
upload.click() |
||||||
|
upload.onchange = () => { |
||||||
|
const reader = new FileReader(); |
||||||
|
reader.readAsDataURL(upload.files[0]); |
||||||
|
reader.onloadend = () => { |
||||||
|
item.image_data = reader.result |
||||||
|
var image = new Image(); |
||||||
|
image.src = reader.result |
||||||
|
image.onload = () => { |
||||||
|
console.log(item) |
||||||
|
this.index++ |
||||||
|
|
||||||
|
var maintrack = item |
||||||
|
maintrack.keyframes = [{ |
||||||
|
x: item.x, |
||||||
|
y: item.y, |
||||||
|
width: image.width, |
||||||
|
opacity: 1, |
||||||
|
height: image.height, |
||||||
|
start: this.currentTime, |
||||||
|
end: this.timeLength, |
||||||
|
lineHeight: 'default', |
||||||
|
letterSpacing: 'default' |
||||||
|
}] |
||||||
|
maintrack.start = this.currentTime |
||||||
|
maintrack.end = this.timeLength |
||||||
|
this.mainTracks.push(maintrack) |
||||||
|
this.vidTracks[item.id] = item |
||||||
|
this.action = null |
||||||
|
this.create = null |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
console.log(item) |
||||||
|
|
||||||
|
console.log(upload.files) |
||||||
|
} |
||||||
|
} else { |
||||||
|
|
||||||
|
|
||||||
|
console.log(item) |
||||||
|
this.index++ |
||||||
|
|
||||||
|
var maintrack = item |
||||||
|
maintrack.keyframes = [{ |
||||||
|
x: item.x, |
||||||
|
y: item.y, |
||||||
|
width: 0, |
||||||
|
height: 0, |
||||||
|
opacity: 1, |
||||||
|
lineHeight: 'initial', |
||||||
|
letterSpacing: 'initial', |
||||||
|
start: this.currentTime, |
||||||
|
end: this.timeLength |
||||||
|
}] |
||||||
|
if (this.create === 'rect') { |
||||||
|
maintrack.keyframes[0].width = this.width |
||||||
|
maintrack.keyframes[0].height = this.height |
||||||
|
} |
||||||
|
maintrack.start = this.currentTime |
||||||
|
maintrack.end = this.timeLength |
||||||
|
this.mainTracks.push(maintrack) |
||||||
|
|
||||||
|
if (this.create === 'text') { |
||||||
|
item.text = "Text" |
||||||
|
item.font = "Arial" |
||||||
|
item.size = '24px' |
||||||
|
item.color = '#000' |
||||||
|
item.align = 'left' |
||||||
|
item.lineHeight = 'initial' |
||||||
|
item.letterSpacing = 'initial' |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
this.vidTracks[item.id] = item |
||||||
|
this.action = null |
||||||
|
this.create = null |
||||||
|
} |
||||||
|
this.currentTime += 0.01 |
||||||
|
this.selectTrack(maintrack) |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
addItemStart(type) { |
||||||
|
console.log(type) |
||||||
|
this.create = type |
||||||
|
this.action = 'create' |
||||||
|
}, |
||||||
|
clearStart() { |
||||||
|
this.create = null |
||||||
|
}, |
||||||
|
getTracks() { |
||||||
|
this.tracks.forEach(item => { |
||||||
|
console.log(item) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
#video_edit { |
||||||
|
width: 1280px; |
||||||
|
height: 720px; |
||||||
|
border: 1px solid #ccc; |
||||||
|
} |
||||||
|
|
||||||
|
#video_tracks { |
||||||
|
min-height: 100px; |
||||||
|
padding: 2px; |
||||||
|
width: 100%; |
||||||
|
border: 1px solid #ccc; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
<template> |
||||||
|
<obs-vue server="ws://localhost:4444/"></obs-vue> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import ObsVue from "@/lib/ObsVue"; |
||||||
|
export default { |
||||||
|
name: "StreamControl", |
||||||
|
components: {ObsVue} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
<template> |
||||||
|
<div style="width: 1280px; height: 720px"> |
||||||
|
|
||||||
|
<RemoteFeedOnly @kick="kick" @rtp="rtp" v-if="rid" :creator="creator" :user="$route.params.user" :room="rid" server="ws://localhost:8188/ws" :username="name"></RemoteFeedOnly> |
||||||
|
<!-- <ObsVue server="ws://localhost:4444/"></ObsVue>--> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
// import VueJanus from "@/lib/VueJanus"; |
||||||
|
import RemoteFeedOnly from "@/lib/RemoteFeedOnly"; |
||||||
|
export default { |
||||||
|
name: "RoomView", |
||||||
|
// components: {VueJanus}, |
||||||
|
components: {RemoteFeedOnly}, |
||||||
|
data: () => ({ |
||||||
|
rid:'', |
||||||
|
name:'', |
||||||
|
dialog:false, |
||||||
|
creator:false |
||||||
|
}), |
||||||
|
mounted () { |
||||||
|
// if (!name) this.dialog = true |
||||||
|
this.getRoom() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
kick (user) { |
||||||
|
this.$axios.get(`kick/${this.$route.params.id}/${user}`).then(response => { |
||||||
|
console.log(response) |
||||||
|
}) |
||||||
|
}, |
||||||
|
rtp (user) { |
||||||
|
this.$axios.get(`rtp/${this.$route.params.id}/${user}`).then(response => { |
||||||
|
console.log(response) |
||||||
|
}) |
||||||
|
}, |
||||||
|
getRoom () { |
||||||
|
this.dialog = false |
||||||
|
this.$axios.get(`room/${this.$route.params.id}`).then(response => { |
||||||
|
this.rid = response.data.rid |
||||||
|
this.creator = response.data.can_modify |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
body , html, div { |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue