冻结的视频源

Question

我通过 PeerJS 和 React 使用 WebRTC 构建了一个简单的视频聊天应用程序。

除非选择了带有该视频的 Chrome 选项卡并且用户从键盘单击/滚动/输入文本，否则一切似乎都在正常工作，除非选择了包含该视频的 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;

Answer 1

这听起来像是自动播放政策的问题。不过，这应该只发生在 Chrome Beta 和 Canary 中。如果您使用 --autoplay-policy=no-user-gesture-required 启动 Chrome 是否会发生这种情况（请参阅https://bugs.chromium.org/p/chromium/issues/detail?id=804091#c13）

您可能还想摆脱 URL.createObjectURL（现在 Chrome 也已弃用）并将视频 srcObject 设置为流。

Answer 2

我能够通过将video 元素上的autoplay 属性更改为autoPlay 来解决此问题。