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

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 官方文档

          ...全文
          297 回复 打赏 收藏 转发到动态 举报
          AI 作业
          写回复
          用AI写文章
          回复
          切换为时间正序
          请发表友善的回复…
          发表回复

          1,582

          社区成员

          发帖
          与我相关
          我的任务
          社区描述
          爱智开发者平台是一个开放的物联网平台,通过爱智世界,应用开发者可以把自己的应用分发到亿万用户的设备上,硬件开发者能够把设备能力开放给海量的开发者,让优质的应用脱颖而出,为用户提供更优秀的使用体验。
          边缘计算物联网javascript 企业社区
          社区管理员
          • EdgerOS
          • Lumos_zbj
          • dayinfinite
          加入社区
          • 近7日
          • 近30日
          • 至今
          社区公告
          暂无公告

          试试用AI创作助手写篇文章吧