parent
ae544add07
commit
3c87a375c3
@ -1,28 +1,63 @@ |
|||||||
<template> |
<template> |
||||||
<div id="app"> |
<v-app> |
||||||
<img alt="Vue logo" src="./assets/logo.png"> |
<v-app-bar |
||||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
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> |
</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> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import HelloWorld from './components/HelloWorld.vue' |
import VueJanus from "@/lib/VueJanus"; |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: 'App', |
name: 'App', |
||||||
|
|
||||||
components: { |
components: { |
||||||
HelloWorld |
VueJanus |
||||||
} |
}, |
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
data: () => ({ |
||||||
#app { |
test: ' ', |
||||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
room:1234 |
||||||
-webkit-font-smoothing: antialiased; |
}), |
||||||
-moz-osx-font-smoothing: grayscale; |
mounted () { |
||||||
text-align: center; |
|
||||||
color: #2c3e50; |
|
||||||
margin-top: 60px; |
|
||||||
} |
} |
||||||
</style> |
}; |
||||||
|
</script> |
||||||
|
|||||||
|
After Width: | Height: | Size: 539 B |
@ -1,58 +1,151 @@ |
|||||||
<template> |
<template> |
||||||
<div class="hello"> |
<v-container> |
||||||
<h1>{{ msg }}</h1> |
<v-row class="text-center"> |
||||||
<p> |
<v-col cols="12"> |
||||||
For a guide and recipes on how to configure / customize this project,<br> |
<v-img |
||||||
check out the |
:src="require('../assets/logo.svg')" |
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
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> |
</p> |
||||||
<h3>Installed CLI Plugins</h3> |
</v-col> |
||||||
<ul> |
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
<v-col |
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
class="mb-5" |
||||||
</ul> |
cols="12" |
||||||
<h3>Essential Links</h3> |
> |
||||||
<ul> |
<h2 class="headline font-weight-bold mb-3"> |
||||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
What's next? |
||||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
</h2> |
||||||
<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> |
<v-row justify="center"> |
||||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
<a |
||||||
</ul> |
v-for="(next, i) in whatsNext" |
||||||
<h3>Ecosystem</h3> |
:key="i" |
||||||
<ul> |
:href="next.href" |
||||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
class="subheading mx-3" |
||||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
target="_blank" |
||||||
<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> |
{{ next.text }} |
||||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
</a> |
||||||
</ul> |
</v-row> |
||||||
</div> |
</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> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
export default { |
export default { |
||||||
name: 'HelloWorld', |
name: 'HelloWorld', |
||||||
props: { |
|
||||||
msg: String |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
data: () => ({ |
||||||
<style scoped> |
ecosystem: [ |
||||||
h3 { |
{ |
||||||
margin: 40px 0 0; |
text: 'vuetify-loader', |
||||||
} |
href: 'https://github.com/vuetifyjs/vuetify-loader', |
||||||
ul { |
}, |
||||||
list-style-type: none; |
{ |
||||||
padding: 0; |
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 { |
</script> |
||||||
display: inline-block; |
|
||||||
margin: 0 10px; |
|
||||||
} |
|
||||||
a { |
|
||||||
color: #42b983; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|||||||
@ -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 Vue from 'vue' |
||||||
|
import './plugins/axios' |
||||||
|
import JanusPlugin from "@/plugins/janus" |
||||||
import App from './App.vue' |
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({ |
new Vue({ |
||||||
render: h => h(App), |
vuetify, |
||||||
|
JanusPlugin, |
||||||
|
render: h => h(App) |
||||||
}).$mount('#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