parent
ae544add07
commit
3c87a375c3
@ -1,28 +1,63 @@ |
||||
<template> |
||||
<div id="app"> |
||||
<img alt="Vue logo" src="./assets/logo.png"> |
||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
||||
<v-app> |
||||
<v-app-bar |
||||
app |
||||
color="primary" |
||||
dark |
||||
> |
||||
<div class="d-flex align-center"> |
||||
<v-img |
||||
alt="Vuetify Logo" |
||||
class="shrink mr-2" |
||||
contain |
||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" |
||||
transition="scale-transition" |
||||
width="40" |
||||
/> |
||||
|
||||
<v-img |
||||
alt="Vuetify Name" |
||||
class="shrink mt-1 hidden-sm-and-down" |
||||
contain |
||||
min-width="100" |
||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png" |
||||
width="100" |
||||
/> |
||||
</div> |
||||
|
||||
<v-spacer></v-spacer> |
||||
|
||||
<v-btn |
||||
href="https://github.com/vuetifyjs/vuetify/releases/latest" |
||||
target="_blank" |
||||
text |
||||
> |
||||
<span class="mr-2">Latest Release</span> |
||||
<v-icon>mdi-open-in-new</v-icon> |
||||
</v-btn> |
||||
</v-app-bar> |
||||
|
||||
<v-content> |
||||
<VueJanus server="https://vid.w3ic.org/janus" :room="room" username="vuettest"/> |
||||
</v-content> |
||||
</v-app> |
||||
</template> |
||||
|
||||
<script> |
||||
import HelloWorld from './components/HelloWorld.vue' |
||||
import VueJanus from "@/lib/VueJanus"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
|
||||
components: { |
||||
HelloWorld |
||||
} |
||||
} |
||||
</script> |
||||
VueJanus |
||||
}, |
||||
|
||||
<style> |
||||
#app { |
||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
text-align: center; |
||||
color: #2c3e50; |
||||
margin-top: 60px; |
||||
data: () => ({ |
||||
test: ' ', |
||||
room:1234 |
||||
}), |
||||
mounted () { |
||||
} |
||||
</style> |
||||
}; |
||||
</script> |
||||
|
||||
|
After Width: | Height: | Size: 539 B |
@ -1,58 +1,151 @@ |
||||
<template> |
||||
<div class="hello"> |
||||
<h1>{{ msg }}</h1> |
||||
<p> |
||||
For a guide and recipes on how to configure / customize this project,<br> |
||||
check out the |
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
||||
<v-container> |
||||
<v-row class="text-center"> |
||||
<v-col cols="12"> |
||||
<v-img |
||||
:src="require('../assets/logo.svg')" |
||||
class="my-3" |
||||
contain |
||||
height="200" |
||||
/> |
||||
</v-col> |
||||
|
||||
<v-col class="mb-4"> |
||||
<h1 class="display-2 font-weight-bold mb-3"> |
||||
Welcome to Vuetify |
||||
</h1> |
||||
|
||||
<p class="subheading font-weight-regular"> |
||||
For help and collaboration with other Vuetify developers, |
||||
<br>please join our online |
||||
<a |
||||
href="https://community.vuetifyjs.com" |
||||
target="_blank" |
||||
>Discord Community</a> |
||||
</p> |
||||
<h3>Installed CLI Plugins</h3> |
||||
<ul> |
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
||||
</ul> |
||||
<h3>Essential Links</h3> |
||||
<ul> |
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
||||
</ul> |
||||
<h3>Ecosystem</h3> |
||||
<ul> |
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
||||
</ul> |
||||
</div> |
||||
</v-col> |
||||
|
||||
<v-col |
||||
class="mb-5" |
||||
cols="12" |
||||
> |
||||
<h2 class="headline font-weight-bold mb-3"> |
||||
What's next? |
||||
</h2> |
||||
|
||||
<v-row justify="center"> |
||||
<a |
||||
v-for="(next, i) in whatsNext" |
||||
:key="i" |
||||
:href="next.href" |
||||
class="subheading mx-3" |
||||
target="_blank" |
||||
> |
||||
{{ next.text }} |
||||
</a> |
||||
</v-row> |
||||
</v-col> |
||||
|
||||
<v-col |
||||
class="mb-5" |
||||
cols="12" |
||||
> |
||||
<h2 class="headline font-weight-bold mb-3"> |
||||
Important Links |
||||
</h2> |
||||
|
||||
<v-row justify="center"> |
||||
<a |
||||
v-for="(link, i) in importantLinks" |
||||
:key="i" |
||||
:href="link.href" |
||||
class="subheading mx-3" |
||||
target="_blank" |
||||
> |
||||
{{ link.text }} |
||||
</a> |
||||
</v-row> |
||||
</v-col> |
||||
|
||||
<v-col |
||||
class="mb-5" |
||||
cols="12" |
||||
> |
||||
<h2 class="headline font-weight-bold mb-3"> |
||||
Ecosystem |
||||
</h2> |
||||
|
||||
<v-row justify="center"> |
||||
<a |
||||
v-for="(eco, i) in ecosystem" |
||||
:key="i" |
||||
:href="eco.href" |
||||
class="subheading mx-3" |
||||
target="_blank" |
||||
> |
||||
{{ eco.text }} |
||||
</a> |
||||
</v-row> |
||||
</v-col> |
||||
</v-row> |
||||
</v-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'HelloWorld', |
||||
props: { |
||||
msg: String |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
||||
<style scoped> |
||||
h3 { |
||||
margin: 40px 0 0; |
||||
} |
||||
ul { |
||||
list-style-type: none; |
||||
padding: 0; |
||||
data: () => ({ |
||||
ecosystem: [ |
||||
{ |
||||
text: 'vuetify-loader', |
||||
href: 'https://github.com/vuetifyjs/vuetify-loader', |
||||
}, |
||||
{ |
||||
text: 'github', |
||||
href: 'https://github.com/vuetifyjs/vuetify', |
||||
}, |
||||
{ |
||||
text: 'awesome-vuetify', |
||||
href: 'https://github.com/vuetifyjs/awesome-vuetify', |
||||
}, |
||||
], |
||||
importantLinks: [ |
||||
{ |
||||
text: 'Documentation', |
||||
href: 'https://vuetifyjs.com', |
||||
}, |
||||
{ |
||||
text: 'Chat', |
||||
href: 'https://community.vuetifyjs.com', |
||||
}, |
||||
{ |
||||
text: 'Made with Vuetify', |
||||
href: 'https://madewithvuejs.com/vuetify', |
||||
}, |
||||
{ |
||||
text: 'Twitter', |
||||
href: 'https://twitter.com/vuetifyjs', |
||||
}, |
||||
{ |
||||
text: 'Articles', |
||||
href: 'https://medium.com/vuetify', |
||||
}, |
||||
], |
||||
whatsNext: [ |
||||
{ |
||||
text: 'Explore components', |
||||
href: 'https://vuetifyjs.com/components/api-explorer', |
||||
}, |
||||
{ |
||||
text: 'Select a layout', |
||||
href: 'https://vuetifyjs.com/layout/pre-defined', |
||||
}, |
||||
{ |
||||
text: 'Frequently Asked Questions', |
||||
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions', |
||||
}, |
||||
], |
||||
}), |
||||
} |
||||
li { |
||||
display: inline-block; |
||||
margin: 0 10px; |
||||
} |
||||
a { |
||||
color: #42b983; |
||||
} |
||||
</style> |
||||
</script> |
||||
|
||||
@ -0,0 +1,124 @@ |
||||
<template> |
||||
<div class="vid_main"> |
||||
<video ref="feed_video" width="100%" height="100%" autoplay playsinline/> |
||||
<div class="info">{{ bitrate }}</div> |
||||
<div class="actions"></div> |
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
janusInit: Object, |
||||
opaqueId: String, |
||||
room: Number, |
||||
mypvtid: String, |
||||
feedid: String |
||||
}, |
||||
name: "RemoteFeed", |
||||
data: () => ({ |
||||
remoteFeed: null, |
||||
bitrateTimer: null, |
||||
bitrate: 0 |
||||
}), |
||||
mounted () { |
||||
console.log(this.janusInit) |
||||
this.janusInit.attach({ |
||||
plugin: "janus.plugin.videoroom", |
||||
opaqueId: this.opaqueId, |
||||
success: this.onSuccess, |
||||
onmessage: this.onMessage, |
||||
error: function(error) { |
||||
console.log(" -- Error attaching plugin...", error); |
||||
// bootbox.alert("Error attaching plugin... " + error); |
||||
}, |
||||
webrtcState: function(on) { |
||||
console.log("Janus says this WebRTC PeerConnection " + (on ? "up" : "down") + " now"); |
||||
}, |
||||
onlocalstream: this.onlocalstream, |
||||
onremotestream: this.onStream |
||||
|
||||
}) |
||||
}, |
||||
methods: { |
||||
onSuccess (pluginHandle) { |
||||
this.remoteFeed = pluginHandle; |
||||
this.remoteFeed.simulcastStarted = false; |
||||
console.log('Remote feed success') |
||||
var subscribe = { "request": "join", "room": this.room, "ptype": "subscriber", "feed": this.feedid, "private_id": this.mypvtid }; |
||||
|
||||
this.remoteFeed.send({"message": subscribe}); |
||||
|
||||
}, |
||||
onlocalstream (locals) { |
||||
console.log(locals) |
||||
}, |
||||
onStream (stream) { |
||||
console.log('stream is strarted') |
||||
|
||||
this.$refs.feed_video.srcObject = stream |
||||
setInterval(() => { |
||||
this.bitrate = this.remoteFeed.getBitrate() |
||||
},1000) |
||||
}, |
||||
feedResponse (jsep) { |
||||
var body = { "request": "start", "room": this.room } |
||||
this.remoteFeed.send({"message": body, "jsep": jsep}) |
||||
}, |
||||
feedError (error) { |
||||
console.log("WebRTC error:", error) |
||||
}, |
||||
onMessage (msg, jsep) { |
||||
console.log(msg) |
||||
console.log(jsep) |
||||
console.log("-------------------------") |
||||
var event = msg["videoroom"]; |
||||
if(msg["error"] !== undefined && msg["error"] !== null) { |
||||
console.log(msg["error"]); |
||||
} else if(event !== undefined && event != null) { |
||||
this.remoteFeed.rfid = msg["id"] |
||||
this.remoteFeed.rfdisplay = msg["display"] |
||||
|
||||
} else if(event === "event") { |
||||
var substream = msg["substream"] |
||||
var temporal = msg["temporal"] |
||||
console.log(substream,temporal) |
||||
} |
||||
if(jsep !== undefined && jsep !== null) { |
||||
console.log('jsep') |
||||
console.log(jsep) |
||||
this.remoteFeed.createAnswer( |
||||
{ |
||||
jsep: jsep, |
||||
// Add data:true here if you want to subscribe to datachannels as well |
||||
// (obviously only works if the publisher offered them in the first place) |
||||
media: { audioSend: false, videoSend: false }, // We want recvonly audio/video |
||||
success: this.feedResponse, |
||||
error: this.feedError |
||||
}); |
||||
} |
||||
}, |
||||
onError (error) { |
||||
console.log(error) |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.actions { |
||||
position: absolute; |
||||
bottom:0; |
||||
left:0; |
||||
} |
||||
.vid_main { |
||||
position: relative; |
||||
} |
||||
.info { |
||||
position: absolute; |
||||
right: 0; |
||||
top:0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,279 @@ |
||||
<template> |
||||
<v-container> |
||||
<v-dialog |
||||
v-model="deviceSelectDialog" |
||||
max-width="290" |
||||
> |
||||
<v-card> |
||||
<v-card-title class="headline">Configuration</v-card-title> |
||||
|
||||
<v-card-text> |
||||
<v-row> |
||||
<v-col md="12" cols="12"> |
||||
<v-select |
||||
label="Please select video device" |
||||
v-model="selectedVideo" |
||||
:items="videoDevices" |
||||
item-value="deviceId" |
||||
item-text="label" |
||||
></v-select> |
||||
</v-col> |
||||
<v-col md="12" cols="12"> |
||||
<v-select |
||||
label="Please select audio device" |
||||
:items="audioDevices" |
||||
v-model="selectedAudio" |
||||
item-value="deviceId" |
||||
item-text="label" |
||||
></v-select> |
||||
</v-col> |
||||
</v-row> |
||||
</v-card-text> |
||||
|
||||
<v-card-actions> |
||||
<v-spacer></v-spacer> |
||||
|
||||
<v-btn |
||||
color="green darken-1" |
||||
text |
||||
@click="deviceSelectDialog = false" |
||||
> |
||||
Disagree |
||||
</v-btn> |
||||
|
||||
<v-btn |
||||
color="green darken-1" |
||||
text |
||||
@click="selectDevice" |
||||
> |
||||
Agree |
||||
</v-btn> |
||||
</v-card-actions> |
||||
</v-card> |
||||
</v-dialog> |
||||
<v-btn @click="genRemoteFeed">Remote Feed</v-btn> |
||||
<v-row> |
||||
<v-col cols="12" md="3"> |
||||
<video ref="ownstream" class="rounded centered" id="myvideo" width="100%" height="100%" autoplay |
||||
playsinline muted="muted"/> |
||||
</v-col> |
||||
<v-col cols="12" md="3" v-for="remoteStream in remoteStreams" :key="remoteStream.id"> |
||||
<RemoteFeed :opaqueId="opaqueId" :mypvtid="mypvtid" :feedid="remoteStream.id" :janusInit="janusInit" :room="room" ></RemoteFeed> |
||||
</v-col> |
||||
</v-row> |
||||
</v-container> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
|
||||
import RemoteFeed from "@/lib/RemoteFeed"; |
||||
export default { |
||||
components: {RemoteFeed}, |
||||
props: { |
||||
server: String, |
||||
room: Number, |
||||
username: String |
||||
}, |
||||
data() { |
||||
return { |
||||
janusInit: null, |
||||
opaqueId: null, |
||||
pluginHandle: null, |
||||
mystream: null, |
||||
myid: '', |
||||
mypvtid: '', |
||||
selectedVideo: null, |
||||
selectedAudio: null, |
||||
videoDevices: [], |
||||
audioDevices: [], |
||||
deviceSelectDialog: false, |
||||
remoteStreams: [] |
||||
} |
||||
}, |
||||
name: "VueJanus", |
||||
mounted() { |
||||
this.janusInit = new this.$janus({ |
||||
success: this.janusSuccess, |
||||
server: this.server, |
||||
error: function (error) { |
||||
this.$janus.error(error); |
||||
}, |
||||
destroyed: function () { |
||||
window.location.reload(); |
||||
} |
||||
}) |
||||
|
||||
}, |
||||
methods: { |
||||
janusPluginError: function (error) { |
||||
console.log(error) |
||||
}, |
||||
consentDialog: function (on) { |
||||
// this.$janus.debug("Consent dialog should be " + (on ? "on" : "off") + " now"); |
||||
console.log(on) |
||||
}, |
||||
janusPluginSuccess: function (pluginHandle) { |
||||
this.pluginHandle = pluginHandle |
||||
this.$janus.log("Plugin attached! (" + this.pluginHandle.getPlugin() + ", id=" + this.pluginHandle.getId() + ")"); |
||||
this.$janus.log(" -- This is a publisher/manager"); |
||||
|
||||
this.$janus.listDevices(this.initDevices); |
||||
|
||||
|
||||
}, |
||||
initDevices: function (devices) { |
||||
console.log(devices) |
||||
devices.forEach(device => { |
||||
if (device.kind === 'videoinput') { |
||||
this.videoDevices.push(device) |
||||
} |
||||
if (device.kind === 'audioinput') { |
||||
this.audioDevices.push(device) |
||||
} |
||||
|
||||
}) |
||||
this.deviceSelectDialog = true |
||||
}, |
||||
genRemoteFeed: function () { |
||||
this.remoteStreams.forEach(item => { |
||||
this.createRemoteFeed(item) |
||||
}) |
||||
}, |
||||
offerSend: function (jsep) { |
||||
console.log('vid offer') |
||||
var publish = {"request": "configure", "audio": true, "video": true}; |
||||
|
||||
this.pluginHandle.send({"message": publish, "jsep": jsep}); |
||||
}, |
||||
controlPublishers: function(msg) { |
||||
msg["publishers"].forEach(item => { |
||||
var has = false |
||||
this.remoteStreams.forEach(rm => { |
||||
if (item.id === rm.id) has = true |
||||
}) |
||||
if (!has) { |
||||
this.remoteStreams.push(item) |
||||
} |
||||
|
||||
}) |
||||
}, |
||||
janusMessage: function (msg, jsep) { |
||||
// this.$janus.debug(" ::: Got a message (publisher) :::"); |
||||
console.log(msg); |
||||
// this.$janus.debug(jsep); |
||||
var event = msg["videoroom"]; |
||||
// this.$janus.debug("Event: " + event); |
||||
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) { |
||||
this.controlPublishers(msg) |
||||
} |
||||
} else if(event === "event") { |
||||
// Any new feed to attach to? |
||||
if (msg["publishers"] !== undefined && msg["publishers"] !== null) { |
||||
this.controlPublishers(msg) |
||||
|
||||
} else if(msg["leaving"] !== undefined && msg["leaving"] !== null) { |
||||
console.log("leaving") |
||||
this.remoteStreams.forEach(item => { |
||||
if (item.id === msg['leaving']) this.remoteStreams.splice(this.remoteStreams.indexOf(item),1) |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
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) { |
||||
// Audio has been rejected |
||||
//toastr.warning("Our audio stream has been rejected, viewers won't hear us"); |
||||
console.log("Our audio stream has been rejected, viewers won't hear us"); |
||||
} |
||||
} |
||||
}, |
||||
onlocalstream: function (stream) { |
||||
// this.$janus.debug(" ::: Got a local stream :::"); |
||||
// this.$janus.debug(stream); |
||||
this.mystream = stream |
||||
console.log(this.$refs) |
||||
console.log(this.$refs["ownstream"]) |
||||
this.$refs.ownstream.srcObject = this.mystream |
||||
|
||||
}, |
||||
restartDevices: function () { |
||||
this.deviceSelectDialog = false |
||||
|
||||
var media = { |
||||
audioRecv: false, videoRecv: false, audioSend: true, videoSend: true, |
||||
audio: { |
||||
deviceId: { |
||||
exact: this.selectedAudio |
||||
} |
||||
}, |
||||
replaceAudio: true, // This is only needed in case of a renegotiation |
||||
video: { |
||||
deviceId: { |
||||
exact: this.selectedVideo |
||||
} |
||||
}, |
||||
replaceVideo: true, |
||||
}; |
||||
|
||||
|
||||
this.pluginHandle.createOffer( |
||||
{ |
||||
media: media, |
||||
success: this.offerSend, |
||||
error: function (error) { |
||||
// An error has occurred ... |
||||
console.log(error) |
||||
} |
||||
}) |
||||
}, |
||||
webrtcState: function (on) { |
||||
this.$janus.log("Janus says our WebRTC PeerConnection is " + (on ? "up" : "down") + " now"); |
||||
}, |
||||
mediaState: function (medium, on) { |
||||
this.$janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium); |
||||
}, |
||||
selectDevice: function () { |
||||
console.log(this.selectedVideo) |
||||
console.log(this.selectedAudio) |
||||
// this.$refs.ownstream.setSinkId(this.selectedVideo) |
||||
// this.$refs.ownstream.setSinkId(this.selectedAudio) |
||||
|
||||
var register = {"request": "join", "room": this.room, "ptype": "publisher", "display": this.username}; |
||||
this.pluginHandle.send({"message": register}); |
||||
}, |
||||
janusSuccess: function () { |
||||
this.opaqueId = "videoroomtest-" + this.$janus.randomString(12); |
||||
|
||||
this.janusInit.attach( |
||||
{ |
||||
plugin: "janus.plugin.videoroom", |
||||
opaqueId: this.opaqueId, |
||||
success: this.janusPluginSuccess, |
||||
consentDialog: this.consentDialog, |
||||
error: this.janusPluginError, |
||||
mediaState: this.mediaState, |
||||
webrtcState: this.webrtcState, |
||||
onmessage: this.janusMessage, |
||||
onlocalstream: this.onlocalstream |
||||
} |
||||
) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,8 +1,14 @@ |
||||
import Vue from 'vue' |
||||
import './plugins/axios' |
||||
import JanusPlugin from "@/plugins/janus" |
||||
import App from './App.vue' |
||||
import vuetify from './plugins/vuetify'; |
||||
|
||||
Vue.config.productionTip = false |
||||
|
||||
Vue.config.productionTip = false |
||||
console.log("janus is installed", Vue.$janus) |
||||
new Vue({ |
||||
render: h => h(App), |
||||
vuetify, |
||||
JanusPlugin, |
||||
render: h => h(App) |
||||
}).$mount('#app') |
||||
|
||||
@ -0,0 +1,62 @@ |
||||
"use strict"; |
||||
|
||||
import Vue from 'vue'; |
||||
import axios from "axios"; |
||||
|
||||
// Full config: https://github.com/axios/axios#request-config
|
||||
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
|
||||
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
|
||||
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
|
||||
|
||||
let config = { |
||||
// baseURL: process.env.baseURL || process.env.apiUrl || ""
|
||||
// timeout: 60 * 1000, // Timeout
|
||||
// withCredentials: true, // Check cross-site Access-Control
|
||||
}; |
||||
|
||||
const _axios = axios.create(config); |
||||
|
||||
_axios.interceptors.request.use( |
||||
function(config) { |
||||
// Do something before request is sent
|
||||
return config; |
||||
}, |
||||
function(error) { |
||||
// Do something with request error
|
||||
return Promise.reject(error); |
||||
} |
||||
); |
||||
|
||||
// Add a response interceptor
|
||||
_axios.interceptors.response.use( |
||||
function(response) { |
||||
// Do something with response data
|
||||
return response; |
||||
}, |
||||
function(error) { |
||||
// Do something with response error
|
||||
return Promise.reject(error); |
||||
} |
||||
); |
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
Plugin.install = function(Vue, options) { |
||||
Vue.axios = _axios; |
||||
window.axios = _axios; |
||||
Object.defineProperties(Vue.prototype, { |
||||
axios: { |
||||
get() { |
||||
return _axios; |
||||
} |
||||
}, |
||||
$axios: { |
||||
get() { |
||||
return _axios; |
||||
} |
||||
}, |
||||
}); |
||||
}; |
||||
|
||||
Vue.use(Plugin) |
||||
|
||||
export default Plugin; |
||||
@ -0,0 +1,21 @@ |
||||
"use strict"; |
||||
|
||||
import Vue from 'vue' |
||||
import Janus from "@/lib/janus" |
||||
const _janus = Janus |
||||
|
||||
const JanusPlugin = { |
||||
// eslint-disable-next-line no-unused-vars
|
||||
install(Vue, options) { |
||||
console.log('install call') |
||||
console.log(_janus) |
||||
_janus.init({debug: true, callback: function() { |
||||
Vue.prototype.$janus = _janus |
||||
}}) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
export default JanusPlugin; |
||||
Vue.use(JanusPlugin) |
||||
@ -0,0 +1,23 @@ |
||||
import Vue from 'vue'; |
||||
import Vuetify from 'vuetify/lib'; |
||||
|
||||
Vue.use(Vuetify); |
||||
|
||||
export default new Vuetify({ |
||||
theme: { |
||||
options: { |
||||
customProperties: true, |
||||
}, |
||||
themes: { |
||||
light: { |
||||
primary: '#ee44aa', |
||||
secondary: '#424242', |
||||
accent: '#82B1FF', |
||||
error: '#FF5252', |
||||
info: '#2196F3', |
||||
success: '#4CAF50', |
||||
warning: '#FFC107' |
||||
}, |
||||
}, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,5 @@ |
||||
module.exports = { |
||||
"transpileDependencies": [ |
||||
"vuetify" |
||||
] |
||||
} |
||||
Loading…
Reference in new issue