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

时间:2017-06-07 13:34:51

标签: java video websocket rtsp

我想编写一个解码RTSP实时流的java程序,来自Ip相机并通过Web Sockets将其发送到HTML5 Web客户端。 当我的电脑上有一个简单的mp4文件时,我可以这样做。我的代码如下所示:

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

<!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>

但是当谈到实时RTSP流媒体网址时,我找不到解码流并通过WS发送然后在我的网页中显示该流的方法。

2 个答案:

答案 0 :(得分:1)

除非您真的想出于教育目的或满足其他一些要求,否则您可能会发现围绕现有的流媒体服务器构建服务更容易。

这是因为视频流是一个非常专业的领域,并且有许多编解码器,容器,流协议等,您可能需要在它们之间进行转换以支持不同的终端设备,浏览器等。

此外,如果您想提供良好的用户体验,您可能希望以多种比特率提供实时流,以便客户端可以根据当前网络状况,屏幕大小等在它们之间切换。

大多数流媒体服务器都支持将视频转码为不同格式,并为自适应比特率流传输多个比特率。

GStreamer(https://gstreamer.freedesktop.org)是一个开源流媒体,您可能会发现它将满足您的需求 - 即使它没有,它也是一个很好的参考实现。

您可以在此处查看有关其RTSP支持的信息:https://gstreamer.freedesktop.org/documentation/rtp.html

答案 1 :(得分:1)

我无法回复第一条评论,但如果需要,答案将无法满足实时(与现场直播)的要求。评论建议会为流延迟增加10-20秒。

从服务器端到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

  • Web / HTML5正在远离Flash(及类似的插件/ ActiveX),通过更直接的RTP / RTSP / RTMP(基于UDP)流,可以提供更好的延迟。随着时间的推移,WebRTC可能是替代解决方案。 HLS /自适应比特率等将有10-20 +秒的延迟命中。

  • 直播(音乐会/活动)一直推动流媒体开发(Azure / Facebook / Wowza / AWS提供商)20-40s延迟通常不是问题