實(shí)現(xiàn)思路
下載obs軟件，進(jìn)行視頻的錄制
通過node-media-server開啟一個服務(wù)，在obs中推流到該服務(wù)器
通過flv.js配合html5的video標(biāo)簽實(shí)現(xiàn)node-media-server中視頻源的播放
開始實(shí)現(xiàn)
obs的使用
obs的下載請移步官網(wǎng)，有windows, mac, linux 三個平臺的版本可供下載
我這里使用的是mac版，其他版本的使用應(yīng)該也差不多
首先需要新建一個場景
新建場景.png
這里有很多種場景可以使用，我用顯示捕獲來示范一下吧...
新建場景.png
可以對場景進(jìn)行命名，我直接使用默認(rèn)的名字，點(diǎn)擊確定
新建場景.png
再次點(diǎn)擊確定，這個時候場景就創(chuàng)建成功了，拖動場景可以將場景進(jìn)行縮放，縮放到遮住黑色的背景就好了
縮放場景.png
推流
視頻的本質(zhì)其實(shí)是一張張截下來的圖片，我們需要將這一張張圖片放到一個地方，然后前端就可以從這個地方讀取，從而展示出來，因此在這之前我們需要開啟一個服務(wù)，作為前端獲取視頻的源地址
node-media-server開啟服務(wù)
新建一個空白的文件夾，執(zhí)行npm init, 根據(jù)提示輸入相關(guān)信息后，下載node-media-server
npm install node-media-server --save
新建一個入口文件index.js
constNodeMediaServer=require('node-media-server');constconfig={rtmp:{port:1935,chunk_size:60000,gop_cache:true,ping:60,ping_timeout:30},http:{port:8000,allow_origin:'*'}};varnms=newNodeMediaServer(config)nms.run();
然后在命令行中執(zhí)行
node index.js
如果看到下面的提示，表示我們已經(jīng)成功開啟node-media-server服務(wù)了
開啟服務(wù).png
flv.js
flv.js是來自Bilibli的開源項(xiàng)目。它解析FLV文件喂給原生HTML5 Video標(biāo)簽播放音視頻數(shù)據(jù)，使瀏覽器在不借助Flash的情況下播放FLV成為可能。具體的介紹請自行g(shù)oogle哈，繼續(xù)剛才的項(xiàng)目
新建一個index.html文件
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>直播</title></head><body><scriptsrc="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script><videoid="videoElement"width="100%"controls></video><script>if (flvjs.isSupported()) {? ? ? ? ? var videoElement = document.getElementById('videoElement');? ? ? ? ? var flvPlayer = flvjs.createPlayer({? ? ? ? ? ? ? type: 'flv',? ? ? ? ? ? ? url: 'http://localhost:8000/live/hello.flv'? ? ? ? ? });? ? ? ? ? flvPlayer.attachMediaElement(videoElement);? ? ? ? ? flvPlayer.load();? ? ? ? ? flvPlayer.play();? ? ? }</script></body></html>
這里遇到了一個坑，可能是mac的原因，默認(rèn)視頻是沒有自動播放的，而且一開始video標(biāo)簽我也沒有加上controls，所以網(wǎng)頁上一直顯示的是一張靜態(tài)的圖片，偶然才發(fā)現(xiàn)原來是視頻處于暫停狀態(tài) =_=!!
可以進(jìn)行錄播啦~
點(diǎn)擊obs中的設(shè)置，進(jìn)入設(shè)置頁面，點(diǎn)擊流，如果是在本地直播的話，流類型選擇自定義流媒體服務(wù)器，url填寫如圖所示，流名稱填寫index.html設(shè)置的名字，本項(xiàng)目是hello
我們也可以通過bilibili等直播平臺進(jìn)行播放，這里就填寫你bilibili上的直播鏈接和名稱
image.png
點(diǎn)擊obs的開始推流按鈕
image.png
這時雙擊在瀏覽器打開index.html就可以看到直播啦，記得點(diǎn)擊視頻下方的開始按鈕~
