使用 Reactjs 和 WebRTC 选择屏幕后屏幕共享屏幕不显示

Question

我可以点击分享画面，选择我想要的画面，但点击后视频中没有任何显示。

我想显示我点击或选择的画面

共享屏幕功能：

const shareScreen = () => {
  var displayMediaStreamConstraints = {
    video: true // or pass HINTS
    };
    
    if (navigator.mediaDevices.getDisplayMedia) {
        navigator.mediaDevices.getDisplayMedia(displayMediaStreamConstraints);
    } else {
        navigator.getDisplayMedia(displayMediaStreamConstraints);
    }
};

视频组件

            <Paper className={classes.paper}>
                <Grid item xs={12} md={6}>
                    <Typography variant="h5" gutterBottom>{name || 'Name'}</Typography>
                    <video playsInline muted ref={myVideo} autoPlay className={classes.video} />
                </Grid>
                 <button onClick={shareScreen}>Share Screen</button>
            </Paper>

Answer 1

getDisplayMedia 不显示任何内容，它 returns 一个解析为流的承诺。为了显示视频，您需要等待承诺解决，然后将流分配给 HTMLVideoElement.

的 srcObject 字段

let video = document.getElementById('uservideo');
let stream = await navigator.mediaDevices.getDisplayMedia(constraints);
video.srcObject = stream;

使用 Reactjs 和 WebRTC 选择屏幕后屏幕共享屏幕不显示

Screen sharing screen does not display after choosing screen using Reactjs and WebRTC

javascript

webrtc

reactjs