---
# System prepended metadata

title: PID-927

---

Yes, several APIs are available in Angular for media-related tasks such as playing videos, capturing media, and evaluating media queries.
In Angular, you typically use standard web APIs and libraries to handle media-related tasks such as watching for media queries, playing videos, capturing media, and evaluating media queries. Below are explanations of several APIs and libraries commonly used for these purposes in Angular applications:
1. Media Query API (window.matchMedia):
    * Purpose: Used to monitor changes in media queries, making it suitable for handling responsive design in Angular applications.
    * How to Use:
        ```typescript
        const mediaQuery = window.matchMedia('(max-width: 768px)');
        mediaQuery.addEventListener('change', (event) => {
          if (event.matches) {
            // Media query condition is met (e.g., viewport is <= 768px)
            // Update Angular component state accordingly
          } else {
            // Media query condition is not met
            // Handle the other case here
          }
        });
        ```
    * Note: This is a standard web API, not specific to Angular.
2. Videogular:
    * Purpose: A powerful, extensible, and advanced media framework for playing HTML5 video in Angular applications. It provides Angular components and services for video playback.
    * How to Use: You can integrate Videogular into your Angular project using Angular components like `<vg-player>` and `<vg-overlay-play>`. Refer to Videogular's documentation for detailed usage instructions.
    * Link: [Videogular Official Website](https://videogular.github.io/videogular2/)
3. ngx-match-media:
    * Purpose: A third-party library for handling media queries in Angular applications. It simplifies responsive design by allowing you to define and observe media queries in your Angular components.
    * How to Use: Install the library using npm (`npm install ngx-match-media`) and then follow the library's documentation for usage instructions. You can use it to conditionally show or hide elements based on media queries.
4. Media Capture and Streams API:
    * Purpose: A standard web API that allows access to multimedia devices such as cameras and microphones in Angular applications. It is used for tasks like capturing photos or videos.
    * How to Use: Use the `navigator.mediaDevices.getUserMedia()` method to request access to media devices. You can then access and capture media streams from these devices.
    * Note: This is a standard web API, not specific to Angular.
5. Angular Material (for AngularJS - Deprecated):
    * Purpose: AngularJS Material (not Angular Material for Angular 2+) is a library that includes `$mdMedia`, a service used to evaluate media queries in AngularJS (Angular 1.x) applications.
    * How to Use: This service is now deprecated as AngularJS is no longer actively developed, and it's not relevant for Angular (versions 2 and above).
6. HttpClient:
    * Purpose: Angular's `HttpClient` module is used for making HTTP requests to fetch data from a server or external APIs, which can include media content like images, videos, or JSON data.
    * How to Use: Use Angular's `HttpClient` to perform GET or POST requests to fetch media data from a server. It is a core part of Angular for handling HTTP communication.
    * Note: While not a media-specific API, `HttpClient` is essential for fetching media content from remote sources.

Overall, Angular provides several APIs and modules for media-related tasks, making it a powerful framework for building media-rich applications.