国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何打造在線直播間（技術(shù)貼）

sugarmo / 1617人閱讀

摘要：背景當(dāng)下視頻直播如此紅火，打造一個(gè)在線直播間涉及到哪些技術(shù)呢視頻直播由主播的直播端以及觀眾的觀看端組成。保持心跳斷開重連快速搭建在線直播間按前文所述，搭建直播間有非常多的細(xì)節(jié)需要考慮，包括采集推流分發(fā)播放體驗(yàn)優(yōu)化聊天室性能調(diào)優(yōu)等。

背景

當(dāng)下視頻直播如此紅火，打造一個(gè)在線直播間涉及到哪些技術(shù)呢？

視頻直播由主播的直播端以及觀眾的觀看端組成。一個(gè)簡單的觀看端最起碼應(yīng)包含播放器以及聊天室。下面就圍繞這兩大模塊來講述相關(guān)技術(shù)。

視頻直播

視頻直播，可以分為視頻采集、前處理、編碼和封裝、傳輸、解封裝和解碼、播放這幾個(gè)環(huán)節(jié)。

直播端通過硬件設(shè)備采集音視頻數(shù)據(jù)，經(jīng)過前處理以及編碼、封裝后，還要傳輸?shù)接^看端。這一步一般交由CDN接力完成。推流端會(huì)把視頻流推到源站，CDN從源站拉流，拉流成功后編碼封裝成不同的格式提供各觀看端播放。簡單示意圖如下：

接下來講一下觀看端的基本要求：

多終端觀看

觀看穩(wěn)定、不卡頓

延遲低、高并發(fā)

多終端觀看

首先明確需要支持的終端，有移動(dòng)端APP（iOS、Android）、移動(dòng)端瀏覽器、小程序、PC瀏覽器、PC 客戶端。對(duì)于PC瀏覽器，一般支持到IE8。并且，由于Chrome瀏覽器默認(rèn)屏蔽Flash，所以在PC瀏覽器中采用的策略為：優(yōu)先在兼容H5的瀏覽器使用H5播放，否則降級(jí)使用Flash播放。兩者支持的直播播放視頻格式差異如下：

Flash支持rtmp或 http-flv 直播播放。延時(shí)~3秒。

H5支持M3u8直播播放。延時(shí)~15秒。

觀看穩(wěn)定、不卡頓

造成視頻直播卡頓的原因可能是多方面的，涉及到直播端、網(wǎng)絡(luò)、觀看端。

直播端

主要問題有硬件配置太低、推流參數(shù)配置問題、音視頻時(shí)間戳不同步。可以通過以下措施解決：

升級(jí)硬件、軟件設(shè)置，提高兼容性和容錯(cuò)率 ( 這部分是硬裝，必須有好的裝備才能有好的推流質(zhì)量啊 )。

使用硬編硬解方案，充分利用GPU加速。

降低視頻碼率，選擇流暢、標(biāo)清畫質(zhì)或者使用動(dòng)態(tài)碼率推流。

網(wǎng)絡(luò)

主要問題有網(wǎng)絡(luò)抖動(dòng)、拉流服務(wù)器與觀看端鏈路過長，可以通過以下措施解決：

選用穩(wěn)定的運(yùn)營商網(wǎng)絡(luò)并合理布局CDN節(jié)點(diǎn)。

使用充足的網(wǎng)絡(luò)帶寬。

觀看端

在網(wǎng)絡(luò)上觀看視頻，緩沖區(qū)就是在你看視頻時(shí)提前儲(chǔ)存部分視頻數(shù)據(jù)，當(dāng)數(shù)據(jù)到達(dá)一定的量后再播放畫面，使得播放更流暢。若設(shè)置得過小，在網(wǎng)絡(luò)不穩(wěn)定時(shí)就無法流暢地連續(xù)播放；若設(shè)置過大則會(huì)累積時(shí)延。所以要設(shè)置一個(gè)適中的緩沖區(qū)。

// Flash
netStream.bufferTime = 1 // 單位：秒
// FLV.js
flvjs.createPlayer({
  type: "flv",
  isLive: true,
  url: "video.flv"
},{
  stashInitialSize: 120 // 默認(rèn)：384KB
})
延時(shí)低、高并發(fā)

我們知道，視頻其實(shí)是由一幀一幀的圖像構(gòu)成的，RTMP基于TCP不會(huì)丟包，所以當(dāng)網(wǎng)絡(luò)狀態(tài)差時(shí)，服務(wù)器會(huì)將包緩存起來。等網(wǎng)絡(luò)狀況好了，就一起發(fā)給觀看端，導(dǎo)致觀看端累積太多視頻幀數(shù)據(jù)，延時(shí)隨時(shí)間增長而增加。對(duì)于這個(gè)問題，除了上文提及的設(shè)置適當(dāng)?shù)木彌_區(qū)長度外，還可以增加追幀和丟幀操作實(shí)現(xiàn)播放追趕。

Flash代碼：

// Flash實(shí)現(xiàn)追幀：定時(shí)器輪詢檢測當(dāng)前緩沖區(qū)長度大于30秒時(shí)重連，重新拉取直播流
netStream.bufferTimeMax = 0.1 // 設(shè)置bufferTimeMax主動(dòng)追幀
?
if(netStream.bufferLength > 30) { 
  // 緩沖區(qū)長度大于30，重新連接  
  reconnectStream() 
}

H5代碼：

// H5實(shí)現(xiàn)追幀,判斷當(dāng)前緩沖區(qū)結(jié)束時(shí)間與當(dāng)前時(shí)間相差超過5秒，則追幀
if (video.buffered.length > 0 && video.buffered.end(0) - video.currentTime > 5) {
  // 直播流時(shí)間接近緩沖時(shí)間的話畫面容易卡死，所以保險(xiǎn)起見-1秒?  
  video.currentTime = video.buffered.end(0) - 1;?
}

另外，如果用到FLV.js播放視頻，可以開啟它的Worker特性，多線程解析優(yōu)化延遲 ，并減少buffer。

// FLV.js
flvjs.createPlayer({
  type: "flv",
  isLive: true,
  url: "video.flv"
},{
  enableWorker: true,
  enableStashBuffer: false,
  stashInitialSize: 120 // 默認(rèn)：384KB
})
聊天室

即時(shí)聊天IM服務(wù)既要保證實(shí)時(shí)性，可靠性，又要抗住高并發(fā)。在實(shí)現(xiàn)過程中我們使用以下方法解決。

1、傳輸模式優(yōu)先選擇 WebSocket，若不支持則降級(jí)為輪詢。

const io = require("socket.io")({ "transports":["websocket", "polling"]})

2、Node.js 服務(wù)器因消息并發(fā)大導(dǎo)致性能低下。

通過以下方案極大的優(yōu)化了聊天室的穩(wěn)定性和可靠性。

（1）使用命名空間的功能

命名空間的作用就是把消息限定在一定范圍內(nèi)傳播。對(duì)于一些不需要全局接收的消息就加上命名空間，可以極大的節(jié)約資源的傳輸。

// 創(chuàng)建命名空間
const io = require("socket.io")()
const adminNamespace = io.of("/admin")
?
adminNamespace.to("level1").emit("an event", { some: "data" })

（2）聊天消息隊(duì)列

觀眾進(jìn)入聊天室房間會(huì)廣播登錄消息，比如房間內(nèi)同時(shí)有2W人，每個(gè)人登錄要對(duì)房間內(nèi)所有人廣播"我"登錄了，相當(dāng)于發(fā)送了2W條消息。若并發(fā)量大，對(duì)服務(wù)器性能要求極高。使用聊天隊(duì)列消息分批顯示可以防止同時(shí)處理大量消息，提高處理性能。

// 消息隊(duì)列
let scoektMsgArr = [{
   EVENT: "SPEAK",
   uid: socketId,
   content: "這是第一條聊天消息" 
}，...]
let minCount = 0
?
setInterval(()=>{
    const maxCount = minCount + 100
    const newScoektMsgArr = scoektMsgArr.slice(minCount, maxCount)
    newScoektMsgArr.forEach((item) => {
       socket.emit("message", JSON.stringify(item))
    })
}, 1000)

（3）服務(wù)器彈性伸縮

祭出最后的大招，能優(yōu)化的已經(jīng)極力優(yōu)化了，那剩下的事情就是配置服務(wù)器彈(jia)性(fu)伸(wu)縮(qi)。

3、掉線重連機(jī)制。

掉線會(huì)觸發(fā)disconcent 事件，監(jiān)聽它再創(chuàng)建socket連接即可。心跳檢查即定時(shí)發(fā)送一次消息，保持連接狀態(tài)。

// 保持心跳
setInterval(()=>{
    socket.emit("message", JSON.stringify({
      EVENT: "HEARTBEAT",
      uid: socketId
    }))
}, 30 * 60 * 1000)

// 斷開重連
socket.on("disconnect", () => {
    this.connect()
})

connect() {
  socket.on("connect", () => {
     //TODO
  })
}
POLYV SDK 快速搭建在線直播間

按前文所述，搭建直播間有非常多的細(xì)節(jié)需要考慮，包括采集推流、CDN分發(fā)、播放體驗(yàn)優(yōu)化、聊天室性能調(diào)優(yōu)等。別擔(dān)心，調(diào)用POLYV SDK可以快速搭建直播間。

（使用POLYV視頻直播服務(wù)需要先免費(fèi)注冊(cè)賬號(hào)）

STEP1 嵌入播放器：

STEP2 嵌入聊天室：

// 默認(rèn)樣式

?



var chatroom = new PolyvChatRoom({
    roomId: 268682,
    userId: 153075602311,
    nick: "游客",
    pic: "http://livestatic.videocc.net/assets/wimages/missing_face.png",
    token: token,
    container: "#wrap",
    width: 300,
    height: 600,
    userType: "",
    roomMessage: function(data) {
        // TODO
        // data為聊天室socket消息，當(dāng)有聊天室消息時(shí)會(huì)觸發(fā)此方法
        console.log(data);
    }
});

如上圖所示，嵌入直播播放SDK + 聊天室SDK即可創(chuàng)建直播間。聊天室SDK中有自帶默認(rèn)皮膚、發(fā)送表情、點(diǎn)贊、送花、在線列表、提問等功能。另外針對(duì)直播教育場景需用到的其他功能，如答題卡、簽到等，可監(jiān)聽聊天室socket消息自定義實(shí)現(xiàn)：

1.答題卡

// 監(jiān)聽答題內(nèi)容
var chatroom = new PolyvChatRoom({
    roomId: 268682,
    userId: 153075602313,
    nick: "學(xué)員_1",
    pic: "http://livestatic.videocc.net/assets/wimages/missing_face.png",
    token: token,
    container: "#wrap",
    width: 300,
    height: 600,
    userType: "",
    roomMessage: function(data) {
        // 監(jiān)聽聊天室消息
        switch(data.EVENT){
            case "GET_TEST_QUESTION_RESULT":
                // 獲取答題卡內(nèi)容，顯示答題卡
              break;
            case "GET_TEST_QUESTION_RESULT": 
              // 獲取答題卡結(jié)果, 顯示答題結(jié)果
              break;  
        }
    }
});
?```
// 發(fā)送答題結(jié)果
chatroom.socket.emit("message", JSON.stringify({
    EVENT: "ANSWER_TEST_QUESTION",
    roomId: channelId,
    nick: nick,
    userId: userId,
    option: result,
    questionId: questionId
}));

2.簽到

// 直播端發(fā)起簽到
roomMessage: function(data) {
    // 監(jiān)聽聊天室消息
    switch(data.EVENT){
        case "SIGN_IN":
            // 發(fā)起簽到
            break;
        case "STOP_SIGN_IN": 
            // 停止簽到
            break;  
    }
}
?
// 觀眾端簽到
chatroom.socket.emit("message", JSON.stringify({
    EVENT: "TO_SIGN_IN",
    roomId: roomId,
    checkinId: checkinId,
    user: {
        userId: 123456,
        nick: "polyv"
    }
}));

小程序

除了在瀏覽器端，我們?cè)谛〕绦蚨艘蔡峁┝藢?duì)應(yīng)的SDK。

下載小程序SDK后，調(diào)用組件快速生成包含播放器、聊天室等功能的直播間。

// 嵌入polyv頁面組件

  


// 初始化數(shù)據(jù)
import plv from "*/polyv-sdk/index";
// onLoad
onLoad() {
   const options = {
     channelId: "", // 頻道ID
     openId: "", // 用戶openId
     userName: "", // 用戶名
     avatarUrl: "" // 用戶頭像
   };
   plv.init(options);
}
// onUnload
onUnload() {
  plv.destory();
}

總結(jié)：

如果以完全自研的方式實(shí)現(xiàn)教育直播的基礎(chǔ)功能，至少需要10人的技術(shù)團(tuán)隊(duì)，5人的產(chǎn)品運(yùn)營團(tuán)隊(duì)，才能在3個(gè)月內(nèi)完成產(chǎn)品的上線。算下來至少需要幾十萬甚至上百萬。POLYV為各企業(yè)提供了全面的解決方案以及相關(guān)文檔，實(shí)現(xiàn)快速接入，輕松開啟線上教育直播。

資料：

使用flv.js做直播 https://segmentfault.com/a/11...

視頻直播秒開背后的技術(shù)與優(yōu)化經(jīng)驗(yàn) https://juejin.im/post/58eaf4...

socket.io https://socket.io/docs/

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/104692.html

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<