直播音视频流原理，直播平台代码实现的步骤

功能设计

如上图所示为直播 Demo 实现的基本功能展示，包括：

主播端：

• 创建直播间
• 发布、取消发布视频
• 下播
• 浏览发送弹幕

访客端：

• 浏览直播间
• 观看直播
• 退出直播间
• 浏览发送弹幕

下面看下本次实现的简易架构图：

实现

在实现之前我们需要创建 Agora 账号并获取 App ID（参见声网的开发者中心）。

主播端

创建直播间

本次实现对于直播间的创建只是简单记录下直播间的名称

存储直播间名称

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {         // 获取直播间名称         String room = req.getParameter("room");         // 新增直播间         RoomListHolder.addRoom(room);         resp.setCharacterEncoding("UTF-8");         resp.setContentType("application/json");         resp.getWriter().write("true");     } 复制代码

Agora SDK 集成

    // 创建 Agora Client     var client = AgoraRTC.createClient({mode: 'interop'});     // 初始化 client，并在初始化成功后执行加入直播间频道     client.init('APP ID', function () {         // 加入直播间频道         client.join(null, room, null, function (uid) {             console.log("用户 " + uid + "创建了直播间 " + room);                          // 执行本地视频发布         });     }); 复制代码

发布视频

主播在完成直播间的创建之后，基于 Agora SDK 实现本地视频的发布，这样当有订阅该直播间频道的用户将会获取视频流。

获取本地音频设备

在发布视频前，需要获取本地的音频设备，也即是麦克风，摄像头。

AgoraRTC.getDevices(function (devices) {     for (var i = 0; i !== devices.length; ++i) {         var device = devices[i];         if (device.kind === 'audioinput') {             // 获取麦克风设备             media.audio = device.deviceId;         } else if (device.kind === 'videoinput') {             // 获取摄像头设备             media.video = device.deviceId;         }     } }); 复制代码

发布视频

    // 创建本地音视频流     var localStream = AgoraRTC.createStream({         streamID: uid, // Agora 分配的 uid         audio: true,         cameraId: camera,          microphoneId: microphone,         video: true,         screen: false     });     // 初始化音视频流     localStream.init(function () {         // 指定元素 ID 播放音视频流         localStream.play('video');         // 发布音视频流         client.publish(localStream, function (err) {             console.log("音视频发布失败: " + err);         });         // 监听音视频发布事件         client.on('stream-published', function (evt) {             console.log("音视频发布成功!");         });     }, function (err) {         console.log("", err);     });

下播

下播对于 Agora SDK 来说即是离开频道，同时从直播间列表中移除当前直播间。

client.leave(function () {     // 主播执行时 会触发访客端事件 peer-leave     // 访客执行时 不会触发     console.log("下播成功");     // 将 room 从直播间列表中移除     $.post("/removeRoom?room=" + room, {}, function(data, textStatus, jqXHR) {         // do nothing     }, 'json'); }, function (err) {     console.log("下播失败"); }); 复制代码

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {     // 获取待移除的直播间     String room = req.getParameter("room");     // 移除直播间     RoomListHolder.removeRoom(room); } 复制代码

访客端

访客通过浏览直播间列表，选择自己感兴趣的主播观看。

浏览直播间

// 获取直播间列表数据 $.get("/getRooms", function (data, status) {     var roomHtml = '';     if (data == null) {         roomHtml = '当前没有直播间';     } else {         $.each(data, function (i, room) {             roomHtml += '<div>\n' +                 '            <div>\n' +                 '                <div>'+ room +'</div>\n' +                 '                <div>\n' +                 '                    <button channel="'+ room +'" class="layui-btn layui-btn-radius layui-btn-warm view">\n' +                 '                        <i>&#xe652;</i> 观看\n' +                 '                    </button>\n' +                 '                </div>\n' +                 '            </div>\n' +                 '        </div>\n' +                 '        ';         });     }     // 渲染     $('#roomList').html(roomHtml); }); 复制代码

观看直播

访客观看直播，对于 Agora SDK 来说也就是加入直播间频道，并订阅频道视频流。

client.join(null, room, null, function (uid) {     console.log("用户 " + uid + " 来到直播间 " + room); }, function (err) {     console.log("加入直播间失败") }); client.on('stream-added', function (evt) {     // 主播发布视频时会触发 stream-added 事件     var stream = evt.stream;     // 访客订阅 stream 流     client.subscribe(stream, function (err) {         console.log("视频流订阅失败", err);     }); }); client.on('stream-subscribed', function (evt) {     // 主播端视频流订阅成功后触发 stram-subscribed 事件     var stream = evt.stream;     // 按指定元素 ID 播放视频流     stream.play('video_remote'); }); client.on('stream-removed', function (evt) {     // 主播端执行 unpublish 时会触发该事件     var stream = evt.stream;     // 停止视频播放     stream.stop(); }); client.on('peer-leave', function (evt) {     // 主播端执行 leave 下播操作时会触发该事件     var stream = evt.stream;     if (stream) {         // 停止视频流播放         stream.stop();     } }); 复制代码

弹幕

本次只是对直播的简单实现，弹幕的功能暂时忽略吧，o(╯□╰)o

效果

直播

观看直播

文章来源网络