react video element iOS autoplay

gistfile1.txt

import * as React from "react";
import { Container, Row, Col } from 'reactstrap';

import '../styles/video-react.css'

export interface ApplicationProps { url: string; }

export class Application extends React.Component<ApplicationProps, {}> {

    private videoNode: HTMLVideoElement;

    componentDidMount() {
        console.log('component did mount');
        console.log('original video default muted : ' + this.videoNode.defaultMuted);
        this.videoNode.defaultMuted = true;
        console.log('changed video default muted : ' + this.videoNode.defaultMuted);
        this.webcam();
    }

    componentDidCatch() {
        console.log('component did catch');
    }

    componentDidUpdate() {
        console.log('component did update');
    }

    private webcam() {
        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, audio: false }).then(stream => { this.videoNode.srcObject = stream });
        } else {
            console.warn('user media not available');
        }
    }

    render() {
        console.log('render');
        const h = window.innerHeight;
        const w = window.innerWidth;
        return (
            <Container>
                <Row>
                    <Col>
                        <div className="scene">
                            <div className="panel-face-1">
                                <video muted autoPlay playsInline width={'90%'} height={'auto'} ref={node => this.videoNode = node} />
                            </div>
                        </div>
                    </Col>
                </Row>
            </Container >
        );
    }
}