我正在构建一个直播页面，其中流媒体源通过rtsp进行流媒体传输。目前，我正在使用ffmpeg将传入的rtsp流转换为.m3u8文件，并通过HLS在网页上播放。
我现在试图解决的问题是，根据用户的输入加载rtsp流。我该如何解决这个问题？这是一个能够在iOS和android上查看流的要求。ffmpeg命令：
ffmpeg -i "rtsp://10.193.79.185:5554" -hls_time 3 -hls_wrap 10 "C:wamp64wwwhlsoutput.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的一些脚本。例如，您可以使用运行FFmpeg的exec命令构建一个php脚本。
要将用户输入发送到此php脚本，您可以按照本指南进行操作。基本上，您需要一个在HTML中带有输入字段的form，并向php脚本发送请求(action属性(。在php中，您可以通过$_GET或$_POST变量访问用户输入。