Как остановить камеру без посещения панели управления (реагирует новый программист)?

Question

Я действительно новичок, чтобы реагировать. Я написал HTML код, и кто-то передал его, чтобы отреагировать на меня. это было превышение p c камеры и фотографирование при нажатии кнопки. Теперь у меня проблема с остановкой камеры, мне нужно посетить систему (панель управления), чтобы остановить камеру. Как мне остановить камеру после самостоятельной съемки. Также, если бы кто-нибудь мог объяснить мне, как зашифровать канал, это было бы очень полезно.

import React, {Component} from 'react'

class Camera extends Component {
    constructor(props) {
        super(props);
        this.state = {
            streaming: false,
            width: 320,
            height: 0
        }
        this.startRecording = this.startRecording.bind(this);
        this.capturePhoto = this.capturePhoto.bind(this);
        this.download = this.download.bind(this);

        this.video = React.createRef();
        this.can = React.createRef();
    }

    componentDidMount() {
        this.video = this.video.current;
        this.can = this.can.current;
        // this.ctx = this.can.getContext('2d');
    }

    componentDidUpdate() {
        this.video = this.video.current;
        this.can = this.can.current;
    }

    startRecording() {
        var self = this;
        navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(function(stream) {
            self.video.srcObject = stream;
            self.video.play();
        }).catch(function(err) {
            console.log("An error occurred: " + err);
        });
        this.video.addEventListener('canplay', function(ev){
            if (!self.state.streaming) {
               self.setState({
                   height: self.video.videoHeight / (self.video.videoWidth/self.state.width)
               });

               if (isNaN(self.state.height)) {
                self.setState({
                   height : self.state.width / (4/3),
               })
               }

               self.video.setAttribute('width', self.state.width);
               self.video.setAttribute('height', self.state.height);
               self.can.setAttribute('width', self.state.width);
               self.can.setAttribute('height', self.state.height);
               self.setState({
                   streaming : true
               });
            }
         }, false);
    }

    capturePhoto() {
        var context = this.can.getContext('2d');
        if(this.state.width && this.state.height) {
            this.can.width = this.state.width;
            this.can.height = this.state.height;
            context.drawImage(this.video,0,0, this.state.width,this.state.height);
            // var data = this.can.toDataURL('image/png');
        }else {
            this.props.func();
            // makePhoto();
        }

    }

    download() {
        var link = document.createElement('a');
        link.download = 'filename.png';
        link.href = document.getElementById('camera-canvas').toDataURL('image/png');
        link.click();

    }

    render() {
        return (
            <div className="camera-page">
                <div className="camera">
                    <video ref={this.video} id="video">Video Stream not available</video>
                    {/* <video src={this.video_src} ref={this.video} id="video">Video Stream not available</video> */}
                    <button onClick={this.startRecording}>Start Camera</button>
                    <button onClick={this.capturePhoto}>Take photo</button>
                    <button onClick={this.download}>Download photo</button>
                </div>
                <canvas id="camera-canvas" ref={this.can}></canvas>
            </div>
        );
    }
}

export default Camera;