Webパーソナルライブブロードキャストページ(サポートrtmp、html)

序文
このことを書く主な理由はまだ18歳未満です。生放送はできません。

実現:1つの
liunxサーバー;(私はAliyun)
ドメイン名(記録なしでポートを記録または変更できます);
プッシュストリーミングエンド(obsなどのソフトウェアを使用できます)
メディアサーバー(ビッグガイが作成
プルストリーミングエンド(html実装) )

個人的な理解:
他の人の記事を読むのは複雑すぎる単にプッシュストリーミングが入力され、メディアサーバーがデータを処理してデータを変換し、プルストリーミングが出力されることを理解しているだけです。ほとんどの問題解決のアイデアは、考えるときに明確でなければなりません。

ストリーミングエンドの
obsは、プッシュストリーミングを直接取得します:rtmp:// ip:1935 / live;
他のストリーミングソフトウェアも同様です。

メディアサーバー
ボスの記事

ストリームの終了コードをプル
します。IPを自分のサーバーのIPに変更してOKにし、サーバーをドメイン名にバインドする必要があります(それ以外の場合、Webページにアクセスして監視することはできません)

<!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>

ピット
-rtmpストリームにはフラッシュのサポートが必要で、携帯電話のユーザーはそれにアクセスできないため、後で携帯電話の問題を解決するためにhtmlストリームを追加しました。(rtmpをサポートするrtmpプレーヤーを作成する別の方法があります)
-htmlストリーム。携帯電話やPCで表示できます。GoogleChromeではサポートされていません。Win10には、ブラウザで表示できます。他の試みはありません。

-Obsプッシュストリーミングキーの問題
キーを必要としないプッシュストリーミングは次の形式です:rtmp:// ip:1935 / live / live
はrtmp:// ip:1935 / liveを必要とし、キーlive1は問題ありません

-Webページにアクセスできません。
ファイアウォールをオンにする必要があります。AlibabaCloudサーバーに移動してセキュリティグループを開き、追加してください。使用するポートを開き、使用する場合はポート89を開いてください:89。

効果画像:


ライブブロードキャスト効果は非常に良好ですが、数秒の遅延を除いて、問題はありません。
私にプライベートメッセージをコメントして、上司に権限を与え、ライブブロードキャストエフェクト用のシンプルなストリーミングサーバーを投稿しました。

おすすめ

転載: blog.csdn.net/weixin_44561526/article/details/108745894