问构建一个实况流页面，用户将通过ip地址输入rtsp流来源
EN

Stack Overflow用户

提问于 2020-11-14 10:56:17

回答 1查看 214关注 0票数 0

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

我现在要解决的问题是，根据用户的输入加载一个rtsp流。我该如何着手解决这个问题？这是一个要求，能够在iOS和安卓上查看流。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

Stack Overflow用户

发布于 2020-12-08 01:49:20

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64830487

复制

相似问题

问构建一个实况流页面，用户将通过ip地址输入rtsp流来源
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问构建一个实况流页面，用户将通过ip地址输入rtsp流来源EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问构建一个实况流页面，用户将通过ip地址输入rtsp流来源
EN