Search code examples
javavideowebsocketrtsp

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.


Solution

  • 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