Question

我使用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;

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

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

冷冻视频Feed

2 个答案: