CODEWITHSUNDEEP
javavideowebsocketrtsp
m.bouali
m.bouali

Reputation: 484

Display RTSP live stream in the web browser using java and Web Socket

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. I can do that when it comes to a simple mp4 file on my pc. 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

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

Upvotes: 1

Views: 13564

Answers (2)

redshift
redshift

Reputation: 11

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.

There are a couple of RTSP to Server Side to WebSocket to client-side solutions/options/examples:

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 is moving away from Flash (& similar plugins/ActiveX) that allow better latency via more direct RTP/RTSP/RTMP (UDP based) streams. WebRTC may be the replacement solution with time. HLS/Adaptive bit-rates etc are going to have a 10-20+ second latency hit.

  • Live Streaming (Concerts/Events) has been pushing the streaming development (Azure/Facebook/Wowza/AWS providers) where 20-40s delays normally are not an issue

Upvotes: 1

Mick
Mick

Reputation: 25471

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.

You can see info on its RTSP support here: https://gstreamer.freedesktop.org/documentation/rtp.html

Upvotes: 1

Related Questions