Read our user’s camera with Reactjs and Typescript

Setup:

yarn create react-app yingshaoxo --typescript

Method1:

import React from 'react';
import './App.css';const App: React.FC = () => {
    return (
        <div className="App">
            <header className="App-header">
                <Mirror></Mirror>
                <p>
                    yingshaoxo is your father.
                </p>
            </header>
        </div>
    );
}interface Props { }interface State { };class Mirror extends React.Component<Props, State> {
    video_reference = React.createRef<HTMLVideoElement>()async componentDidMount() {
        if (this.video_reference.current) {
            let video_stream: MediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, audio: false })
            this.video_reference.current.srcObject = video_stream
        }
    }render() {
        return (
            <video ref={this.video_reference} id="player" autoPlay>
            </video>
        )
    }
}export default App;

Method 2:

import React from 'react';
import './App.css';const App: React.FC = () => {
    return (
        <div className="App">
            <header className="App-header">
                <Mirror></Mirror>
                <p>
                    yingshaoxo is your father.
                </p>
            </header>
        </div>
    );
}interface Props { }interface State { };class Mirror extends React.Component<Props, State> {
    video_reference: HTMLVideoElement | null = null
    set_video_reference = (element: HTMLVideoElement) => {
        this.video_reference = element
    }async componentDidMount() {
        if (this.video_reference) {
            let video_stream: MediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, audio: false })
            this.video_reference.srcObject = video_stream
        }
    }render() {
        return (
            <video ref={this.set_video_reference} id="player" autoPlay>
            </video>
        )
    }
}export default App;

References:

MediaDevices.getUserMedia()

The MediaDevices .getUserMedia() method prompts the user for permission to use a media input which produces a…

developer.mozilla.org

Using React Refs in Typescript

Chris Dobson This guide will show how to use strongly typed refs using Typescript. We will see how to use refs from…

www.pluralsight.com

• React
• Typescript
• Camera