Displaying a video stream in a web page


#1

Hi.
In one of my projects I send pictures over sockets to have a preview of the camera on the other device. It works. I use Python for sending and receiving/displaying (and everything else really) the pictures (I can send a real video stream as well). I wanted to have access to the pictures/video from a web page to display the stream there. Idea was to use web page instead of making GUI form my program. So I’d like to send the pictures from the server (back-end) and display them on a web page.
How to send the pictures (what protocol or method) and catch them from the web site code to display them (it might be 10 pictures per second).
I’m going to read about web sockets, can they be used to achieve what I want?


#2

Hi

This is a very interesting problem/question. WS (web sockets) may be one solution - it is basically a wrapper protocol around TCP/IP sockets. The issue you may encounter is network latency.

If you would like to send a preview of video stream, you may be better off looking at WebRTC, assuming we are talking browser to browser communication.

If it’s something like IP cam (CCTV, etc.) to web page, you may be looking at [camera -> streaming server -> client(s)] architecture. In that case you should get interested in RTSP/HLS/RTP.

But if your ultimate goal is to display images/pictures, you may try WebSockets first.


#3

The server is writen in Python by me. I can modify it if I can/have to. I can use any technologies, but my experience is not that great, that’s why I ask for help. I might consider any protocol/method. But I think server side it should be easy whatever I will have to do. The problem is that I don’t know how to handle it from web site code (pure JavaScript? what else should I need apart from JS?).
First I learn about web sockets and WebRTC. Thanks!


#4

It depends what technology you are going to use.

In case of WebSocket you will need JS on client side and you will also need WS server implementation in python to connect to. Then again, going for pure WS will create plenty of issues (browser compatibility, etc.). I suggest you to start with socket.io: JS client + python server library (https://github.com/miguelgrinberg/python-socketio). This should make it easier for you to start.

The above also applies to WebRTC - you will probably want to find a library to handle all differences between browsers. Just keep in mind WebRTC alone is peer2peer, meaning there’s no server involved (of course your server application may be a peer itself).

But if your ultimate goal is to receive video from somewhere, process it on your server and serve via web page, you may save some time looking into web video streaming, HTML5 is quite capable of handling video streams nowadays. So HTML5 video streaming + RTP + RSTP could be your friends here (and keywords to conduct research).


#5

Thanks. It looks (socket.io) like what I need. I’ll give it a try.