前言
- 前面兩篇文章講了Gradio輸出日志和ER-NeRF推理的圖轉(zhuǎn)存為ts文件
- 這篇就講講如何在Gradio中實時的播放服務器生成的m3u8文件
- 要讓web上能播放，那首先要有個播放器，支持hls協(xié)議的web播放器，有video.js和hls.js等等，原生的video也能播，我這里選用hls.js
- 除了播放器，還得要讓web前端上能尋找到m3u8文件，也就是要讓gradio能夠支持直接通過url加載到m3u8文件，這涉及到gradio的靜態(tài)文件掛載
- 我們還需要讓gradio能夠把播放器在我們設計的webui上展示出來，而gradio的組件庫里面是沒有可用加載hls.js腳本的播放器組件的，這里就涉及到我們需要自定義組件
效果
- 沒有加載播放器時界面：
- 加載了播放器之后的組件：
實現(xiàn)
首先，我們需要讓gradio能夠通過url加載到我們的m3u8靜態(tài)文件。
為了實現(xiàn)這個目標，我們需要引入FastAPI，使用FastAPI掛載一個靜態(tài)目錄，然后在gradio中掛載FastAPI。
#設置靜態(tài)目錄
app = FastAPI()
dir = os.path.abspath(os.getcwd()) #將當前根目錄作為靜態(tài)目錄
app.mount('/static', StaticFiles(directory=dir), 'static')
將gradio和FastAPI掛載在一起（當前gradio本身是需要支持queue的），參考：https://www.gradio.app/docs/mount_gradio_app
#將fastapi的靜態(tài)目錄和gradio掛載一起
page = page.queue()
app = gr.mount_gradio_app(app, page,path='/')
如此操作之后，就不能再使用gradio的.launch()方法來啟動應用了
launch()啟動之后沒有FastAPI效果，掛載也就白掛了
這里使用Uvicorn來啟動，關于Uvicorn，參考網(wǎng)上資料
uvicorn main-webui:app --port 7861 #端口好不指定默認為8000
啟動之后，我們就可以通過http://127.0.0.1/static/xx/xx/xx.m3u8訪問到視頻索引文件了。
接下來就自定義一個gradio的video組件，讓他把視頻播放出來。
由于視頻的m3u8文件的url是動態(tài)生成的，客戶端只能監(jiān)聽服務器的日志消息，當出現(xiàn)某種特殊消息的時候，客戶端就認為出現(xiàn)了m3u8的地址了，就解析那條消息，獲取到視頻索引文件url，然后構(gòu)建video組件進行播放：
所以，首先改造我們之前的log_out函數(shù)，讓他解析特定消息中的m3u8地址，然后向web上輸出一條video的html代碼字符串，我們的前端日志解析代碼讀取到這段html代碼后，就會在界面上特定的位置，將這段代碼渲染出來：
video_div = '<div id="videoDiv" style="width:100%;height:512px;"><video style="width:100%;height:100%;" id="videoDom" controls m3u8="[M3U8URL]"></video></div>'
def log_out(new_log):
print(new_log)
if new_log.find('##M3U8##SUCCESS:')>-1:
#根據(jù)日志輸出的信息處理，提取到m3u8的地址
video = new_log.replace('##M3U8##SUCCESS:', '')
video = video_div.replace('[M3U8URL]', video)
time.sleep(0.7) #讓客戶端有時間來出來視頻顯示
print('輸出video:'+video)
return video
return new_log
然后改造webui上日志輸出功能代碼：
原來的代碼見：給數(shù)字人生成加上界面，基于ER-NeRF/RAD-NeRF/AD-NeRF，Gradio框架構(gòu)建WEBUI，使用HLS流媒體，實現(xiàn)邊推理邊播放——之一：在WEBUI中實時輸出服務器控制臺日志：https://blog.csdn.net/AJian759447583/article/details/133990434
_script = '''
async()=>{
.......
//將hls.js的代碼加入到頁面上
......
//監(jiān)控日志輸出及顯示
let video= document.querySelector("#videoDivCom");
let output = document.querySelector("#logDivText .border-none");
if(!output){
return false;
}
let show = document.querySelector('#logShowDiv .container')
show.style.height='200px'
show.style.overflowY='scroll'
show.innerHTML=""
Object.defineProperty(output, "value", {
set: function (log) {
if(log && log!=''){
if(log.startsWith('<div id="videoDiv"')){
video.innerHTML=log
}else{
show.innerHTML = show.innerHTML+'<br>'+log
show.scrollTop=show.scrollHeight
}
}
return this.textContent = log;
}
});
......
}
'''
#在page頁面加載的時候，將自定義的js加載進去
page.load(_js=_script)
如此，頁面上就可以動態(tài)加載到視頻，實現(xiàn)服務器GPU一邊推理CPU一邊轉(zhuǎn)視頻，webui客戶端一邊播放的效果。
那，如果再將這個過程的各個時間點加快，選用更好更快的服務器，然后再把實時TTS整合進來，一個實時根據(jù)文本生成指定聲音并自動推理出指定音頻的數(shù)字人視頻就搞定了！文章來源：http://www.zghlxwxcb.cn/news/detail-778024.html
當然，這其中肯定有一億點點細節(jié)需要處理…
包括我上面的三篇文章，也僅僅是對整體思路的一個大致講解，具體實現(xiàn)上肯定還有一億點點細節(jié)需要處理，前面兩篇文章：文章來源地址http://www.zghlxwxcb.cn/news/detail-778024.html
- 給數(shù)字人生成加上界面，基于ER-NeRF/RAD-NeRF/AD-NeRF，Gradio框架構(gòu)建WEBUI，使用HLS流媒體，實現(xiàn)邊推理邊播放——之一：在WEBUI中實時輸出服務器控制臺日志：https://blog.csdn.net/AJian759447583/article/details/133990434
- 給數(shù)字人生成加上界面，基于ER-NeRF/RAD-NeRF/AD-NeRF，Gradio框架構(gòu)建WEBUI，使用HLS流媒體，實現(xiàn)邊推理邊播放——之二：將ndarray內(nèi)存序列圖直接轉(zhuǎn)成ts格式視頻：https://blog.csdn.net/AJian759447583/article/details/133994863
總結(jié)
- 整體思路很簡單直白，技術上不存在鴻溝
- 具體細節(jié)上有太多需要探究的內(nèi)容，往往每一步都被某個技術小細節(jié)卡死，然后各種探究各種嘗試，最后一定是經(jīng)過了N多個小時的試驗之后才能解決——當然也有可能還是解決不了
- 本次運用到的陌生技術，以前沒有接觸過的、不熟悉的：
1：服務器日志實時輸出到web客戶端（花了大量時間實驗）
2：python的gradio框架（按官網(wǎng)學習，很好上手）
3：ffmpeg命令(很復雜，腦殼痛…)
4：在python中使用ffmpeg的管道(很好理解，但是輸入管道同時輸出也是管道時，花了大量時間調(diào)研、嘗試，最終也沒解決)
5：gradio的queue和fastapi及靜態(tài)文件（找了一會兒方案，嘗試了個把小時）
6：hls流媒體協(xié)議（略讀）
7：m3u8文件格式(細讀)
8：ts格式媒體文件的封包協(xié)議細節(jié)（ffmpeg轉(zhuǎn)成ts時，VLC播放器音畫正常，hls.js在web上播放只有聲音沒有畫面，解決此問題花了大量時間，嘗試了各種參數(shù)，最終確定有效的為：vcodec=‘libx264’, r=25,output_ts_offset=ts_index * 5,hls_time=5,hls_segment_type=‘mpegts’） - 待繼續(xù)優(yōu)化的點：python中使用ffmpeg進行管道輸入和管道輸出。目前同時進行管道輸入輸出會出現(xiàn)程序掛起的現(xiàn)象，即使寫入一幀數(shù)據(jù)讀取一幀數(shù)據(jù)也是同樣現(xiàn)象，暫時未解。
到了這里，關于給數(shù)字人生成加上界面，基于ER-NeRF/RAD-NeRF/AD-NeRF，Gradio框架構(gòu)建WEBUI，使用HLS流媒體，實現(xiàn)邊推理邊播放——之三：在WEBUI中播放m3u8視頻，邊推邊存邊播放的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
