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/RemoteFeed.vue

160 lines
5.1 KiB

<template>
<div class="vid_main">
<video ref="feed_video" width="100%" height="100%" autoplay playsinline/>
<div class="info">{{ bitrate }}</div>
<div class="infoSlow">Slow Connection</div>
<div class="actions">
<v-slider
v-model="volume"
:min="0"
:max="100"
light
></v-slider>
</div>
</div>
</template>
<script>
export default {
props: {
janusInit: Object,
opaqueId: String,
room: Number,
mypvtid: Number,
feedid: Number
},
name: "RemoteFeed",
data: () => ({
remoteFeed: null,
bitrateTimer: null,
muted: false,
bitrate: 0,
volume: 100
}),
watch: {
volume (old, newVal) {
console.log(parseFloat(newVal) * 0.01)
this.$refs.feed_video.volume = parseFloat(newVal) * 0.01
}
},
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: {
mute () {
this.muted = !this.muted
this.$refs.feed_video.muted = this.muted
},
onSuccess (pluginHandle) {
this.remoteFeed = pluginHandle;
alert(pluginHandle.id)
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.feedInterval,1000)
},
feedInterval () {
this.bitrate = this.remoteFeed.getBitrate()
},
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)
if (msg["janus"]) {
console.log("######################")
console.log("nn",msg)
}
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;
color:#fff;
width:100%;
}
.vid_main {
position: relative;
}
.infoSlow {
position: absolute;
right: 0;
bottom:0;
color:#fff;
display:none
}
.info {
position: absolute;
right: 0;
top:0;
}
</style>