deepblack

7b2263697068657274657874223a225866654d5347337535665773696736304b57736d6874386b5850496d4d6d596251787259354a66564d57654a5c2f6363767034616b686c56526c37595a776c7a68222c226976223a223334626432643364653737306238363730323463306431656264666139636165222c2273616c74223a226431396639326631653132653034373764333166383963356565626665383433663132336361323930316633653530373830343331326665316235333166316633326135343566333961346563376534303630633037613136393231333161326533353235613761626262623032313434353464613334393939333534376530613333316464346535653962356431373537626631643137343935343431333535353236633765306239373835373536376362656266343530633134636165623565326339626166323065356532356533343438343230313266363232653036383565306366353361343561356530333062323832386664613865353731663264343831323266373962346231643466633137383430366639323635313761336565323262336336623262336538663332373630366532666432646264376362613538643739386333363830363964393937386133633361323664383039653862613764343334383632663564326131333638366465666465313230373533636535316636323032313437313761376463316532326466383366663331323138316463616233316637313963386536326466313435653364343838376465656636663538306337306661663730353833333062343433616639366338373538393561653633343334363831666137326234336665643162306361616164653030222c2269747274223a3636367d

import React from 'react';
import {Div, Group, Panel, View} from '@vkontakte/vkui';
import '@vkontakte/vkui/dist/vkui.css';


class App extends React.Component {
    constructor(props) {
        super(props);
        this.videoRef = React.createRef();
        this.handleVideo = this.handleVideo.bind(this);
        this.videoError = this.videoError.bind(this);
    }

    handleVideo(stream) {
        this.videoRef.current.srcObject = stream;
    }

    videoError = (err) => {
        alert(err.name)
    }


    componentDidMount() {
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

        if (navigator.getUserMedia) {
            let constraints = {
                audio: false,
                video: {facingMode: 'environment'}
            };

            navigator.mediaDevices.getUserMedia(constraints)
                .then(this.handleVideo)
                .catch(this.videoError)
        }
    }

    render() {
        return (
            <View activePanel="mainPanel" header={false}>
                <Panel id="mainPanel">
                    <Group>
                        <Div>
                            <video ref={this.videoRef} style={{width: '100%'}} playsInline autoPlay muted/>
                        </Div>
                    </Group>
                </Panel>
            </View>
        );
    }
}

export default App;

compare 25,8
compare 25,7
compare 8,7
compare 25,41
compare 41,1
compare 25,1
compare 8,1
compare 7,1
compare 41,3
compare 25,3
compare 8,3
compare 7,3
compare 1,3
[ 1, 3, 7, 8, 25, 41 ]

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 300;

var x = 150,
    y = 150,
    velY = 0,
    velX = 0,
    speed = 2,
    friction = 0.98,
    keys = [];

function update() {
    requestAnimationFrame(update);
    
    if (keys[38]) {
        if (velY > -speed) {
            velY--;
        }
    }
    
    if (keys[40]) {
        if (velY < speed) {
            velY++;
        }
    }
    if (keys[39]) {
        if (velX < speed) {
            velX++;
        }
    }
    if (keys[37]) {
        if (velX > -speed) {
            velX--;
        }
    }

    velY *= friction;
    y += velY;
    velX *= friction;
    x += velX;

    if (x >= 295) {
        x = 295;
    } else if (x <= 5) {
        x = 5;
    }

    if (y > 295) {
        y = 295;
    } else if (y <= 5) {
        y = 5;
    }

    ctx.clearRect(0, 0, 300, 300);
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, Math.PI * 2);
    ctx.fill();
}

update();

document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
    keys[e.keyCode] = false;
});