How Capture, Save and Play Videos with Capacitor inside PWAs [v5]

If you want to build a PWA with video capturing capabilities, you are lucky since the MediaRecorder API is now available in almost every browser!

In this Quick Win we will implement a PWA that can capture, store and play videos. Be aware that the approach won’t work inside a native app and only inside the browser/PWA, but you can easily fall back to Cordova plugins for a real app if you want to.

You can also check out and test the PWA yourself here.

To finally play our video files we will also use the Capacitor Video player plugin.

Starting our Video Capture App

To get started create a new Ionic app with Capacitor enabled. Then we need to install the typings for the Media recorder to correctly use it with Typescript and also the Capacitor plugin for our video player.

Finally add the PWA schematics so you can easily build and test the app later:

ionic start academyVideo blank --type=angular --capacitor
cd ./academyVideo
ionic g service services/video

# TS typings
npm i -D @types/dom-mediacapture-record

# Video player plugin
npm install capacitor-video-player

# PWA ready
ng add @angular/pwa

ionic start academyVideo blank --type=angular --capacitor

cd ./academyVideo

ionic g service services/video

# TS typings

npm i -D @types/dom-mediacapture-record

# Video player plugin

npm install capacitor-video-player

# PWA ready

ng add @angular/pwa

In order to use the installed typings correctly I also had to modify the tsconfig.app.json and add it to the types array:

  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["dom-mediacapture-record"]
  },

"compilerOptions": {

"outDir": "./out-tsc/app",

"types": ["dom-mediacapture-record"]

The rest is pure web technology so let’s dive in!

Storing & Loading Videos with Capacitor

Before we really capture the videos, we create a bit of logic to keep track of our videos. We will store the files inside the Filesystem of the app, and we store the path to our files inside the Capacitor storage.

To store the video, which is a blob, we need to first convert it to a base64 string using a helper function.

Once we got the base64 data we can write it to the filesystem, add the path to the file to our local videos array and also save the information to the storage.

Now go ahead and change the services/video.service.ts to:

import { Injectable } from '@angular/core';
import {
  Plugins, FilesystemDirectory
} from '@capacitor/core';
const { Filesystem, Storage } = Plugins;

@Injectable({
  providedIn: 'root'
})
export class VideoService {
  public videos = [];
  private VIDEOS_KEY: string = 'videos';

  constructor() {}

  async loadVideos() {
    const videoList = await Storage.get({ key: this.VIDEOS_KEY });
    this.videos = JSON.parse(videoList.value) || [];
    return this.videos;
  }

  async storeVideo(blob) {
    const fileName = new Date().getTime() + '.mp4';

    const base64Data = await this.convertBlobToBase64(blob) as string;
    const savedFile = await Filesystem.writeFile({
      path: fileName,
      data: base64Data,
      directory: FilesystemDirectory.Data
    });

    // Add file to local array
    this.videos.unshift(savedFile.uri);

    // Write information to storage
    return Storage.set({
      key: this.VIDEOS_KEY,
      value: JSON.stringify(this.videos)
    });
  }

  // Helper function
  private convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
    const reader = new FileReader;
    reader.onerror = reject;
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.readAsDataURL(blob);
  });

  // Load video as base64 from url
  async getVideoUrl(fullPath) {
    const path = fullPath.substr(fullPath.lastIndexOf('/') + 1);
    const file = await Filesystem.readFile({
      path: path,
      directory: FilesystemDirectory.Data
    });
    return `data:video/mp4;base64,${file.data}`;
  }
}

import { Injectable } from '@angular/core';

import {

Plugins, FilesystemDirectory

} from '@capacitor/core';

const { Filesystem, Storage } = Plugins;

@Injectable({

providedIn: 'root'

})

export class VideoService {

public videos = [];

private VIDEOS_KEY: string = 'videos';

constructor() {}

async loadVideos() {

const videoList = await Storage.get({ key: this.VIDEOS_KEY });

this.videos = JSON.parse(videoList.value) || [];

return this.videos;

}

async storeVideo(blob) {

const fileName = new Date().getTime() + '.mp4';

const base64Data = await this.convertBlobToBase64(blob) as string;

const savedFile = await Filesystem.writeFile({

path: fileName,

data: base64Data,

directory: FilesystemDirectory.Data

});

// Add file to local array

this.videos.unshift(savedFile.uri);

// Write information to storage

return Storage.set({

key: this.VIDEOS_KEY,

value: JSON.stringify(this.videos)

});

}

// Helper function

private convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {

const reader = new FileReader;

reader.onerror = reject;

reader.onload = () => {

resolve(reader.result);

};

reader.readAsDataURL(blob);

});

// Load video as base64 from url

async getVideoUrl(fullPath) {

const path = fullPath.substr(fullPath.lastIndexOf('/') + 1);

const file = await Filesystem.readFile({

path: path,

directory: FilesystemDirectory.Data

});

return `data:video/mp4;base64,${file.data}`;

}

At the end we also got a function to get the video, because the player won’t play the video from the file URL directly (or I didn’t found the right way). But we can easily load the file from the path that we stored, and then return the file data as the correct base64 string back.

Creating the Video Capture View

With our logic in place we can continue to the implementation of our capturing. The basic idea is to get a stream of video data, which we can display in a viewchild in our template later.

We can then use the MediaRecorder API with the stream we created, which can then be used to capture chunks of data inside the ondataavailable. This means, we can store these chunks of data while the video capturing is in progress, and once we end the capturing we enter the onstop function.

Here we can use the previously created array of video data chunks to create a new blob and then pass this blob to our service, which will handle the storing of that file.

The last function to play a video also makes use of our service to get the base64 data of a video from the path of the video file, and the player plugin we installed handles the rest.

Now open the home/home.page.ts and change it to:

import { Component, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { VideoService } from '../services/video.service';
import { Capacitor, Plugins } from '@capacitor/core';
import * as WebVPPlugin from 'capacitor-video-player';
const { CapacitorVideoPlayer } = Plugins;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterViewInit {
  @ViewChild('video') captureElement: ElementRef;
  mediaRecorder: any;
  videoPlayer: any;
  isRecording = false;
  videos = [];

  constructor(public videoService: VideoService, private changeDetector: ChangeDetectorRef) {
  }

  async ngAfterViewInit() {
    this.videos = await this.videoService.loadVideos();

    // Initialise the video player plugin
    if (Capacitor.isNative) {
      this.videoPlayer = CapacitorVideoPlayer;
    } else {
      this.videoPlayer = WebVPPlugin.CapacitorVideoPlayer
    }
  }

  async recordVideo() {
    // Create a stream of video capturing
    const stream = await navigator.mediaDevices.getUserMedia({
      video: {
        facingMode: 'user'
      },
      audio: true
    });

    // Show the stream inside our video object
    this.captureElement.nativeElement.srcObject = stream;

    var options = {mimeType: 'video/webm'};
    this.mediaRecorder = new MediaRecorder(stream, options);
    let chunks = [];

    // Store the video on stop
    this.mediaRecorder.onstop = async (event) => {
      const videoBuffer = new Blob(chunks, { type: 'video/webm' });
      await this.videoService.storeVideo(videoBuffer);
      
      // Reload our list
      this.videos = this.videoService.videos;
      this.changeDetector.detectChanges();
    }

    // Store chunks of recorded video
    this.mediaRecorder.ondataavailable = (event) => {
      if (event.data && event.data.size > 0) {
        chunks.push(event.data)
      }
    }

    // Start recording wth chunks of data
    this.mediaRecorder.start(100);
    this.isRecording = true;
  }

  stopRecord() {
    this.mediaRecorder.stop();
    this.mediaRecorder = null;
    this.captureElement.nativeElement.srcObject = null;
    this.isRecording = false;
  }

  async play(video) {
    // Get the video as base64 data
    const realUrl = await this.videoService.getVideoUrl(video);

    // Show the player fullscreen
    await this.videoPlayer.initPlayer({
      mode: 'fullscreen',
      url: realUrl,
      playerId: 'fullscreen',
      componentTag: 'app-home'
    });    
  }
}

import { Component, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';

import { VideoService } from '../services/video.service';

import { Capacitor, Plugins } from '@capacitor/core';

import * as WebVPPlugin from 'capacitor-video-player';

const { CapacitorVideoPlayer } = Plugins;

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage implements AfterViewInit {

@ViewChild('video') captureElement: ElementRef;

mediaRecorder: any;

videoPlayer: any;

isRecording = false;

videos = [];

constructor(public videoService: VideoService, private changeDetector: ChangeDetectorRef) {

}

async ngAfterViewInit() {

this.videos = await this.videoService.loadVideos();

// Initialise the video player plugin

if (Capacitor.isNative) {

this.videoPlayer = CapacitorVideoPlayer;

} else {

this.videoPlayer = WebVPPlugin.CapacitorVideoPlayer

}

async recordVideo() {

// Create a stream of video capturing

const stream = await navigator.mediaDevices.getUserMedia({

video: {

facingMode: 'user'

audio: true

});

// Show the stream inside our video object

this.captureElement.nativeElement.srcObject = stream;

var options = {mimeType: 'video/webm'};

this.mediaRecorder = new MediaRecorder(stream, options);

let chunks = [];

// Store the video on stop

this.mediaRecorder.onstop = async (event) => {

const videoBuffer = new Blob(chunks, { type: 'video/webm' });

await this.videoService.storeVideo(videoBuffer);

// Reload our list

this.videos = this.videoService.videos;

this.changeDetector.detectChanges();

}

// Store chunks of recorded video

this.mediaRecorder.ondataavailable = (event) => {

if (event.data && event.data.size > 0) {

chunks.push(event.data)

}

// Start recording wth chunks of data

this.mediaRecorder.start(100);

this.isRecording = true;

}

stopRecord() {

this.mediaRecorder.stop();

this.mediaRecorder = null;

this.captureElement.nativeElement.srcObject = null;

this.isRecording = false;

}

async play(video) {

// Get the video as base64 data

const realUrl = await this.videoService.getVideoUrl(video);

// Show the player fullscreen

await this.videoPlayer.initPlayer({

mode: 'fullscreen',

url: realUrl,

playerId: 'fullscreen',

componentTag: 'app-home'

});

}

To finally make everything work we need a special video element which acts as the viewchild and displays the stream of the video while capturing.

Additionally we need a special div for the video player, which is required by the plugin!

Finally our list displays all the captured and stored videos with a play function, and the fab button is used both for starting and stopping the recording by using the isRecording variable that we toggle in our class.

Open the home/home.page.html and change it to this now:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Accademy Videos
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- Display the video stream while capturing -->
  <video class="video" #video autoplay playsinline muted [hidden]="!isRecording"></video>

  <!-- Neccessary for the video player -->
  <div id="fullscreen" slot="fixed"></div>

  <ion-list *ngIf="!isRecording">
    <ion-item *ngFor="let video of videos;" (click)="play(video)" tappable>
      {{ video }}
    </ion-item>
  </ion-list>

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="isRecording ? stopRecord() : recordVideo()">
      <ion-icon [name]="isRecording ? 'stop' : 'videocam'"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

<ion-header>

<ion-toolbar color="primary">

<ion-title>

Accademy Videos

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-list *ngIf="!isRecording">

<ion-item *ngFor="let video of videos;" (click)="play(video)" tappable>

</ion-item>

</ion-list>

<ion-fab vertical="bottom" horizontal="center" slot="fixed">

<ion-fab-button (click)="isRecording ? stopRecord() : recordVideo()">

<ion-icon [name]="isRecording ? 'stop' : 'videocam'"></ion-icon>

</ion-fab-button>

</ion-fab>

</ion-content>

As a final fix I also had to give the video element a specific size to make it visible on all browser, but feel free to play around with those values inside the home/home.page.scss:

.video {
  width: 100%;
  height: 400px;
}

.video {

width: 100%;

height: 400px;

}

You can now test your app locally with serve or deploy it as a PWA for example to Firebase!

If you experience problems on iOS or Safari on a mac, you need to enable the Mediarecorder API which was still marked as experimental at the time writing and turned off by default!

The same setting can be found on iOS inside Settings -> Safari -> Advanced -> Experimental Features!

Conclusion

The web is making progress every year, and although iOS is sometimes a bit behind, the MediaRecorder API should be enabled by default pretty soon!

Keep in mind that this will now only work inside a PWA, for a native app through the app store you should use the according Cordova / Capacitor plugins instead.

You can also find a video version of this Quick Win below.