ZLMediaKit提供docker安装 更方便
docker run -id -p 1935:1935 -p 8080:80 -p 8443:443 -p 8554:554 -p 10000:10000 -p 10000:10000/udp -p 8000:8000/udp -p 9000:9000/udp zlmediakit/zlmediakit:master
之后我们需要进入容器找到cong.ini 中的secret值 后边需要使用
同时 提供一个管理面板 zlm_webassist (里边有具体使用步骤)
之后我们就可以看到
我们也可以再次处进行流的添加，注意ws-flv的流清勾图中红框
至此 我们的拉流已经结束了 我们接下来看前端如何实现播放
此处借助的播放器是Jessibuca 播放器
前端如何播放
请现在在这个文件 github.com/langhuihui/…
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<title>Title</title>
<script src="./jessibuca.js"></script>
<style>
.container-shell {
width: 100vw;
height: 100vh;
border-radius: 5px;
box-shadow: 0 10px 20px;
display: flex;
flex-wrap: wrap;
.container {
background: rgba(13, 14, 27, 0.7);
width: 600px;
height: 328px;
padding: auto;
margin: 10px;
</style>
</head>
<body class="page">
<div class="container-shell" class="container">
<div id="container0"></div>
</div>
<script>
jessibuca = new Jessibuca({
container: document.getElementById("container0"),
videoBuffer: 0.3,
isResize: true,
hasAudio: false,
text: "",
loadingText: "加载中",
debug: false,
useMSE: true,
showBandwidth: false,
operateBtns: {
fullscreen: false,
screenshot: false,
play: false,
audio: false,
forceNoOffscreen: true,
isNotMute: true,
jessibuca.onLog = (msg) => console.error(msg);
jessibuca.onRecord = (status) => console.log("onRecord", status);
jessibuca.onPause = () => console.log("onPause");
jessibuca.onPlay = () => console.log("onPlay");
jessibuca.onFullscreen = (msg) => console.log("onFullscreen", msg);
jessibuca.onMute = (msg) => console.log("onMute", msg);
jessibuca.play("ws://xxxxx:8080/APP/ch45.live.flv");
</script>
</body>
</html>
从图片截图来看我们可以看到延迟几乎没有 经过实测 大概在200-400ms之间
以上的分享到此结束了，希望您看到这里点个赞再走。
