SharePoint Consulting Blog

Introduction

In Power Apps, the default controls are often enough for typical business needs, but what if you need a more customized user interface or logic that goes beyond the built-in features? That’s where the PowerApps Component Framework (PCF) comes into play.

PCF enables developers to create custom components using modern web technologies like HTML, CSS, and TypeScript. These components can be reused just like standard Power Apps controls but offer much greater flexibility and power.

With PCF, you can build:

Rich visual components like sliders, charts, or custom input fields
Controls that connect to external data sources
Reusable UI elements across different apps and environments

Whether you're enhancing user experience or integrating third-party libraries, PCF gives you the tools to take your apps beyond low-code.

In this blog, we’ll walk you through creating a custom PCF control that records video directly within a Power Apps, perfect for scenarios like field service reporting.

Prerequisites

Before you begin, ensure you have the following tools and knowledge:

Node.js (LTS version)
Power Platform CLI (pac)
Visual Studio Code
A Microsoft Power Apps Developer Environment

Use Case: Record Video in Power Apps

Imagine a field engineer needing to quickly document a machine fault. Instead of recording a video externally and uploading it later, a custom PCF control enables the engineer to record and save the video directly within the mobile app, streamlining the entire submission process.

Step-by-Step Guide to Creating the PCF Control

1. Create the PCF Control

Open Visual Studio Code and run:

pac pcf init --namespace VideoRecoder --name VideoRecoder --template field

Then install the dependencies:

npm install

2. Add Video Recording Logic (in index.ts)

Use the MediaRecorder API to access the camera and record video.

private async startRecording(): Promise<void> {
        this._errorElement.innerText = "";
        try {
            // Request back camera with facingMode: "environment"
            const stream = await navigator.mediaDevices.getUserMedia({
                video: { facingMode: "environment" },
                audio: true
            });
            this._videoElement.srcObject = stream;
            this._videoElement.play();

            this._mediaRecorder = new MediaRecorder(stream);
            this._recordedChunks = [];

            this._mediaRecorder.ondataavailable = (event) => {
                if (event.data.size > 0) {
                    this._recordedChunks.push(event.data);
                }
            };

            this._mediaRecorder.start();
            this._startButton.disabled = true;
            this._stopButton.disabled = false;
            this._uploadButton.disabled = true;
        } catch (error) {
            this._errorElement.innerText = "Failed to access camera/microphone. Please 
ensure permissions are granted.";
            console.error("Recording error:", error);
        }
    }

    private stopRecording(): void {
        if (this._mediaRecorder && this._mediaRecorder.state !== "inactive") {
            this._mediaRecorder.stop();
            this._videoElement.srcObject = null;
            this._startButton.disabled = false;
            this._stopButton.disabled = true;
            this._uploadButton.disabled = false; // Enable upload button after stopping
        }
        console.log("from stopRecording() test");
    }

You can view the complete source code here.

Run the development server to test locally:

npm start

3. Build the PCF Control into a Solution

Create a new solution folder and initialize it:

mkdir VideoRecoderSolution
cd VideoRecoderSolution
pac solution init --publisher-name YourPublisher --publisher-prefix yourprefix
Then add the reference and build:
pac solution add-reference --path ..\..\
dotnet build