HTML5 based media player for real-time video surveillance

Media player plays a very important role in real-time video surveillance. But currently many media players, which are based on DirectX, Flash and ActiveX, have many problems such as installation failure, maintenance cumbrance, security defects and so on. With the rapid development of HTML5 technology, the HTML5 video tag is very excellent for static video files, but currently it is not very suitable for streaming live video. To overcome these problems mentioned above, a new media player based on the HTML5 features for real-time video surveillance is designed and implemented in this paper. In the presented method, the HTML5 WebSocket is used to stream real-time H.264 data to the browser and then the HTML5 Canvas is adopted to make the video data render in the HTML5 compatible web browser after the H.264 data is decompressed natively by the JavaScript H.264 decoder. And the usage of HTML5 Web Workers can ensure that the video data is received, decoded and rendered at the same time. At last, the experimental results demonstrate that the new media player in this paper can play the video whose resolution is 640×360 at the rate of 25 frames per second and that it can be applied to real-time video surveillance without browser plug-ins.