前端实现直播功能

太过爱你忘了你带给我的痛 2022-10-18 14:55 218阅读 0赞

## 前端直播功能实现 ##

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center]

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

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

**二、具体操作**

### 流媒体服务器搭建 ###

这里我们用的是`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页面

<!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

![在这里插入图片描述][20210708131646645.gif_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/9438c2a50de745d38e8607b095d3308d.png
[20210708131646645.gif_pic_center]: /images/20221005/c0769876b9944ca99627c0b650e445a3.png