使用 Vue.js 在 Janus 上流式传输

Posted 2023-02-23

【中文标题】使用 Vue.js 在 Janus 上流式传输

【英文标题】：Streaming over Janus using Vue.js

【发布时间】：2020-09-02 09:01:06

【问题描述】：

我在服务器上运行了 Janus，它运行良好，但我有点 努力寻找在 Janus 服务器上流式传输的方法，我无法 找到任何 sn-p 代码，我正在使用 Vue.js 进行开发，有吗 有任何库可以通过 Janus 流式传输吗？我只需要一个样品。

【参考方案1】：

Janus Gateway 有一个流媒体插件。您需要启用插件并使用 gstreamer 或 ffmpeg 等软件将视频数据传输到流插件。 问答展示了如何在 Raspberry Pi 上执行此操作。 https://superuser.com/questions/1458442/h264-stream-to-janus-using-ffmpeg-on-raspberry-pi

简短的总结如下。

设置 Janus 网关流插件

流插件配置文件为/opt/janus/etc/janus/janus.plugin.streaming.jcfg。 (official documentation)

您可以找到几个示例配置。例如， rtp-sample 通过 RTP 接收 VP8/Opus 视频流数据。 如果您想串流 H.264 视频，您可以编辑配置以添加此设置。

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"

修改配置后，需要重启Janus网关。

开始视频流

您可以通过 RTP 将视频数据发送到 Janus 流媒体插件。例如，如果你有 FFMpeg，你可以这样做。

$ 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/

此命令从/dev/video0 和 请注意视频参数和输出RTP端口号（上例中8084）应与Janus流插件配置对应。

准备 Vue.js 前端

下一步是前端。您可以使用 Janus 网关中捆绑的 janus.js 创建 Web 前端来查看流媒体。如official documantation 中所述，您可以将 janus.js 用作 javascript 模块。但是当你想从 Vue.js 中使用它时，你需要export-loader。

比如你可以创建Vue.js2项目，像这样添加janus.js。

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

要添加Webpack配置，你需要创建vue.config.js文件，内容如下。

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',
          ,
        
      ]
     
  

然后，您可以像这样从 Vue.js 模块导入 Janus 对象。

import  Janus  from 'janus-gateway';

然后您可以使用 janus.js 并使用 APIs 接收流式视频数据。

我上传了example Vue.js project，也许对你也有帮助。