projectx/src/lib/RemoteFeedOnly.vue

<template>
    <RemoteFeed  v-if="remoteStream" :single-view="true" :opaqueId="opaqueId" :mypvtid="mypvtid" :feedid="remoteStream.id" :remote-stream="remoteStream" :janusInit="janusInit" :room="1234" ></RemoteFeed>
</template>

<script>
    import RemoteFeed from "@/lib/RemoteFeed";
    export default {
        name: "RemoteFeedOnly",
        props: {
            server: String,
            room: Number,
            user: String
        },
        components: {RemoteFeed},
        data: () => ({
            remoteStream: null,
            opaqueId: null,
            mypvtid: null,
            janusInit: null,
            run: false
        }),
        mounted() {
            this.janusInit = new this.$janus({
                success: this.janusSuccess,
                server: this.server,
                error: function (error) {
                    this.$janus.error(error);
                },
                //webrtcState: this.webrtcState,
                destroyed: function () {
                    window.location.reload();
                }
            })

        },
        methods: {
        janusMessage(msg, jsep) {
            console.log(msg);
            var event = msg["videoroom"];

            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) {
                        msg['publishers'].forEach(publisher => {
                            console.log(publisher.id)
                            console.log(publisher)
                            if (publisher.display === this.user) {
                                this.remoteStream = publisher
                                this.run = true
                            }
                        });
                    }
                } else if (event === "event") {
                    if (msg["publishers"] !== undefined && msg["publishers"] !== null) {
                        msg['publishers'].forEach(publisher => {
                            console.log(publisher.id)
                            console.log(publisher)
                            if (publisher.display === this.user) {
                                this.remoteStream = publisher
                                this.run = true
                            }
                        });

                    } else if (msg["leaving"] !== undefined && msg["leaving"] !== null) {
                        console.log("leaving")
                    }
                }
            }
            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) {
                    console.log("Our audio stream has been rejected, viewers won't hear us");
                }
            }
        },
         janusPluginSuccess (pluginHandle) {
            this.pluginHandle = pluginHandle
            this.$janus.log("Plugin attached! (" + this.pluginHandle.getPlugin() + ", id=" + this.pluginHandle.getId() + ")");
            this.$janus.log("  -- This is a publisher/manager");

            var register = { "request": "join", "room": this.room, "ptype": "publisher" };
            pluginHandle.send({"message": register});
        },
        janusSuccess() {
            this.opaqueId = "videoroomtest-" + this.$janus.randomString(12);

            this.janusInit.attach(
                {
                    plugin: "janus.plugin.videoroom",
                    opaqueId: this.opaqueId,
                    success: this.janusPluginSuccess,
                    error: this.janusPluginError,
                    onmessage: this.janusMessage,
                }
            )
        }
    }
    }
</script>

<style scoped>

</style>