Foreword :
The main reason for writing this thing is still under 18. Can not live broadcast.
Realization: One
liunx server; (I’m Aliyun)
domain name (you can record or change the port without record);
push streaming end (software such as obs can be used)
media server (written by a big guy)
pull streaming end (html implementation) )
Personal understanding: It
's too complicated to read other people's articles. It is simply understood that push streaming is input, media server is processing data to convert data, and pulling streaming is output. Most problem-solving ideas must be clear when thinking.
The
obs on the streaming end directly obtains the push streaming: rtmp://ip:1935/live;
other streaming software is similar.
Media server
boss articles
Pull the stream end code
Change the ip to your own server ip to be ok, the server must be bound to the domain name. (Otherwise you cannot access the web page to watch)
<!DOCTYPE html>
<html leng="en">
<head>
<meta charset="UTF-8">
<title>个人网站</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,minimal-ui">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/wap.css">
<link href="https://cdn.bootcss.com/video.js/7.7.6/video-js.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/video.js/7.7.6/video.min.js"></script>
<script src="https://cdn.bootcss.com/videojs-flash/2.2.1/videojs-flash.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
button{
margin:10px;
width:150px;
height:30px;
}
#myvideo .vjs-big-play-button {
left: 50%;
margin-left: -2.1em;
top: 50%;
margin-top: -1.4000000000000001em;
}
.huabu {
width: 100%;
height: 100%;
position: absolute;
background-image: linear-gradient(#44719F, #3B5169);
}
</style>
</head>
<body>
<div style="text-align: center;width:100%; background-image:url(./image/background.jpg);">
<button id="a" type="button" >Android</button>
<button id="b" type="button ">PC(需要flash插件)</button>
<div id="c" ">当前流:RTMP</div>
<div style="font-size:14px">两个源都支持PC,部分浏览器不支持,手机用户只能用Android.</div>
<a href="http://wpa.qq.com/msgrd?v=3&uin=2744881984&site=qq&menu=yes" style="text-decoration:none; color:black">联系作者</a>
</div>
<!--播放容器-->
<div>
<div class="huabu" id="particles-js"></div>
<video id='myvideo' poster="./image/background.jpg" x5-video-player-type="h5" x5-video-player-fullscreen="true" width=1200 height=540 class="video-js vjs-default-skin" controls style="margin:0 auto;"></video>
<div>
<script>
//初始化视频播放器
var video = videojs('myvideo',{
},function () {
this.src({
src: "http://182.92.11.182:89/live1/index.m3u8",
type:"application/x-mpegURL"
});
this.play();
});
$("#a").click(function () {
video.src("http://182.92.11.182:89/live1/index.m3u8","application/x-mpegURL");
$("#c").html("当前流:HTTP")
});
$("#b").click(function () {
video.src("rtmp://182.92.11.182:1935/live/live1","rtmp/flv");
$("#c").html("当前流:RTMP")
});
</script>
</body>
<script type="text/javascript" src="./js/particles.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
</html>
Pit :
-The rtmp stream needs flash support , and mobile phone users cannot access it. I added html stream later to solve the mobile phone problem. (There is another way to write a rtmp player that supports rtmp)
-html streaming, which can be viewed on mobile phones and PCs. Google Chrome does not support it. Win10 comes with a browser to view it. No other attempts.
-Obs push streaming key problem
. Push streaming that does not require a key is in this format: rtmp://ip:1935/live/live
needs rtmp://ip:1935/live, and the key live1 is ok.
-The webpage cannot be accessed. The
firewall must be turned on. Go to the Alibaba Cloud server to open the security group and add it. Open any port you use, and open port 89 when you use: 89.
Effect picture: The
live broadcast effect is very good, except for a few seconds delay, there is no problem.
Comment private message me, I went to authorize the boss, and post a simple streaming server for live broadcast effects.