Question

我使用Twilio API在iPad和笔记本电脑之间创建视频聊天。

它适用于iPad：我有2个屏幕（大屏幕包含来自笔记本电脑的视频，小屏幕包含来自iPad的视频）。但我在笔记本电脑的浏览器中只有一个大屏幕（来自iPad的视频），而且笔记本电脑上的相机视频也不小。

我的代码：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://media.twiliocdn.com/sdk/js/video/v1/twilio-video.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        var accessToken = "..."
        const Video = Twilio.Video;
        const client = new Video.Client(accessToken);
        const localMedia = new Video.LocalMedia();

        Video.getUserMedia().then(mediaStream => {
            localMedia.addStream(mediaStream);
        });

        client.connect({
            to: 'my-room',
            localMedia: localMedia
        }).then(room => {
            const localParticipant = room.localParticipant;                       
            room.participants.forEach(participant => {                    
                participant.on('trackAdded', track => {
                    if (track.kind === 'audio') {
                        console.log('Added an AudioTrack %s', track.id);
                    } else {
                        console.log('Added a VideoTrack %s', track.id);
                    }
                });
                participant.on('trackRemoved', track => {
                    if (track.kind === 'audio') {
                        console.log('Removed an AudioTrack %s', track.id);
                    } else {
                        console.log('Removed a VideoTrack %s', track.id);
                    }
                });    
                participant.on('trackEnabled', track => {
                    if (track.kind === 'audio') {
                        console.log('Enabled AudioTrack %s', track.id);
                    } else {
                        console.log('Enabled VideoTrack %s', track.id);
                    }
                });    
                participant.on('trackDisabled', track => {
                    if (track.kind === 'audio') {
                        console.log('Disabled AudioTrack %s', track.id);
                    } else {
                        console.log('Disabled VideoTrack %s', track.id);
                    }
                });

                const element = participant.media.attach();
                document.body.appendChild(element);

                participant.media.tracks.forEach(track => {
                    track.attach('#track-view');
                });
            });

            room.once('participantConnected', participant => {
                console.log('Participant "%s" has connected to the Room', participant.identity);
            });

            room.once('participantDisconnected', participant => {                
                console.log('Participant "%s" has disconnected from Room', participant.identity);
            });

        }, error => {
            console.error('Failed to connect to the Room', error);
        });
    </script>
</body>
</html>

在笔记本电脑的浏览器中用笔记本电脑显示小屏幕的最佳方法是什么？

Answer 1

Twilio开发者传道者在这里。

在我看来，好像你没有将本地媒体附加到任何地方的页面。你可以试试像：

Video.getUserMedia().then(mediaStream => {
    localMedia.addStream(mediaStream);
    const element = localMedia.attach();
    document.body.appendChild(element);
});

让我知道这是否有帮助。

在浏览器中获取我的视频

1 个答案: