場景
Nginx-http-flv-module流媒體服務(wù)器搭建+模擬推流+flv.js在前端html和Vue中播放HTTP-FLV視頻流：
Nginx-http-flv-module流媒體服務(wù)器搭建+模擬推流+flv.js在前端html和Vue中播放HTTP-FLV視頻流_霸道流氓氣質(zhì)的博客-CSDN博客
上面講了Nginx-http-flv-module+flv.js進(jìn)行流媒體服務(wù)器搭建和前端播放視頻流的過程。
但是Nginx-http-flv-module對于Windows的支持以及推流格式的支持優(yōu)先，所以下面推薦
rtsp-simple-server流媒體服務(wù)器的使用。
rtsp-simple-server
https://github.com/aler9/rtsp-simple-server
rtsp-simple-server / MediaMTX是一個隨時可用的零依賴服務(wù)器和代理，
允許用戶發(fā)布、讀取和代理實(shí)時視頻和音頻流。
所支持的協(xié)議格式
這里的需求是搭建rtmp的流媒體服務(wù)器，并接收其他攝像頭的推流，然后在前端html或者
vue中進(jìn)行視頻流播放。
HLS協(xié)議
HLS，Http Live Streaming 是由Apple公司定義的用于實(shí)時流傳輸?shù)膮f(xié)議，基于HTTP協(xié)議實(shí)現(xiàn)，
傳輸內(nèi)容主要包括兩部分，一是M3U8描述文件，二是TS媒體文件。
1.m3u8文件是一種索引文件，用文本方式對媒體文件進(jìn)行描述，由一系列標(biāo)簽組成。
2.m3u8文件用于解析對應(yīng)的放在服務(wù)器上的視頻網(wǎng)絡(luò)地址，從而實(shí)現(xiàn)在線播放。
3、ts文件是傳輸流文件，是實(shí)際需要播放的內(nèi)容，通常一個大的視頻被分成眾多小的ts實(shí)現(xiàn)分片。
注：
博客：
霸道流氓氣質(zhì)的博客_CSDN博客-C#,架構(gòu)之路,SpringBoot領(lǐng)域博主
實(shí)現(xiàn)
1、這里是本機(jī)Windows電腦，下載zip壓縮包到本地并解壓
Releases · aler9/rtsp-simple-server · GitHub
解壓之后根據(jù)自己需要修改其yml配置文件
這里只需要修改其rtmp服務(wù)的端口為11935，修改之后保存，雙擊rtsp-simple-server.exe啟動
啟動成功之后會提示有哪些格式的視頻流已經(jīng)開啟支持以及對應(yīng)的端口。
如果啟動后沒有成功的頁面或者修改的配置文件不對導(dǎo)致起不來，可以在exe所在的目錄打開cmd,
然后將exe拖入cmd，回車即可看到錯誤輸出
2、模擬推送視頻流
模擬推送視頻流可以參考官方使用FFmpeg的方式，或者上文中使用oob進(jìn)行模擬的方式
這里使用編輯ffmpeg的腳本進(jìn)行模擬推送rtmp的視頻流，腳本內(nèi)容為
ffmpeg.exe -re -i D:\WorkSpace\Other\FFmpegDemo\test\1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:11935/hls/123_0
pause可參考如下
Windows上搭建Nginx RTMP服務(wù)器并使用FFmpeg實(shí)現(xiàn)本地視頻推流：
Windows上搭建Nginx RTMP服務(wù)器并使用FFmpeg實(shí)現(xiàn)本地視頻推流_win nginx-rtmp最新版_霸道流氓氣質(zhì)的博客-CSDN博客
模擬推流之后可以直接在瀏覽器中打開
http://127.0.0.1:8888/hls/123_0/
可以看到瀏覽器一直在請求.m3u8的地址，將這個地址復(fù)制出來
這個地址也可以在vlc中打開進(jìn)行播放
http://127.0.0.1:8888/hls/123_0/stream.m3u8
3、前端Html播放hls/m3u8視頻
前面直接可以將hls的地址在瀏覽器中打開，并且按照官方文檔，也可以直接使用iframe進(jìn)行播放
?<iframe src="http://rtsp-simple-server-ip:8888/mystream" scrolling="no"></iframe>
完整html示例代碼
?
<!DOCTYPE html>
<html>
<head>
??? <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
??? <title>hls demo</title>
??? <style>
??????? .mainContainer {
??????????? display: block;
??????????? width: 1024px;
??????????? margin-left: auto;
??????????? margin-right: auto;
??????? }
??? </style>
</head>
<body>
<p class="mainContainer">
?<iframe src="http://127.0.0.1:8888/hls/123_0" scrolling="no"></iframe>
</p>
<script>
</script>
</body>
</html>
?運(yùn)行html效果
html還可以使用hls播放m3u8視頻
rtsp-simple-server/hls_index.html at main · aler9/rtsp-simple-server · GitHub
官方示例代碼:
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body {
?margin: 0;
?padding: 0;
?height: 100%;
?overflow: hidden;
}
#video {
?width: 100%;
?height: 100%;
?background: black;
}
</style>
</head>
<body>
<video id="video" muted controls autoplay playsinline></video>
<script src="?></script>
<script>
const create = () => {
?const video = document.getElementById('video');
?// always prefer hls.js over native HLS.
?// this is because some Android versions support native HLS
?// but don't support fMP4s.
?if (Hls.isSupported()) {
??const hls = new Hls({
???maxLiveSyncPlaybackRate: 1.5,
??});
??hls.on(Hls.Events.ERROR, (evt, data) => {
???if (data.fatal) {
????hls.destroy();
????setTimeout(create, 2000);
???}
??});
??hls.loadSource('index.m3u8');
??hls.attachMedia(video);
??video.play();
?} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
??// since it's not possible to detect timeout errors in iOS,
??// wait for the playlist to be available before starting the stream
??fetch('stream.m3u8')
???.then(() => {
????video.src = 'index.m3u8';
????video.play();
???});
?}
};
window.addEventListener('DOMContentLoaded', create);
</script>
</body>
</html>
?本地示例代碼
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body {
?margin: 0;
?padding: 0;
?height: 100%;
?overflow: hidden;
}
#video {
?width: 100%;
?height: 100%;
?background: black;
}
</style>
</head>
<body>
<video id="video" muted controls autoplay playsinline></video>
<script src="?></script>
<script>
const create = () => {
?const video = document.getElementById('video');
?// always prefer hls.js over native HLS.
?// this is because some Android versions support native HLS
?// but don't support fMP4s.
?if (Hls.isSupported()) {
??const hls = new Hls({
???maxLiveSyncPlaybackRate: 1.5,
??});
??hls.on(Hls.Events.ERROR, (evt, data) => {
???if (data.fatal) {
????hls.destroy();
????setTimeout(create, 2000);
???}
??});
??hls.loadSource('http://127.0.0.1:8888/hls/123_0/stream.m3u8');
??hls.attachMedia(video);
??video.play();
?} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
??// since it's not possible to detect timeout errors in iOS,
??// wait for the playlist to be available before starting the stream
??fetch('http://127.0.0.1:8888/hls/123_0/stream.m3u8')
???.then(() => {
????video.src = 'http://127.0.0.1:8888/hls/123_0/stream.m3u8';
????video.play();
???});
?}
};
window.addEventListener('DOMContentLoaded', create);
</script>
</body>
</html>
?運(yùn)行本地示例代碼
4、Vue中播放hls/m3u8視頻
Vue+Video.js播放m3u8視頻流(?？低晹z像頭+RTMP服務(wù)+FFmpeg):
Vue+Video.js播放m3u8視頻流(?？低晹z像頭+RTMP服務(wù)+FFmpeg)_video.js ?？礯霸道流氓氣質(zhì)的博客-CSDN博客
前面記錄過，這里只需要修改視頻流地址即可。
還是需要安裝依賴
npm install --save video.js
npm install --save videojs-contrib-hls完整頁面代碼
?
<template>
? <div class="component-upload-image">
??? <video
????? id="my-video"
????? class="video-js vjs-default-skin"
????? controls
????? preload="auto"
????? width="500px"
??? >
????? <source
??????? src="http://127.0.0.1:8888/hls/123_0/stream.m3u8"
??????? type="application/x-mpegURL"
????? />
??? </video>
? </div>
</template>
<script>
import "video.js/dist/video-js.css";
import videojs from "video.js";
import "videojs-contrib-hls";
export default {
? components: {
? },
? name: "m3u8Play",
? data() {
??? return {};
? },
? mounted() {
??? let _that = this;
??? setTimeout(() => {
????? _that.getVideo();
??? }, 6000);
? },
? methods: {
??? getVideo() {
????? videojs(
??????? "my-video",
??????? {
????????? bigPlayButton: false,
????????? textTrackDisplay: false,
????????? posterImage: true,
????????? errorDisplay: false,
????????? controlBar: true,
??????? },
??????? function () {
????????? this.play();
??????? }
????? );
??? },
? },
? watch: {},
};
</script>
<style scoped lang="scss">
</style>
?運(yùn)行效果
5、缺點(diǎn)
該種方式視頻延遲較大，本地實(shí)測大概10秒左右。
優(yōu)化延遲大問題可以參考官方Low-Latency variant的配置文章來源：http://www.zghlxwxcb.cn/news/detail-430143.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-430143.html
到了這里，關(guān)于Windows上搭建rtsp-simple-server流媒體服務(wù)器實(shí)現(xiàn)rtsp、rtmp等推流以及轉(zhuǎn)流、前端html與Vue中播放hls(m3u8)視頻流的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
