海康攝像機(jī)可以提供rtsp協(xié)議，所以第一步就是考慮直接通過瀏覽器播放晾捏，最初找到《谷歌瀏覽器Chrome播放rtsp視頻流解決方案》連接地址：https://yq.aliyun.com/articles/243466墓怀，興奮不已，測試一下得到以下結(jié)果：（此處用的谷歌瀏覽器）
最后在《在Chrome上通過vlc插件播放rtsp和rtmp視頻》（地址：https://my.oschina.net/u/1018014/blog/1540179） 知道Chrome只有41版本以前才支持VLC插件意鲸，我當(dāng)前用的瀏覽器版本是版本 83.0.4103.97，已經(jīng)徹底斷了使用vlc插件這條路了。
那就再試試VXG插件https://www.videoexpertsgroup.com/
運(yùn)行VXGdemo 得到了以下提示
PNaCl modules can only be used on the open web (non-app/extension) when the PNaCl Origin Trial is enabled
PNaCl 是(Portable Native Client)
最后查到了這篇文章：PNaCl 再見魁瞪，WebAssembly 你好！惠呼，原來PNaCl也被拋棄了导俘。
在https://github.com/1441796624/VXG.Chrome-RTSP-Player項(xiàng)目中看到如下一段話
Google Inc. has permanently banned NPAPI for Chrome browser making legacy media plugins including VLC nonfunctional. VXG Chrome RTSP Player is based on Google’s Native Client (NaCl) and Portable Native Client (PNaCl) architecture.
沒想到VXG步了VLC的后塵，再次放棄VXG剔蹋！
再次找到使用B站（bilibili）開源的flv.js的例子https://github.com/LorinHan/flvjs_test
看似好簡單旅薄，后端node express，前端vue
安裝ffmpeg泣崩，參考文檔https://blog.csdn.net/u013314786/article/details/89682800
解壓
xz -d ffmpeg-4.3-i686-static.tar.xz
tar -xvf ffmpeg-4.3-i686-static.tar
npm離線安裝
下載安裝包：dnf install --downloadonly --downloaddir=/root/video npm
在下載的安裝包目錄下執(zhí)行命令：rpm -Uvh ***.rpm進(jìn)行npm安裝
安裝路徑
https://github.com/LorinHan/flvjs_test中提到要安裝依賴包少梁，執(zhí)行以下命令：
npm install express express-ws fluent-ffmpeg websocket-stream -S -D
但實(shí)際執(zhí)行node index.js的時候發(fā)現(xiàn)還是缺包，然后就是一個個包的補(bǔ)充矫付，最后下載的包如下
此時再執(zhí)行node index.js,express監(jiān)聽起來了凯沪。
index.js需要修改的地方，ffmpeg的地址
ffmpeg.setFfmpegPath("/root/video/ffmpeg-4.3-i686-static/ffmpeg");
app.listen(8888);端口可以根據(jù)需要調(diào)整买优。
這部分整理好了以后剩下要做的工作就是采用vue搭建前端環(huán)境妨马。
因?yàn)閷ue不是很熟悉就直接采用https://juejin.im/post/5a7c18d36fb9a0633e51c458文檔中的內(nèi)容搭建一個最簡單的環(huán)境。
首先執(zhí)行vue init webpack videoProject初始化一個項(xiàng)目
然后就是下載flv.js杀赢，執(zhí)行：npm install flv.js -S -D
下載完成后烘跺，為了盡快看到效果我是直接把flv.js/src目錄下的內(nèi)容直接拷貝到我初始化的項(xiàng)目videoProject的src目錄下。將以下代碼直接拷貝到App.vue文件中
<div>
<video class="demo-video" ref="player" muted autoplay></video>
</div>
</template>
<script>
import flvjs from "flv.js";
export default {
data () {
return {
id: "1",
rtsp: "rtsp://admin:12345@192.168.11.157:554/h264/ch1/main/av_stream",
player: null
}
},
mounted () {
if (flvjs.isSupported()) {
let video = this.$refs.player;
if (video) {
this.player = flvjs.createPlayer({
type: "flv",
isLive: true,
url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}`
});
this.player.attachMediaElement(video);
try {
this.player.load();
this.player.play();
} catch (error) {
console.log(error);
};
}
}
},
beforeDestroy () {
this.player.destory();
}
}
</script>
<style>
.demo-video {
max-width: 880px;
max-height: 660px;
}
</style>
將rtsp: "rtsp://admin:12345@192.168.11.157:554/h264/ch1/main/av_stream"修改為對應(yīng)自己要播放的攝像頭的rtsp地址脂崔，如果密碼中有特殊字符時需要轉(zhuǎn)義滤淳，如里面包含+號需要轉(zhuǎn)義為%2B。
然后運(yùn)行：PORT=8090 npm run dev脱篙。運(yùn)行我的videoProject娇钱。此處報了兩個錯誤：Expected indentation of 2 spaces but found 4和extra semicolon
對應(yīng)的解決辦法：打開項(xiàng)目中的config目錄下的index.js文件
將useEslint的值改成false
修改.eslintrc.js文件，增加"indent": ["off", 2],
參考文檔：
https://blog.csdn.net/zyj0209/article/details/89307987
https://blog.csdn.net/qq_37591637/article/details/100508162
萬事具備绊困，就差運(yùn)行看效果了文搂，走起！
執(zhí)行 node index.js秤朗，起后端服務(wù)
前端執(zhí)行PORT=8090 npm run dev煤蹭。運(yùn)行前端項(xiàng)目
訪問http://localhost:8091，視頻出現(xiàn)
終于搞定了一個簡單的web頁面播放方式！
