<commit_before>import React, { Component } from 'react';
import { Grid, Row, Col, ResponsiveEmbed, Button, Glyphicon, Image } from 'react-bootstrap';
import captureVideoFrame from 'capture-video-frame';

const mediaConstraints = {
    audio: false,
    video: true
};

class Camera extends Component {

    constructor(props) {
        super(props);

        this.state = {
            streaming: false,
            streamURL: null,
            image: null,
            thumbnail: null
        }

        this.startMediaStream = this.startMediaStream.bind(this);
        this.stopMediaStream = this.stopMediaStream.bind(this);
        this.onMediaSuccess = this.onMediaSuccess.bind(this);
        this.onMediaFailure = this.onMediaFailure.bind(this);
        this.shutter = this.shutter.bind(this);
        this.save = this.save.bind(this);
        this.discard = this.discard.bind(this);
        this.onMediaFailure = this.onMediaFailure.bind(this);

    }

    componentWillMount() {
        this.startMediaStream();
    }

    componentWillUnmount() {
        this.stopMediaStream();
    }

    startMediaStream(){
        // First get a hold of getUserMedia, if present
		const getUserMedia = (navigator.getUserMedia ||
				navigator.webkitGetUserMedia ||
				navigator.mozGetUserMedia ||
				navigator.msGetUserMedia);

        if (!getUserMedia) {
            this.setState({ mediaFailure: {name: 'getUserMediaUnsupported'}});
            return;
        }

        getUserMedia.call(navigator, mediaConstraints, this.onMediaSuccess, this.onMediaFailure);
    }

    onMediaSuccess(stream) {

        this.setState({
            streaming: true,
            streamURL: URL.createObjectURL(stream)
        });
    }

    onMediaFailure(error) {
        this.props.onFailure(error);
    }

    stopMediaStream(){
        this.state.mediaRecorder.stream.getTracks().map((track) => track.stop());
    }

    shutter() {
        const image = captureVideoFrame(this._viewfinder, 'png');
        this.setState({
            image: image,
            thumbnail: image
        });
    }

    save() {
        this.props.save({
            image: this.state.image,
            imageThumbnail: this.state.thumbnail
        });
    }

    discard() {
        this.setState({
            image: null,
            thumbnail: null
        })
    }

    render() {
        return (
            <Grid>
                <Row>
                    <Col xs={3}/>
                    <Col xs={6}>
                        <div>
                            { this.state.streaming &&
                                <ResponsiveEmbed a4by3><commit_msg>Pass up blobs only from Camera<commit_after>import React, { Component } from 'react';
import { Grid, Row, Col, ResponsiveEmbed, Button, Glyphicon, Image } from 'react-bootstrap';
import captureVideoFrame from 'capture-video-frame';

const mediaConstraints = {
    audio: false,
    video: true
};

class Camera extends Component {

    constructor(props) {
        super(props);

        this.state = {
            streaming: false,
            streamURL: null,
            image: null,
            thumbnail: null
        }

        this.startMediaStream = this.startMediaStream.bind(this);
        this.stopMediaStream = this.stopMediaStream.bind(this);
        this.onMediaSuccess = this.onMediaSuccess.bind(this);
        this.onMediaFailure = this.onMediaFailure.bind(this);
        this.shutter = this.shutter.bind(this);
        this.save = this.save.bind(this);
        this.discard = this.discard.bind(this);
        this.onMediaFailure = this.onMediaFailure.bind(this);

    }

    componentWillMount() {
        this.startMediaStream();
    }

    componentWillUnmount() {
        this.stopMediaStream();
    }

    startMediaStream(){
        // First get a hold of getUserMedia, if present
		const getUserMedia = (navigator.getUserMedia ||
				navigator.webkitGetUserMedia ||
				navigator.mozGetUserMedia ||
				navigator.msGetUserMedia);

        if (!getUserMedia) {
            this.setState({ mediaFailure: {name: 'getUserMediaUnsupported'}});
            return;
        }

        getUserMedia.call(navigator, mediaConstraints, this.onMediaSuccess, this.onMediaFailure);
    }

    onMediaSuccess(stream) {

        this.setState({
            streaming: true,
            streamURL: URL.createObjectURL(stream)
        });
    }

    onMediaFailure(error) {
        this.props.onFailure(error);
    }

    stopMediaStream(){
        this.state.mediaRecorder.stream.getTracks().map((track) => track.stop());
    }

    shutter() {
        const image = captureVideoFrame(this._viewfinder, 'png');
        this.setState({
            image: image,
            thumbnail: image
        });
    }

    save() {
        // Pass the blobs up
        this.props.save({
            image: this.state.image.blob,
            imageThumbnail: this.state.thumbnail.blob
        });
    }

    discard() {
        this.setState({
            image: null,
            thumbnail: null
        })
    }

    render() {
        return (
            <Grid>
                <Row>
                    <Col xs={3}/>
                    <Col xs={6}>
                        <div>
                            { this.state.streaming &&
                                <ResponsiveEmbed a4by3>
{'fraction_non_alphanumeric': 0.11240601503759398, 'fraction_numerical': 0.0015037593984962407, 'mean_word_length': 1.8469769930444089, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2817028', 'n_tokens_mistral': 1536, 'n_tokens_neox': 1473, 'n_words': 270}