使用Java和Web Socket在Web浏览器中显示RTSP实时流

Question

I want to write a java program that decodes an RTSP live stream, coming from an Ip camera and sends it to an HTML5 web client over web Sockets. 我想编写一个Java程序来解码来自Ip摄像机的RTSP实时流，并将其通过Web套接字发送到HTML5 Web客户端。 I can do that when it comes to a simple mp4 file on my pc. 当我的电脑上有一个简单的mp4文件时，我可以这样做。 My code looks like this: 我的代码如下所示：

JAVA 爪哇

@ServerEndpoint("/echo")
public class EchoEndPoint {

@OnMessage
public byte[] echo(String message) {
    File file = new File("/home/maher/devTools/video/testVideo.mp4");
    byte[] data = new byte[(int) file.length()];
    DataInputStream stream = null;
    try {
        stream = new DataInputStream(new FileInputStream(file));
    } catch (FileNotFoundException e1) {
        // TODO Auto-generated catch block
        e1.printStackTrace();
    }
    if (stream != null) {
        try {
            stream.readFully(data);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        try {
            stream.close();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    return data;
    }
  }

HTML 的HTML

<!DOCTYPE html>
<html>
<head>
<title>Test streaming over WebSockets</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script language="javascript" type="text/javascript">
    var wsUri = "ws://localhost:7070/serverWs/echo";
    function init() {
        websocket = new WebSocket(wsUri);
        websocket.onmessage = function (evt) {
            readFile(evt.data);
        };
    }
    function readFile(fileData) {
        var video = document.getElementById('area');
        video.src = window.URL.createObjectURL(fileData);
    }
    function createObjectURL(file) {
        if (window.webkitURL) {
            return window.webkitURL.createObjectURL(file);
        } else if (window.URL && window.URL.createObjectURL) {
            return window.URL.createObjectURL(file);
        } else {
            return null;
        }
    }
    function startVideo() {
        var message = "startVideo";
        websocket.send(message);
    }
    window.addEventListener("load", init, false);
</script>
</head>


<body>
<h2 style="text-align: center;">Client WebSocket Echo</h2>
<div style="text-align: center;">
<input onclick="startVideo()" value="Start video" type="button">
</div>
<div>
<video id='area' controls="controls" autoplay></video>
</div>

</body>
</html>

But when it comes to a live RTSP streaming URL, I cannot find a way to decode the stream and send it over WS then display that stream in my web page. 但是，当涉及实时RTSP流URL时，我找不到一种方法来解码流并通过WS发送，然后在我的网页中显示该流。

Answer 1

Unless you really want to do it yourself for educational purposes or to meet some other requirement, you will likely find it easier to build your service around an existing streaming server. 除非您真的真的想出于教育目的或为了满足其他一些要求而这样做，否则您可能会发现更容易在现有的流服务器上构建服务。

This is because video streaming is quite a specialist area, and there are many codecs, containers, streaming protocol etc which you may need to convert between to support different end devices, browsers etc. 这是因为视频流是一个非常专业的领域，并且可能需要转换许多编解码器，容器，流协议等以支持不同的终端设备，浏览器等。

Additionally, if you want to provide a good user experience you may want to offer the live stream in multiple bit rates so that client can switch between them depending on its current network conditions, screen size etc. 此外，如果要提供良好的用户体验，则可能需要以多种比特率提供实时流，以便客户端可以根据其当前的网络状况，屏幕大小等在它们之间进行切换。

Most Streaming servers will support transcoding videos into different formats and streaming multiple bit rates for Adaptive Bit Rate streaming. 大多数流媒体服务器将支持将视频转码为不同格式，并支持多种比特率以进行自适应比特率流传输。

GStreamer ( https://gstreamer.freedesktop.org ) is an open source streamer which you may find will meet your needs - even if it does not it will be a good reference implementation to look at. GStreamer（ https://gstreamer.freedesktop.org ）是一个开源的流媒体，您可能会发现它可以满足您的需求-即使不满足，它也是一个很好的参考实现。

You can see info on its RTSP support here: https://gstreamer.freedesktop.org/documentation/rtp.html 您可以在此处查看有关其RTSP支持的信息： https : //gstreamer.freedesktop.org/documentation/rtp.html

Answer 2

I cant reply to the first comment, but the answer will not meet real-time (Vs. live-stream) requirements if that is the desire. 我无法回复第一条评论，但如果需要的话，答案将无法满足实时（相对于直播）的要求。 The comments suggestion would add 10-20+ seconds to the stream latency. 评论建议将使流延迟增加10-20 +秒。

There are a couple of RTSP to Server Side to WebSocket to client-side solutions/options/examples: 从服务器端到WebSocket，到客户端解决方案/选项/示例，有几个RTSP：

https://github.com/Streamedian/ https://www.npmjs.com/package/node-rtsp-stream https://medium.com/@chpmrc/how-to-stream-rtsp-on-the-web-using-web-sockets-and-canvas-d821b8f7171e https://github.com/Streamedian/ https://www.npmjs.com/package/node-rtsp-stream https://medium.com/@chpmrc/how-to-stream-rtsp-on-the-网络使用网络插座和帆布D821B8F7171E

Web/HTML5 is moving away from Flash (& similar plugins/ActiveX) that allow better latency via more direct RTP/RTSP/RTMP (UDP based) streams. Web / HTML5正在远离Flash（及类似的插件/ ActiveX），后者通过更直接的RTP / RTSP / RTMP（基于UDP）流提供更好的延迟。 WebRTC may be the replacement solution with time. 随着时间的推移，WebRTC可能是替代解决方案。 HLS/Adaptive bit-rates etc are going to have a 10-20+ second latency hit. HLS /自适应比特率等将有10-20 +秒的延迟延迟。
Live Streaming (Concerts/Events) has been pushing the streaming development (Azure/Facebook/Wowza/AWS providers) where 20-40s delays normally are not an issue 实时流媒体（音乐会/活动）一直在推动流媒体开发（Azure / Facebook / Wowza / AWS提供者），通常20-40秒的延迟不是问题

使用Java和Web Socket在Web浏览器中显示RTSP实时流

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-06-08 09:26:45

解决方案2
1 2018-02-08 15:58:46

使用Java和Web Socket在Web浏览器中显示RTSP实时流

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-06-08 09:26:45

解决方案2 1 2018-02-08 15:58:46

解决方案1
1 已采纳 2017-06-08 09:26:45

解决方案2
1 2018-02-08 15:58:46