如何使用 IP 地址在 ReactJS 中实现直播？答案

【问题标题】：How to implement live streaming in ReactJS using IP Address?如何使用 IP 地址在 ReactJS 中实现直播？
【发布时间】：2019-12-10 00:29:33
【问题描述】：

我得到了 RTSP URL，但它不能在 ReactJS 播放器中使用。 react 播放器仅支持 HTTP URL，播放器也不支持所有流。

React 播放器或 React JS 中的 RTSP URL 不支持。

如何在 react js 中实现 RTSP URL 的直播

【问题讨论】：

你可以试试npmjs.com/package/streamedian
RTSP URL 不支持任何反应播放器它是如何解决的..？在 React JS 中我需要整合它是如何可能的

标签： reactjs react-player

【解决方案1】：

在 /var/www/html/ 中设置一个 apache 服务器创建一个 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地址”在浏览器中运行

你可以得到直播

【讨论】：