构建一个直播页面，用户将通过 ip 地址输入一个 rtsp 流媒体源答案

【问题标题】：Building a livestream page where the user will input an rtsp streaming source through an ip address构建一个直播页面，用户将通过 ip 地址输入一个 rtsp 流媒体源
【发布时间】：2020-11-14 02:56:17
【问题描述】：

我正在构建一个直播页面，其中流媒体源通过 rtsp 流式传输。目前，我正在使用ffmpeg将传入的rtsp流转换为.m3u8文件，并通过HLS在网页上播放。

我现在要解决的问题是根据用户的输入加载一个 rtsp 流。我该如何解决这个问题？必须能够在 iOS 和 android 上查看流。 ffmpeg 命令：

ffmpeg -i "rtsp://10.193.79.185:5554" -hls_time 3 -hls_wrap 10 "C:\wamp64\www\hls\output.m3u8"

我目前加载硬编码 rtsp 流的代码

<!DOCTYPE html>
<html>
  <body>
      <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
      <center>
          <h1>RTSP Stream</h1>
                <input  type ="text" name="rtspAddress" placeholder="RTSP address">
                <input  type ="text" name="output" placeholder="output Name">
                <button type="submit" name="submit">Start</button>
                <video height="600" id="video" controls></video>
      </center>
      

      <script>
        if(Hls.isSupported()) 
        {
            var video = document.getElementById('video');
            var mystring = "http://192.168.43.79/hls/output.m3u8";
            var hls = new Hls({
              debug: true
            });
            hls.loadSource(mystring);
            hls.attachMedia(video);
            hls.on(Hls.Events.MEDIA_ATTACHED, function() {
            video.muted = true;
            video.play();
        });
        }
        // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
        // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
        // This is using the built-in support of the plain video element, without using hls.js.
        else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = 'http://192.168.43.79/hls/output.m3u8';
            video.addEventListener('canplay',function() {
            video.play();
          });
        }
      </script>
  </body>
</html>

【问题讨论】：

标签： ffmpeg http-live-streaming rtsp

【解决方案1】：

要实现这一点，您需要在后端启动/运行 FFmpeg 的一些脚本。例如。您可以使用运行 FFmpeg 的exec command 构建一个 php 脚本。

要将用户输入发送到此 php 脚本，您可以关注 this guide。基本上，您需要一个form，在 HTML 中有一个输入字段，并向您的 php 脚本（action 属性）发送请求。在 php 中，您可以通过 $_GET 或 $_POST 变量访问用户输入。

【讨论】：