前端直播功能实现

直播现在很火，但是直播具体是通过什么方式实现的呢，他是如何通过前端的方式实现的呢？带着这两个问题我们研究一下

一、熟悉我们先了解一下直播的具体流程

在这里插入图片描述

通过上图我们可以大致的看到。直播一共分为三个步骤

  • 视频/图像采集
  • 流媒体服务器(做推流和拉流的中转服务器)
  • 拉流/播放

二、具体操作

流媒体服务器搭建

这里我们用的是nodejs+node-media-server来做我们的视频中间件。

你只需要建立一个文件夹，然后在这个文件夹做如下操作:

一、npm i node-media-server下载流媒体服务器包

二、创建一个app.js文件并输入以下内容

三、最后node app.js

服务成功启动之后，也可以在127.0.0.1:8000/admin访问流媒体服务的后台系统。

// app.js
const NodeMediaServer = require('node-media-server');

 const config = {
  //  接受推过来的流量
   rtmp: {
     port: 1935,
     chunk_size: 60000,
     gop_cache: true,
     ping: 30,
     ping_timeout: 60
   },
  //  转发推流的信息
   http: {
     port: 8000,
     allow_origin: '*'
   }
 };
 
 var nms = new NodeMediaServer(config)
 nms.run();

推流

一、传输的流媒体传输协议

常用的流媒体传输协议有RTMP， RTSP，HLS和HTTP-FLV。

  • RTMP (可用于推流端和拉流端)
    Real Time Messaging Protocol，实时消息传输协议。RTMP协议中，视频必须是H264编码，音频必须是AAC或MP3编码，且多以flv格式封包。因为RTMP协议传输的基本是FLV格式的流文件，必须使用flash播放器才能播放。

  • RTSP (用于推流端)
    Real-Time Stream Protocol，RTSP实时效果非常好，适合视频聊天、视频监控等方向。

  • HLS (用于拉流端)
    Http Live Streaming，由Apple公司定义的基于HTTP的流媒体实时传输协议。传输内容包括两部分：1.M3U8描述文件；2.TS媒体文件。TS媒体文件中的视频必须是H264编码，音频必须是AAC或MP3编码。数据通过HTTP协议传输。目前video.js库支持该格式文件的播放。

  • HTTP-FLV (用于拉流端)
    本协议就是http+flv，将音视频数据封装成FLV格式，然后通过http协议传输到客户端，这个协议大大方便了浏览器客户端播放直播视频流。目前flv.js库支持该格式的文件播放。

二、推流工具

推流我们通过ffmpeg这个工具来进行推流，推给我们的中间件1935端口

下载:brew install ffmpeg

ffmpeg，它是一个用来记录、转换数字音视频，并将其转化为流的开源软件,通过它可以进行视频的采集封装成流，并推送到流媒体服务器，例如在mac上面安装了这个软件之后，可以通过它调用摄像头，并将摄像头数据封装成流后推送到流媒体服务器，这个过程就是推流。ffmpeg还可以推送本地的视频文件到流媒体服务器。

三、具体操作

新建一个命令行选择并输入以下命令开始推送资源(其中的ip就是你电脑自己的ip)

推送视频:xm0525$ ffmpeg -re -i 视频名称 -c copy -f flv rtmp://ip:1935/live/STREAM_NAME

推送摄像头:ffmpeg -f avfoundation -video_size 640x480 -framerate 30 -i 0:0 -vcodec libx264 -preset veryfast -f flv rtmp://ip:1935/live/STREAM_NAME

推送屏幕:ffmpeg -f avfoundation -i "1" -vcodec libx264 -preset ultrafast -acodec libfaac -f flv rtmp://ip:1935/live/STREAM_NAME

拉流

新建一个index.html页面来接受推送过来的数据

我们通过flv.js来接受推过来的流量,注意里写的是转发过来的端口号8000端口

前端起一个http-server并访问自己的ip进入index.html页面

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
    <video id="videoElement" style="width: 80%" controls="controls"></video>
    <script>
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement')
        var flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: 'http://ip:8000/live/STREAM_NAME.flv'
        })
        flvPlayer.attachMediaElement(videoElement)
        flvPlayer.load()
        flvPlayer.play()
      }
    </script>
  </body>
</html>

总结

推流：ffmpeg

流媒体服务器：nodejs+node-media-server

拉流：flv.js+video

在这里插入图片描述

# node.js # html # vue.js # javascript
Logo
即构开发者社区

致力于链接即构和开发者，提供实时互动和元宇宙领域的前沿洞察、技术分享和丰富的开发者活动，共建实时互动世界。

更多推荐

ios视频直播SDK集成指引

此文介绍语音视频云服务商即构科技提供的ios视频直播SDK集成指引。此SDK可实现主播和观众以一对一、一对多、或多对多的关系等，并支持小程序。手动安装目前 ZegoLiveRoom SDK 仅支持手动安装，集成步骤如下。1 准备环境请确保开发环境满足以下技术要求：Apple Xcode 6.0 或以上版本iOS 7.0 或以上版本支持音视频功能的模拟器或真机2 下载...

avatar 即构开发者社区

音视频学习 AudioTrack、OpenSL ES 音频渲染

前言在讲解音频渲染之前，需要对音频的基础知识有所了解，所以该篇分为基础概念和AudioTrack 以及 OpenSL ES Demo 实例讲解，这样有助于更好的理解 Android 中音频渲染。音频的基础概念涉及的知识点比较多，该篇文章的上半部分会详细的介绍，后续文章基本上都会涉及音频的开发，有了基础对于后面的内容就更容易上手了。音频的基础知识播放器入门到提高快速掌握音视频开发基础知识声音的物理性

avatar 即构开发者社区

语音呼叫sdk_企业业务的十大聊天，音频和视频呼叫API和SDK提供程序

语音呼叫sdkWith the growing trend of digitalization, most enterprises have transformed their communication methodology from mainstream to digital. In order to keep up with competitors, companies regular..

avatar 即构开发者社区