websocket 从IP摄像机获取RTSP流到Web浏览器的最佳方法?

xriantvc  于 2023-11-19  发布在  其他
关注(0)|答案(6)|浏览(327)

是否可以将RTSP流数据导入Web浏览器?

以下是我的一些发现。如果我错了,请纠正我?

1.只有Mac OS和Safari支持RTSP Live Streaming。

  1. HTML 5视频不支持RTSP。
    1.我可以使用VLC插件,但我不想使用它。

ffmpeg和WebSocket混合使用的可能性?

假设我的IP摄像机连接到以太网。
在客户端计算机中:
1.我运行ffmpeg从服务器获取数据(即:IP)
1.客户端计算机运行WebSocket。
1.一旦ffmpeg从RTSP服务器获取数据,它就会解码并生成任何格式的原始图像(例如:yuv)。
1.现在,我必须通过WebSocket将此图像发送到浏览器。

问题:

1.这是正确的方法吗?
1.如何将ffmpeg中的解码图像导入浏览器?
我可能在不同的地方错了。请提供输入。

ltqd579y

ltqd579y1#

Here是一个博客条目,或者教程,如果你愿意的话,它实现了非常相似的东西。
他们的设置略有不同,但这是总结:
使用ffmpeg将您的输入转换为mpeg1video:

ffmpeg  -i rtsp://whatever -f mpeg1video -b 800k -r 30 http://localhost:8082/yourpassword/640/480/

字符串
使用jsmpegws ws WebSocket包中的stream-server.js脚本安装node.js
要查看流,请使用jsmpeg中的stream-example.htmljsmpg.js。将stream-example.html中的WebSocket URL更改为localhost,然后在您喜欢的浏览器中打开它。

更新一个SO topic建议另外两个工作方案,标记为:使用stream-m Java服务器或使用ffserver

bkhjykvo

bkhjykvo2#

如果你只想把它流到少数几个客户端,那么你可以使用一个直接运行ffmpeg的cgi(或者在nodejs中,一个child_process):
NodeJS示例:

app.getExpressApp().get('/camera/feed', (req, res) => {
    // Thanks to https://stackoverflow.com/q/28946904/1954789
    const child_process = require('child_process');

    res.header('content-type', 'video/webm');

    const cmd = `ffmpeg -i rtsp://user:pwd@somewhere/videoSub -c:v copy -c:a copy -bsf:v h264_mp4toannexb -maxrate 500k -f matroska -`.split(' ');

    var child = child_process.spawn(cmd[0], cmd.splice(1), {
        stdio: ['ignore', 'pipe', process.stderr]
    });

    child.stdio[1].pipe(res);

    res.on('close', () => {
        // Kill ffmpeg if the flow is stopped by the browser
        child.kill();
    });

字符串
CGI应该更容易。
在浏览器中,您可以

<video autoplay=1 poster="camera.png" ><source src="/camera/feed"></video>


(Use海报,因为视频可能需要几秒钟才能显示出来)。

注意事项:这将为每个连接到您的设置启动一个ffmpeg,所以它根本不会扩展。这应该只用于非常私人的网站,其中连接是有限的(例如:仅限于您自己)。

PS:ffmpeg命令可能需要一些调整。

x7yiwoj4

x7yiwoj43#

VLC溶液:

cvlc -v rtsp://user:password@camera_ip_address --sout='#transcode{vcodec=theo,vb=800,acodec=vorb,ab=128,channels=2,samplerate=44100,scodedec=none}:http{dst=:8080/webcam.ogg}'

字符串
然后检查
http://localhost:8080/webcam.ogg
或者将此URL集成到您想要运行的任何Web服务中
如果你对vlc的python API感兴趣,这里有一个例子:

import vlc

class WebcamStreamer:
    def __init__(self, config):
        """
        Expected rtsp url format:
        "rtsp://user:[email protected]"
        """
        self.instance = vlc.Instance()
        self.stream_name = "webcam".encode()
        self.rtsp_url = config["rtsp_url"].encode()

    def launch_webcam_stream_converter(self):
        """
        Basically here is what is done:
            cmd= ["cvlc", "-v", f"rtsp://user:[email protected]",
            f"--sout='#transcode{{vcodec=theo,vb=800,acodec=vorb,ab=128,channels=2,samplerate=44100,scodedec=none}}:http{{dst=:8080/webcam.ogg}}'"]
            subprocess.run(cmd)
        """
        ret = vlc.libvlc_vlm_add_broadcast(
            p_instance=self.instance,
            psz_name=self.stream_name,
            psz_input=self.rtsp_url,
            psz_output=f"#transcode{{vcodec=theo,vb=800,acodec=vorb,ab=128,channels=2,samplerate=44100,scodedec=none}}:http{{dst=:8080/webcam.ogg}}".encode(),
            i_options=0,
            ppsz_options=[],
            b_enabled=True,
            b_loop=False
        )
        assert (ret == 0)
        vlc.libvlc_vlm_play_media(self.instance, self.stream_name)

t1rydlwq

t1rydlwq4#

scandir.php(由viewcamera.php中的JS使用)

<?php

$folder = $_GET['name'];

$dir = "../cache/".$folder;

// Sort in descending order
$b = scandir($dir,1);

$myJSON = json_encode($b);

echo $myJSON;

?>

字符串
streamcam.php(在crontab中运行)

<?php

function live_view ($cameraip, $cameraname){

    echo shell_exec("/usr/bin/ffmpeg -rtsp_transport tcp -i rtsp://root:pass@".$cameraip."/ufirststream -s 1920x1080 -f image2 -vf fps=fps=5 /var/www/html/occupancy/cache/".$cameraname."/frame%04d.jpg >/dev/null 2>/dev/null &");

}


viewcamera.php-$camera_name变量来自SQL while循环,其中以下为数据库中的所有摄像机重复。var cameraName如果来自以下按钮数据属性...

<button
  style="font-size: 24px"
  class="btn2 fa fa-camera"
  id="<?php echo $image_id;?>"
  href="#<?php echo $camera_name_stripped;?>"
  data-toggle="modal"
  data-backdrop="false"
  data-keyboard="false"
  data-image-id="<?php echo $image_id;?>"
  data-camera-ip="<?php echo $ip;?>"
  data-camera-name="<?php echo $camera_name;?>"
  data-camera-name-stripped="<?php echo $camera_name_stripped;?>"
>
  <i style="font-size: 24px" title="Live View"></i>
</button>

 
<img width="100%" height="auto" id="img_cam<?php echo $camera_name_stripped;?>" src="">


<script>

 var cameraName = $(e.relatedTarget).data('camera-name-stripped');

 window.livetimer<?php echo $camera_name;?> = setInterval(function() {

          <?php echo $camera_name_stripped;?> = $.ajax({
              url: 'scandir.php?name='+cameraName,
              type: "POST",
              dataType: 'json' 
          }).done(function(result)  {
              $("#img_cam<?php echo $camera_name_stripped;?>").attr('src',"../cache/" + cameraName + "/" + result[0]);
          });

          }, 55);    

});

</script>

o4tp2gmn

o4tp2gmn5#

我需要显示在不同的平台和浏览器流。要做到这一点,而不使用任何插件(不确定它是否适用于智能手机和平板电脑),使用了一种与你非常相似的方法。一个ffmpeg crontab任务每秒创建3个图像,并存储到一个目录中。使用Jquery,对php的一个appropriate调用读取目录并获取文件的名称,每隔330毫秒更改一次图像(只更改<img>的“src”属性)。为了解决存储问题,使用了其他crontab任务,删除超过1分钟的文件。这不是真实的流,但跨浏览器,很好地解决了问题。
ffmpeg任务

ffmpeg -i "rtsp://path/to/cam" -s 320x240 -f image2 -vf fps=fps=3 cache/%04d.jpg

字符串
示例性呼叫

$.ajax({
        url: '_read_dir.php',
        type: 'POST',
        dataType: 'json'
    })
    .done(function(result) {        
        $("#img_cam").prop('src',"cache/" + result.img);            
    });


存储控制任务

find /var/www/path/to/dir -mmin +1 -exec rm -f {} \;


希望能帮上忙!:)

dzhpxtsq

dzhpxtsq6#

多年来,浏览器已经远离了支持RTSP流媒体。未来,浏览器支持RTSP流媒体的可能性不大。但是,有很多新的发展,特别是WebRTC的出现。
由于RTSP和WebRTC的低延迟,常见的需求和场景是使用WebRTC查看RTSP流或IP Camera流。
简单来说,就是需要一个流媒体网关,将RTSP流转换成WebRTC流,在网页中观看,工作流程如下:

IP Camera --RTSP--> FFmpeg --RTMP--> Media Server --WebRTC--> Browser
                                    (SRS Gateway)

字符串
值得注意的是,IP摄像头一般提供一个RTSP拉流地址,不支持将RTSP流推送到流媒体网关,因此我们需要主动拉IP摄像头流推送到流媒体网关,最后转换成WebRTC在浏览器中播放。
该方案整体时延在200 ms-500 ms左右,整体效果不错。设置流媒体网关可以使用Docker一键部署,详情请参考this post
x1c 0d1x的数据
端到端的延迟是260毫秒在同一个内联网,它的工作真的很好!

相关问题