如何应用爱智的视频流模块完成拉流?看这篇就对了!

leecactus0 2022-09-16 15:09:25

在之前的文章中,我们已经讲述过爱智系统对视频流处理的支持详情。那么本篇文章将讲述,如何应用爱智的视频流模块来完成从移动端拉取视频流,再推至前端进行播放,完成类似直播的应用场景的过程。

 

引入模块

在拉取视频流的过程中我们需要用到 WebMedia 模块和 MediaDecoder 模块,同时需要建立一个 WebApp 来与前端进行通讯并将其绑定在我们的 WebMedia 上,我们先引入这些模块。


var WebApp = require('webapp');
var MediaDecoder = require('mediadecoder');
var WebMedia = require('webmedia');

     

    选择流媒体协议并绑定

     

    WebMedia 支持 http-flv 和 ws-flv 两种协议来传输视频流,我们可以根据自己的实际需求选择流媒体协议。将流媒体协议写入配置并在 WebMedia 启动时绑定到 WebMedia 上。

    http-flv

    
    var opts = {
      mode: 1,
      path: '/live.flv',
      mediaSource: {
        source: 'flv',
      },
      streamChannel: {
        protocol: 'xhr',
      },
    }
    var server = WebMedia.createServer(opts, app);

     ws-flv

    var opts = {
      mode: 1,
      path: '/live.flv',
      mediaSource: {
      source: 'flv',},
        streamChannel: {
         protocol: 'ws',
         server: wsSer
     },
    }
    var server = WebMedia.createServer(opts, app);

    在移动端查看拉流URL

    当 WebMedia 服务器启动成功后,我们需要启动媒体解码模块 MediaDecoder 并绑定拉流的 URL,我们可以在手机推流应用的设置中查看 URL。

     

    创建视频流解码模块

    使用 MediaDecoder 的接口来配置我们拉取视频流并解码的配置。配置完成后监听 remux 事件和 header 事件,将监听到的数据推入我们向前端发送视频流的通道中。完成视频流的拉取,解析和推送过程。

    server.on('start', () => {
      var netcam = new MediaDecoder().open('rtsp://192.168.128.102:8554/live.sdp', 
      {proto: 'tcp'}, 5000);
    
      netcam.destVideoFormat({width: 640, height: 360, fps: 1, 
      pixelFormat: MediaDecoder.PIX_FMT_RGB24, noDrop: false, disable: false});
      netcam.destAudioFormat({disable: false});
      netcam.remuxFormat({enable: true, enableAudio: true, audioFormat:'aac', 
      format: 'flv'});
      netcam.on('remux', (frame) => {
        var buf = Buffer.from(frame.arrayBuffer);
        server.pushStream(buf);
      });
      netcam.on('header', (frame) => {
        var buf = Buffer.from(frame.arrayBuffer);
        server.pushStream(buf);
      });
      netcam.start();
    });

    MediaDecoder 的配置接口详解

    mediadecoder.destVideoFormat(fmt) 设置媒体解码器的目标视频格式

    • fmt {Object} 目标视频格式

    • return {Boolean} 成功则返回 true,否则返回 false

       

    目标视频格式对象包含以下成员:

    • disable {Boolean} 是否禁用视频

    • width {Integer} 视频宽度

    • height {Integer} 视频高度

    • pixelFormat {Integer} 视频像素格式

    • fps {Integer} 视频帧率

       

      mediadecoder.destAudioFormat(fmt) 设置媒体解码器的目标音频格式

      • fmt {Object} 目标音频格式

      • return {Boolean} 成功则返回 true,否则返回 false

         

      目标音频格式对象包含以下成员:

      • disable {Boolean} 是否禁用音频

      • channelLayout{String} 音频通道布局

      • channels{Integer} 音频通道数

      • sampleRate {Integer} 音频采样率

      • sampleFormat {Integer} 音频帧格式

         

        mediadecoder.remuxFormat(fmt) 设置媒体解码器的 remux 格式。remux 数据主要用于直播服务器和视频录制

        • fmt{Object} remux 格式

        • return {Boolean} 成功则返回 true,否则返回 false

           

        目标音频格式对象包含以下成员:

        • enable{Boolean} 是否启用 remux

        • enableAudio{Boolean} 是否启用音频

        • audioFormat {String} 音频压缩格式

        • format {String} 目标媒体格式,默认为 flv 格式。

           

          需要注意的一点是,当我们需要拉取视频的同时还要拉取音频信息,那么就要将  MediaDecoder.remuxFormat(),接口中的 audioFormat 参数设置为 AAC('aac')。目前只支持这种格式的压缩。

           

          测试视频流传输

          编写简单的前端测试视频流是否推送成功,前端使用到 NodePlayer 工具处理显示 flv 文件。

          NodePlayer 简介

          NodePlayer 是一款能够播放 http-flv/websocket 协议直播流的工具,其特点是能够在 PC \ Android \ iOS 的浏览器 Webview 内实现毫秒级低延迟直播播放。并能够软解码 H.264 / H.265+AAC 流,WebGL 视频渲染,WebAudio 音频播放。支持在微信公众号、朋友圈分享中打开。在示例中使用 NodePlayer 作为解析工具还有一个原因就是其使用起来并不困难,参考示例或官网文档就可以快速上手。

          NodePlayer 下载地址:

          https://www.nodemedia.cn/doc/web/#/1?page_id=1

          前端测试代码

          
          <html>
          <div>
            <canvas id="video1" style="width:640px;height:480px;background-color: black;"></canvas>
          </div>
          <body>
          <script type="text/javascript" src="./NodePlayer.min.js"></script>
          <script>
          var player;
            NodePlayer.load(()=>{
              player = new NodePlayer();
            });
          player.setView("video1");
          
             
          player.on("start", () => {
          // 当连接成功并收到数据
          });
          player.on("stop", () => {
          // 当本地stop或远端断开连接
          });
          player.on("error", (e) => {
          // 当连接错误或播放中发生错误
          });
          player.on("videoInfo", (w, h) => {
              //当解析出视频信息时回调
              console.log("player on video info width=" + w + " height=" + h);
          })
          player.on("audioInfo", (r, c) => {
              //当解析出音频信息时回调
              console.log("player on audio info samplerate=" + r + " channels=" + c);
          })
          player.on("stats", (stats) => {
          // 每秒回调一次流统计信息
              console.log("player on stats=", stats);
          })
          
          player.setVolume(1000)
          player.start("http://192.168.128.1:10002/live.flv"); 
          </script>
          </body>
          </html>

          以上就是爱智视频流应用在拉流场景下的全部内容,如果感兴趣可以跟随官方文档尝试操作。移动端推流软件可以用 iOS 上的这个软件。

           

          下载链接:https://apps.apple.com/us/app/periscope-hd-h-264-rtsp-cam/id1095600218?l=zh

          文档链接

          EdgerOS WebMdiea 文档

          EdgerOS MediaDecoder 文档

          NoderPlayer 官方文档

          ...全文
          12 回复 打赏 收藏 举报
          写回复
          回复
          切换为时间正序
          请发表友善的回复…
          发表回复
          相关推荐
          发帖
          爱智开发者社区

          1529

          社区成员

          爱智开发者平台是一个开放的物联网平台,通过爱智世界,应用开发者可以把自己的应用分发到亿万用户的设备上,硬件开发者能够把设备能力开放给海量的开发者,让优质的应用脱颖而出,为用户提供更优秀的使用体验。
          边缘计算物联网javascript 企业社区
          社区管理员
          • EdgerOS
          • Lumos_zbj
          • dayinfinite
          加入社区
          帖子事件
          创建了帖子
          2022-09-16 15:09
          社区公告
          暂无公告