Quick and dirty Janus WebRTC Gateway Streaming plugin component for Vue.js based on https://github.com/TechTeamer/janus-api

example.vue

<template>
  <div>
    <JanusStream :config="{ url: 'ws://127.0.0.1:8188' }" :stream="10" @status="streamStatus = $event" />
    stream: {{ streamStatus }}
  </div>
</template>

<script>
import JanusStream from '@/components/JanusStream.vue'

export default {
  name: 'example',
  components: {
    JanusStream
  },
  data () {
    return {
      streamStatus: null
    }
  }
}
</script>

JanusStream.vue

<template>
  <video controls></video>
</template>

<script>
/* Note: you may need to add `externals: { ws: "WebSocket"},` to Your webpack configuration for this to work properly */
import { Janus, StreamingJanusPlugin } from '@techteamer/janus-api'

export default {
  props: ['config', 'stream'],
  beforeDestroy () {
    clearInterval(this.bitrateInterval)
    clearInterval(this.bufferingInterval)
  },
  mounted () {
    let janus = this.janus = new Janus(this.config, console)
    let streaming = new StreamingJanusPlugin(console, false)
    let peerConnection = new RTCPeerConnection()

    this.bitrateInterval = setInterval(() => {
      // @TODO
      peerConnection.getStats().then((stats) => {
        // console.info(Array.from(stats.entries()))
      })
      this.$emit('bitrate', 0)
    }, 1000)

    this.$emit('status', 'init')
    janus.connect().then(() => {
      return janus.addPlugin(streaming)
    }).then(() => {
      console.info('plugin added', janus)

      peerConnection.onicecandidate = (event) => {
        console.log('@onicecandidate', event)
        if (!event.candidate || !event.candidate.candidate) {
          streaming.candidate({completed: true})
        } else {
          streaming.candidate({
            candidate: event.candidate.candidate,
            sdpMid: event.candidate.sdpMid,
            sdpMLineIndex: event.candidate.sdpMLineIndex
          })
        }
      }

      peerConnection.onaddstream = (mediaStreamEvent) => {
        console.log('@onaddstream', mediaStreamEvent)

        let videoElement = this.$el
        videoElement.srcObject = mediaStreamEvent.stream
        videoElement.play()

        if (this.bufferingInterval == undefined) {
          let lastPosition = 0
          this.bufferintInterval = setInterval(() => {
            if (lastPosition == videoElement.currentTime && !videoElement.paused) {
              this.$emit('status', 'buffering')
            } else {
              this.$emit('status', 'playing')
            }

            lastPosition = videoElement.currentTime
          }, 500)
        }
      }

      streaming.on('webrtcState', (a, b) => { console.log('webrtcState', a, b) })
      streaming.on('mediaState', (a, b) => { console.log('mediaState', a, b) })
      streaming.on('statusChange', (status) => {
        console.log('statusChange', status)
        this.$emit('status', status)
      })

      return streaming.watch(this.stream)
    }).then((jsep) => {
      return peerConnection.setRemoteDescription(new RTCSessionDescription(jsep))
    }).then(() => {
      console.log('remoteDescription set')
      return peerConnection.createAnswer({offerToReceiveAudio: true, offerToReceiveVideo: true})
    }).then(answer => {
      console.log('answerCreated', answer)
      peerConnection.setLocalDescription(answer)

      return streaming.start(answer)
    }).then(({body, json}) => {
      console.log('START', body, json)
    })
  }
}
</script>