ZoomのYouTubeライブ配信用ページの作り方(接続者情報表示機能)

2021年4月2日

はじめに

前回、YouTubeの映像を自分のWebページに張り付ける方法を取り上げました。

今回は、それだけだと少し寂しいので、自分のIPなどの接続情報を表示して確認出来る機能を追加したいと思います。
難しく思うのですが、「ipinfo.io」という無料のWebAPIで解決出来るので簡単なんです。

では早速行ってみましょう。

Webページの作り方

分かりやすいように前回のコードも含めて書きますね。完成版はこんな感じになります。

1.下記のコードをメモ帳にコピペしてください。

<html>
  <head>
    <meta charset="utf-8">
    <style>
    .responsive_video { 
        position: relative; 
        padding-bottom: 56.25%; 
    }
    .responsive_video video, 
    .responsive_video iframe, 
    .responsive_video object, 
    .responsive_video embed { 
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    }
    #overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:20%;
    z-index:50;
}
    </style>
  </head>
  <body>
    <div class="responsive_video">
        <iframe src="https://www.youtube.com/embed/XXXXXXXXXXX?modestbranding=1&autoplay=1&rel=0&wmode=opaque" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div id="overlay"></div>
    </div>
    <table>
        <tr><th>Platform</th><td><a class="platform"></a></td ></tr >
        <tr><th>UserAgent</th><td><a class="userAgent"></a></td ></tr >
        <tr><th>IP</th><td><a class="ip-address"></a></td ></tr >
        <tr><th>Country</th><td><a class="country"></a></td ></tr >
        <tr><th>Region</th><td><a class="region"></a></td ></tr >
        <tr><th>City</th><td><a class="city"></a></td ></tr >
        <tr><th>Location</th><td><a class="location"></a></td ></tr >
    </table >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">

        $(".platform").text(navigator.platform);
        $(".userAgent").text(navigator.userAgent);

        $.ajax({
            url: "https://ipinfo.io",
            dataType: "jsonp",
            success: function(res){
                 $(".ip-address").text(res.ip);
                 $(".country").text(res.country);
                 $(".region").text(res.region);
                 $(".city").text(res.city);
                 $(".location").text(res.loc);
            }
        });
    </script>
  </body>
</html>

2.「iframe src="https://www.youtube.com/・・・」と書かれている部分を自分の環境によって修正しましょう。

以前の記事を参照ください。

3.適当な名前で保存しましょう。(例:YoutubePlay.html)

4.作ったファイルを公開したいWebサーバにコピーしたら完了です。

公開の仕方も、以前の記事をご参照ください。

まとめ

いかがだったでしょうか?自分のIPやGPSの位置が表示されると、少しドキッとしますね。ログを取るわけではなくても、このような情報を出すと、悪い事をしようとする人へのけん制にもなるかと思います。また同じようなWebAPIを使って、他にもいろいろと改造するサンプルとしていただけたらと思います。