Замороженный видеопоток

Я создаю простое приложение для видеочата, используя WebRTC через PeerJS с React.

Кажется, все работает, если видеопоток заморожен, если не выбрана вкладка Chrome с этим видео и пользователь не щелкает/прокручивает/вводит текст с клавиатуры. т.е. кажется, что видеопоток не перерисовывается, если только пользователь не отправляет события от клиента постоянно. Очевидно, это нежелательное поведение; он должен передавать аудио/видео независимо от того, выбрал ли пользователь эту вкладку или нет, и независимо от того, прокручиваются они или нет.

import React, { Component } from 'react';

import Peer from 'peerjs';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentDidMount() {
        const peer = new Peer({key: 'lwjd5qra8257b9'});
        console.log('peer', peer);
        peer.on('open', (id) => {
            //this.setState({ peer, id })
            this.setState({ id })
            this.peer = peer;
        });
        // ANSWER
        peer.on('call', async (call) => {
            const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
            call.answer(localStream);
            call.on('stream', (remoteStream) => {
                this.setState({url: URL.createObjectURL(remoteStream)});
            });
        });
    }
    call = async (id) => {
        const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        //const call = this.state.peer.call(id, localStream);
        const call = this.peer.call(id, localStream);
        call.on('stream', (remoteStream) => {
            this.setState({url: URL.createObjectURL(remoteStream)});
        });
    } 
    submitForm = (e) => {
        e.preventDefault();
        const idInp = e.currentTarget.querySelector('.id');
        const id = idInp.value;
        idInp.value = '';
        this.call(id);
    }
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <h2 className="myId">{ this.state.id || '' }</h2>
                </header>
                <form className="callForm" onSubmit={ this.submitForm }>
                    <input className="id" type="text" name='id' />
                    <button type="submit">Submit</button>
                </form>
                { this.state.url && <video autoplay src={this.state.url} /> }
            </div>
        );
    }
}

export default App;