TypeError: Object doesn't support property or method '_snap'

[mkaisercross]

I am trying to get basic webcam functionality in IE11. I have tried the Flash demo and it is working fine for me. However when I try to embed the webcamjs object into a React application I am getting an error in IE11.

TypeError; Object doesn't support property or method '_snap'.

I stepped through the code in the IE11 Debugger and it appears the _snap, _configure, and _releaseCamera are all shown as a property (not method) in the DOM element returned from getMovie however the values are all null.

Below is a minimal example React component for reproducing the issue. Any idea why this might be failing inside a React container?

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Webcam from '../../../lib/webcamjs/webcam'

export default class FlashWebcam extends Component {
    static defaultProps = {
    className: '',
    height: 480,
    imageSmoothing: true,
    onError: (name, description) => {
        console.log("FlashError: " + name + " " + description)
    },
    screenshotFormat: 'image/webp',
    width: 640,
    screenshotQuality: 0.92,
    cropResolution: [-1,-1]
    };

    static propTypes = {
    onError: PropTypes.func,
    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    screenshotFormat: PropTypes.oneOf([
        'image/webp',
        'image/png',
        'image/jpeg',
    ]),
    style: PropTypes.object,
    className: PropTypes.string,
    screenshotQuality: PropTypes.number,
    minScreenshotWidth: PropTypes.number,
    minScreenshotHeight: PropTypes.number,
    audioConstraints: PropTypes.object,
    videoConstraints: PropTypes.object,
    imageSmoothing: PropTypes.bool,
    cropResolution: PropTypes.arrayOf(PropTypes.number) 
    };

    constructor(props) {
    super(props)
        this.webcamRef = React.createRef();
    Webcam.set({
        width: this.props.width,
        height: this.props.height,
        dest_width: this.resolution[0],
        dest_height: this.resolution[1],
        image_format: 'image/jpeg',
        jpeg_quality: 92,
        enable_flash: true,
        force_flash: true,
        swfURL: "path/to/webcam.swf"
    });
    }

    shouldComponentUpdate(previous, next) {
        return false
    }

    componentDidMount() {
    Webcam.attach(this.webcamRef.current)
    }

    screenshot() {
    return new Promise(function(resolve, reject) {
        Webcam.snap(function(data_uri, canvas, context) {
                     if (data_uri.length > 0) resolve('data:image/jpeg;base64,' + data_uri)
                     else reject("Cannot capture image from camera (Flash)")
        })
    })
    }

    render() {
    return (
        <div ref={this.webcamRef}></div>
    )
    }
}

Also I have tried replacing document.getElementById with the function below and changing the id attributes to class attributes for the object and embed elements. Same issue.

export default function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}