我得到了 RTSP URL,但它不能在 ReactJS 播放器中使用。react 播放器只支持 HTTP URL,播放器也不支持所有流。
React 播放器或 React JS 中的 RTSP URL 没有任何支持。
如何在 React js 中实现 RTSP URL 的直播
我得到了 RTSP URL,但它不能在 ReactJS 播放器中使用。react 播放器只支持 HTTP URL,播放器也不支持所有流。
React 播放器或 React JS 中的 RTSP URL 没有任何支持。
如何在 React js 中实现 RTSP URL 的直播
设置一个 apache 服务器并在 /var/www/html/ 中创建一个 index.html 文件
<!DOCTYPE html>
<html><head><title>Live Cam</title></head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<body>
<video id="video" autoplay="true" width="975px" height="650px"
controls="controls"></video>
<script>
if (Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
// bind them together
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
console.log("video and hls.js are now bound together !");
hls.loadSource("'ip address of system'/live/mystream.m3u8");
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
console.log("manifest loaded, found " + data.levels.length + "
quality level");
});
});
}
</script>
</body>
</html>
然后创建一个 live 文件夹并在该文件夹内创建一个 stream.sh 文件并插入代码 #!/bin/bash
VIDSOURCE="rtsp://username:password@192.168.140.14/h265/ch1/main/av_stream"
AUDIO_OPTS="-c:a aac -b:a 160000 -ac 2"
VIDEO_OPTS="-s 854x480 -c:v libx264 -b:v 800000"
OUTPUT_HLS="-hls_time 10 -hls_list_size 10 -start_number 1"
ffmpeg -i "$VIDSOURCE" -y $AUDIO_OPTS $VIDEO_OPTS $OUTPUT_HLS
mystream.m3u8
创建文件后,运行 apache 服务器并通过键入命令运行上述脚本
sudo ./stream.sh
运行上述服务器和文件“系统的IP地址”后在浏览器中运行
你可以得到直播