时间戳

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

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

问题描述

我正在构建一个直播页面，其中流媒体源通过 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>

标签： ffmpeghttp-live-streamingrtsp

解决方案

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

要将用户输入发送到此 php 脚本，您可以按照本指南进行操作。基本上，您需要form在 HTML 中带有输入字段并向您的 php 脚本（action属性）发送请求。$_GET在 php 中，您可以通过或$_POST变量访问用户输入。

推荐阅读