使用node.js搭建一個從0到1的簡易版直播功能(局域網內都可以觀看,有條件可以搭建線上版),入門級別的哈

最近幾年直播是火的不得了,越來越多的人也投身直播中,我們也很有多程序員也會出現在直播中教其他的人編程知識,我也想着等我的知識和經驗夠得時候也開個直播試試看哈哈,當然現在也就想想可以。
經常看我的博客的童鞋,可能知道我每次寫博客的時候總會扯些閒話,因爲不管寫什麼直接進入狀態可能有點難度哈。容我慢慢進入,

現在的直播功能,分爲推流和拉流。 說俗點就是 主播那端是推流 通過屏幕捕捉或者是 攝像頭捕獲主播的 面前的東西或者是電腦桌面的東西。然後通過流的方式將數據傳輸到服務器端,然後服務器端在發送到客戶端,客戶端那邊 也就是觀衆的那邊需要拉流,然後就可以展示到 客戶端了。當然 這些東西都是需要我們程序員 來完成了。

你可以選擇 騰訊雲的 雲直播作爲 服務器端,
在這裏插入圖片描述
順便提一下 推流使用的協議 不再是 http 而是 rtmp
但是之後 我爲什麼沒有選擇使用呢,雖然上線 鬆了20G流量 騰訊的直播 他需要你的 拉流客戶端 必須是 有備案通過的域名作爲客戶端的,這裏我沒有, 所以 就棄用了,而且 還有時間限制,他規定了一次只能直播多長的時間,你用人家的東西 確實挺舒服的 但是 就得聽人家的安排,如果不想這樣 就只能 自己搞一個 服務器了。

這個時候就選擇 node.js,還有有大神把直播的插件給開發出來了。
1.安裝
npm install node-media-server --save
2.配置啓動
node index.js

//  index.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();

啓動成功的效果
在這裏插入圖片描述

3.就是下載 推流的工具 相信 很多玩過直播的小夥伴可能知道 虎牙和鬥魚直播的工具應該都是用的這個
OBS
https://obsproject.com/ // 下載地址
不知道爲什麼我的下載的特別慢 下面 我也附上了 網盤地址 怕你們也下載很慢
鏈接:https://pan.baidu.com/s/1FOdzPRQ-rwPS7Z2wwyFk0A
提取碼:nte1
4.下載完成 安裝上Obs 開始進行配置
看過一些遊戲直播的童鞋可能知道,是不是在主播下播的時候 會看見下面的情況是吧。
在這裏插入圖片描述
這個有個問題就是 OBS的 顯示器桌面 捕捉 必須 得是集成顯卡 要不你掙開的就是 黑屏情況,這個問題 你可以去設備管理器 哪裏 先把 獨顯 給 禁用了 就可以了 ,然後播完之後 再把獨顯關閉了,這個好像就是 windows10的 筆記本會出現這種情況。

點擊左下邊 來源的 加號 然後 選擇 桌面捕獲
就會出現上圖的這種情況了,然後就是 開始推流了 上面我們已經用node.js搭建好了 流服務器了。點擊右下邊的 設置
服務器是 rtmp://192.168.0.4/live/
我這裏使用的是 ip地址 因爲一會我要讓 手機看到 所以不能用 localhost 進行設置
下面的 流祕鑰 你可以自定義 就好像是主播的房間號似得
我定義了是 zyc
在這裏插入圖片描述
配置完後 保存 點擊開始推流
服務器端 有變化 就說明了 你的推流成功了 。
在這裏插入圖片描述
這下 我們要配置 客戶端的拉流了
有關拉流的知識 因爲我也是菜鳥 不懂那麼多
使用過 flv 的方式 進行拉流的,下面是客戶端了拉流代碼

<!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: 100%;" controls="controls"></video>
		<script>
		    if (flvjs.isSupported()) {
		        var videoElement = document.getElementById('videoElement');
		        var flvPlayer = flvjs.createPlayer({
		            type: 'flv',
					url:'http://192.168.0.104:8000/live/zyc.flv'
		        });
		        flvPlayer.attachMediaElement(videoElement);
		        flvPlayer.load();
		        flvPlayer.play();
		    }
		</script>
	</body>
</html>

然後 打開瀏覽器哈
剛好看到就是 我剛剛在做的動作 這個很正常哈 因爲直播就是會有延遲的。
在這裏插入圖片描述
這個時候還沒有完 我們還要測試 在手機上 會不會成功
因爲要在手機上測試 你就不能 在本地打開這種方式了,你要在你的電腦上建立一個本地服務器才行哈
我就安裝了 一個 http-server
npm install http-server -g
然後就是 啓動 http-server
監聽 8080端口
我查了下 ip 地址 http://192.168.0.4:8080/index.html
在手機上 瀏覽器上輸入上面的地址 訪問
下面的是 手機上看到的效果。
雖然中間出現了一些挫折 ,但是最後還是成功了 很開心了,對直播有興趣的童鞋也可以搞搞看哦
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章