2024年前端实现直播功能_前端直播功能怎么实现(2)，2024年最新web前端面试题及答案

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

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

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

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

二、具体操作

流媒体服务器搭建

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

拉流

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

.png)

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。