projectx/src/lib/RemoteFeed.vue

<template>
    <div class="vid_main" @mouseleave="showaction = false"    @mouseover="showaction = true"
    >
        <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-show="showaction">
        <div class="infoName">{{ remoteStream.display }}</div>
        <div class="actions">
            <v-slider
                    v-model="volume"
                    :min="0"
                    :max="100"
                    dark
            ></v-slider>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
          janusInit: Object,
          opaqueId: String,
          room: Number,
          mypvtid: Number,
          feedid: Number,
          remoteStream: Object
        },
        name: "RemoteFeed",
        data: () => ({
            remoteFeed: null,
            bitrateTimer: null,
            muted: false,
            bitrate: 0,
            showaction: false,
            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;

                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;
    }
    .infoName {
        position: absolute;
        left: 5px;
        top:5px;
        color:#fff;
        font-size: 10px;
        text-shadow: 1px 1px #000;

    }
</style>