You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
projectx/src/lib/VueJanus.vue

279 lines
11 KiB

<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>