關(guān)于拉取監(jiān)控?cái)z像頭的流，我個(gè)人去查了很多資料，也是因?yàn)橹皼]有接觸過這一模塊，加上目前公司也沒有后端去寫接口，所以我直接用node去寫websocket，與前端建立起通信，能夠進(jìn)行后續(xù)轉(zhuǎn)碼、傳流，能夠?qū)崿F(xiàn)實(shí)時(shí)播放監(jiān)控畫面。
這里的rtsp流是要事先知道的，監(jiān)控的這個(gè)rtsp流，只要你拿到了，且監(jiān)控是接網(wǎng)絡(luò)的，就可以先拿VLC播放器去測試跑網(wǎng)絡(luò)串流試試看，如果能接通畫面，那么就可以走下面的操作了
請認(rèn)真看完下面的內(nèi)容，不然最后效果可能因?yàn)樾〔铄e(cuò)導(dǎo)致出現(xiàn)問題?。?！
一.nodejs配置
這里nodejs我的版本是18+，正常去官網(wǎng)下載配置就好
接下來創(chuàng)建一個(gè)新的文件夾，與你前端寫的項(xiàng)目通級(jí)就好
給大家看一下我的配置，來來回回下載了很多包，大家只看我圈紅的就好
將文件初始化，然后下面是我寫的代碼，具體需要的包有在代碼中體現(xiàn)
紅色框框里面是是啟服務(wù)器需要的包（直接通過npm 去下載就好，這里很簡單）
注意一點(diǎn)的是，這個(gè)websocket下載的時(shí)候，直接npm install websocket-stream就可以，然后照我這個(gè)去引用就行
然后可以跑起來看看，會(huì)不會(huì)出現(xiàn)什么問題（當(dāng)然放在這上面的代碼是沒問題的，我已經(jīng)試過了！但是可能會(huì)有一些配置問題，具體就需要自己去解決了）
二.前端vue3代碼(我這里還使用了ts，如果遇到ts問題，那就根據(jù)個(gè)人需求要自己解決了)
首先是頁面布局代碼
然后是script中的代碼
要下載flv.js這個(gè)包，可以直接通過npm 去下載就好
當(dāng)前后端都跑起來后，進(jìn)入頁面就可以實(shí)現(xiàn)了
但是注意請求的地方
url:?"ws:/XXX.XXX.XXX.XXX:8888/"+ url,? 其中url是你要寫的 rtsp 流（一般是?？担€有其他的品牌，當(dāng)然這個(gè)流是要通網(wǎng)絡(luò)的，文章開頭有講到）
這里的ip要去寫自己電腦的ip
這個(gè)就很簡單了，直接去win + R，cmd 進(jìn)去命令提示符，輸入ipconfig去查看自己電腦的ip
那么這里就是本機(jī)電腦的ip地址
綜上所述，到這里就可以在頁面上面實(shí)現(xiàn)監(jiān)控了
把最終畫面給大家看一下
如果大家還有什么問題，請留言給我，大家可以一起共同去解決?。?！一起進(jìn)步?。?！我個(gè)人也是個(gè)菜鳥，都是查閱各種資料，然后走了很多彎路，發(fā)現(xiàn)都實(shí)現(xiàn)不了，過程中發(fā)現(xiàn)大家都說使用flv比較好一點(diǎn)，延遲也是可以接受的，最終經(jīng)過自己各種加工，讓代碼跑通了，實(shí)現(xiàn)了效果，但是后續(xù)還要去做能夠控制多個(gè)監(jiān)控畫面的拉取以及各種布局與拉去畫面產(chǎn)生的交互問題，也很頭疼，目前還在進(jìn)行中
如果你看完之后實(shí)現(xiàn)了的話，可以收藏起來，順便給我點(diǎn)個(gè)贊吧！??！
文章來源地址http://www.zghlxwxcb.cn/news/detail-830213.html
文章來源：http://www.zghlxwxcb.cn/news/detail-830213.html
到了這里，關(guān)于vue3+nodejs（websocket）實(shí)現(xiàn)監(jiān)控拉rtsp流，使用flv.js+ffmpeg包（主要建立websocket是為了轉(zhuǎn)碼傳流）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
