Streaming over Janus using Vue.js

Question

I've ran Janus on a server and it works fine, but I'm kind of struggling finding a way to stream on the Janus server, I could not find any snippet code out there, I am developing with Vue.js, is there any library to stream over Janus? I just need a sample.

Answer 1

Janus Gateway has a streaming plugin. You need to enable the plugin and use some software like gstreamer or ffmpeg to transfer video data to the streaming plugin. The Q&A shows how to do this on Raspberry Pi. https://superuser.com/questions/1458442/h264-stream-to-janus-using-ffmpeg-on-raspberry-pi

Short summary is below.

Set up Janus gateway streaming plugin

The streaming plugin configuration file is /opt/janus/etc/janus/janus.plugin.streaming.jcfg. (official documentation)

You can find there are several sample configurations. For example, rtp-sample receives VP8/Opus video streaming data via RTP. If you want to stream H.264 video, you can edit the configuration to add this setting.

h264-sample: {
        type = "rtp"
        id = 10
        description = "H.264 live stream"
        audio = false
        video = true
        videoport = 8004
        videopt = 126
        videortpmap = "H264/90000"
        videofmtp = "profile-level-id=42e01f;packetization-mode=1"
        secret = "somesecretid"
}

After editing the configuration, you need to restart Janus gateway.

Start video streaming

You can send video data to Janus streaming plugin via RTP. For example, if you have FFMpeg, you can do like this.

$ ffmpeg \
    -f v4l2 -thread_queue_size 8192 -input_format yuyv422 \
    -video_size 1280x720 -framerate 10 -i /dev/video0 \
    -c:v h264_omx -profile:v baseline -b:v 1M -bf 0 \
    -flags:v +global_header -bsf:v "dump_extra=freq=keyframe" \
    -max_delay 0 -an -bufsize 1M -vsync 1 -g 10 \
    -f rtp rtp://127.0.0.1:8004/

This command reads video data from /dev/video0 and Please note the video parameters and output RTP port number (8084 in above example) should be corresponding to the Janus streaming plugin configuration.

Prepare Vue.js frontend

Next step is a frontend. You can create web frontend to view the streaming using janus.js bundled in Janus gateway. As described in the official documantation, you can use the janus.js as JavaScript module. But when you want to use it from Vue.js, you will need export-loader.

For example, you can create Vue.js2 project and add janus.js like this.

$ vue create mystreaming
$ cd mystreaming
$ yarn add git://github.com/meetecho/janus-gateway.git
$ yarn add exports-loader --dev

To add Webpack configuration, you need to create vue.config.js file with following content.

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({ adapter: 'webrtc-adapter' })
    ],
    module: {
      rules: [
        {
          test: require.resolve('janus-gateway'),
          loader: 'exports-loader',
          options: {
            exports: 'Janus',
          },
        }
      ]
    } 
  }
}

Then, you can import Janus object from Vue.js module like this.

import { Janus } from 'janus-gateway';

Then you can use janus.js and receive streaming video data using APIs.

I uploaded example Vue.js project, which might also help you.