Viomic logoViomic.com
Articles

How to Access and View IP Camera Streams via a Web Browser

RTSP stream to HTML5

This guide is perfect for anyone looking to understand the important procedures to access and view live streams from an IP Camera via a web browser. We specifically cover how to ensure your RTSP Security Cameras live visuals are seamlessly displayed on WordPress websites or any web page. The guide aims to cover all the essentials from how to connect to an RTSP camera, including the specifics of IP camera web access and using IP camera browser plugins or even Public RTSP camera streams. All these aspects play an important role in embedding video streams from a live IP camera into a browser web page.

Is it feasible to embed an IP camera into a web page?

The straightforward answer is, not anymore. Since year 2015, all browsers have discontinued the support for the RTSP protocol, making embedding IP camera in web page nonviable. It has considerably affected RTSP camera HTML5 and RTSP video in web page functionalities.

Ok but then what options are available for embedding an RTSP stream into a web page?

To embed an RTSP stream into a web page, an intermediate server is required to act as a bridge between the camera and the browser. This server should be able to convert the incoming RTSP flow into a format that is compatible with web browsers. There are two options available: you can either manage the server and implementation yourself, or you can opt for a managed service.

RTSP relay server act as intermediate between Ip Camera and web page in browser

Self hosted services or managed cloud-based services, which is the best for me?

  1. Self-Hosted Services: If you have the necessary technical expertise and resources, you can choose to manage the implementation yourself. This option gives you complete control over the server and allows you to customize the setup according to your specific requirements. However, it requires a significant amount of time, effort, and expertise to properly set up and maintain the server and implement yourself the software that convert the RSTP stream in to web page compatible formats.
    In particular you have to:
    • Develop and test the server application, even in local environment;
    • Deploy and maintain the server instance itself;
    • Manage the scalability and reliability of the application.
  2. Managed Cloud-Based Services: Alternatively, you can opt for a managed cloud-based service. This option eliminates the need for managing the server yourself and allows you to focus on other aspects of your website or application. Managed services typically offer easy-to-use interfaces, quick setup times, and reliable performance. They take care of all the technical aspects, such as server maintenance, updates, and security, allowing you to embed the IP camera stream into your web page hassle-free.

When choosing between self-hosted and managed services, consider factors such as your technical expertise, budget, time constraints, and specific requirements.

Whether you choose to self-host or opt for a managed cloud-based service, you can still seamlessly embed the IP camera stream into your web page and provide live visuals to your audience.

How to self host a self RTSP to web page service managed solution

Following we show how to implement a basic solution that allows you to stream and embed a RTSP video stream in to a web browser for free

Prerequisites:
  • Install FFMPEG a free, open-source multimedia framework for processing video, audio, and other multimedia files and streams;
  • Implement a web server, using your preferred language. It should serve the folder where the FFMPEG output is stored and the following web page where the video will be embed.

Let's get started

First create the working directory with a stream folder inside

Start by creating a file index.html inside the working directory and paste into it the following HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HLS Stream</title>
  </head>
  <body>
    <video id="video" autoplay="true" controls="controls">
      <source src="/stream/index.m3u8" type="application/x-mpegURL" />
      Your browser does not support HTML5 streaming!
    </video>
  </body>
</html>

Check if FFMPEG is installed and ready:

ffmpeg -version

Get a RSTP URL for example:

rtsp://admin:pass@192.168.1.100:554/stream/12

Run the following command:

ffmpeg -fflags nobuffer \
 -loglevel debug \
 -rtsp_transport tcp \
 -i rtsp://admin:pass@192.168.1.100:554/stream/12 \
 -vsync 0 \
 -copyts \
 -vcodec copy \
 -movflags frag_keyframe+empty_moov \
 -an  -hls_flags delete_segments+append_list \
 -f hls \
 -hls_time 1 \
 -hls_list_size 3 \
 -hls_segment_type mpegts \
 -hls_segment_filename './stream/%d.ts' \
./stream/index.m3u8

The next step is up and run your web server serving the .m3u8 file and the chunks as *.ts files in the stream directory.

The provided example is a basic demonstration that helps you get started and familiarize yourself with a typical setup. It is important to note that a production-ready implementation of an IP Camera RTSP relay server is much more complex and requires significant additional effort. Furthermore here we only explored the RTSP to HLS solution while there are other alternatives like RTSP to WebRTC.

I prefer to leverage a cloud based and managed solution to embed live RTSP server on the world wide web, what services are available?

There are several alternatives, and companies that provide this service, there are not equal they differ on price model and technical capabilities

Here is a list

  • Wowza: Wowza is a video platform with industry-leading technology delivering quality live and VOD streaming with integrated CMS, analytics and more.
  • IpCamLive: Video streaming solution for IP camera to embed live video stream into web page
  • Livery: Livery Is The Premier Interactive Live Video Streaming Platform For Engaging Live Video Experiences. Low Latency, Easy To Use & Affordable.
  • Flashphoner: Streaming & Calls for Web and Multi-protocol streaming server-side software supporting WebRTC, Flash, RTMP, RTMFP, Websocket, HLS, RTSP.
  • Viomic: The Easiest and cheapest Ip camera live on web page managed solution (Coming soon)

Conclusion

Embedding an RTSP video stream on a web page can be achieved with careful consideration of your needs, be it through a self-hosted solution leveraging tools like FFMPEG or opting for a managed cloud-based service. Each method offers unique advantages, from full control and flexibility with a self-hosted approach to ease and reliability with managed services. Regardless of the path chosen, ensuring your RTSP stream is accessible on your webpage enhances user engagement by delivering real-time video content directly to your audience.