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.
124 lines
4.2 KiB
124 lines
4.2 KiB
<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>
|
|
|