localTrack不显示twilio视频通话JavaScript V2

如何解决localTrack不显示twilio视频通话JavaScript V2

我正在尝试使用Twilio的JavaScript SDK建造一个视频会议室，并且从v1迁移到v2后，不知何故localTrack没有添加到会议室中，基本上用户看不到自己的视频，但可以看到其他人的视频并听到他们的音频。这是我正在尝试的代码
<!DOCTYPE html>
<html lang="{{ str_replace('_','-',app()->getLocale()) }}">
    <!-- <script src="{{ URL::asset('//media.twiliocdn.com/sdk/js/video/v1/twilio-video.min.js') }}"></script> -->
    <script src="//media.twiliocdn.com/sdk/js/video/releases/2.7.2/twilio-video.min.js"></script>
    <script>
        Twilio.Video.createLocalTracks({
            audio: true,video: { width: 500 }
        }).then(function(localTracks) {
            return Twilio.Video.connect('{{$accessToken}}',{
                name: '{{$roomName}}',tracks: localTracks,video: { width: 500 }
            });
        }).then(function(room) {
            console.log('Successfully joined a Room: ',room.name);

        var previewContainer = document.getElementById(room.localParticipant.sid);
        if (!previewContainer || !previewContainer.querySelector('video')) {
            participantConnected(room.localParticipant);
        }

        room.participants.forEach(participantConnected);

        room.on('participantConnected',participantConnected);

        room.on('participantDisconnected',participantDisconnected);
        room.once('disconnected',error => room.participants.forEach(participantDisconnected));
    });

    function participantConnected(participant) {
        console.log('Participant "%s" connected',participant.identity);

        const div = document.createElement('div');
        div.id = participant.sid;
        div.setAttribute("style","float: left; margin: 10px;");
        div.innerHTML = "<div style='clear:both'>"+participant.identity+"</div>";

        participant.tracks.forEach(publication => {
          if (publication.isSubscribed) {
            trackSubscribed(div,publication.track);
          }
        });

        participant.on('trackSubscribed',track => trackSubscribed(div,track));
        participant.on('trackUnsubscribed',trackUnsubscribed);

        document.getElementById('media-div').appendChild(div);
      }

      function participantDisconnected(participant) {
        console.log('Participant "%s" disconnected',participant.identity);
        document.getElementById(participant.sid).remove();
      }

      function trackSubscribed(div,track) {
        div.appendChild(track.attach());
      }

      function trackUnsubscribed(track) {
        track.detach().forEach(element => element.remove());
      }

    function shareScreen() {
      navigator.mediaDevices.getDisplayMedia().then(stream => {
          screenTrack = new Twilio.Video.LocalVideoTrack(stream.getTracks()[0]);
          room.localParticipant.publishTrack(screenTrack);
      }).catch(() => {
          alert('Could not share the screen.')
      });
    }
</script>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css') }}">
    <script>
        window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),]) !!};
    </script>
    <!-- Styles -->
    <style>
        html,body {
        background-color: #fff;
        color: #636b6f;
        font-family: 'Nunito',sans-serif;
        font-weight: 200;
        height: 100vh;
        margin: 0;
        }
        .full-height {
        height: 100vh;
        }
        .flex-center {
        align-items: center;
        display: flex;
        justify-content: center;
        }
        .position-ref {
        position: relative;
        }
        .top-right {
        position: absolute;
        right: 10px;
        top: 18px;
        }
        .content {
        text-align: center;
        }
        .title {
        font-size: 84px;
        }
        .links > a {
        color: #636b6f;
        padding: 0 25px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .1rem;
        text-decoration: none;
        text-transform: uppercase;
        }
        .m-b-md {
        margin-bottom: 30px;
        }
        .content{width:100%}
        .video_div{width:33.33%; height:100vh; float:left}
        .screenshare_div{width:33.33%; height:100vh; background-color:#f2f2f2; float:left}
        .chat_div{width:33.33%; height:100vh; float:left}
    </style>
</head>
<body>
    <div class="flex-center position-ref full-height">
    @if (Route::has('login'))
    <div class="top-right links">
        @auth
        <a href="{{ url('/home') }}">Home</a>
        @else
        <a href="{{ route('login') }}">Login</a>
        @if (Route::has('register'))
        <a href="{{ route('register') }}">Register</a>
        @endif
        @endauth
    </div>
    @endif
    <div class="content">
        <div class="video_div">
            <div id="media-div">
            </div>
        </div>
        <div class="screenshare_div">Screen</div>
        <div class="chat_div">
            <div id="app">
                <twilio-chat></twilio-chat>
            </div>
            <script src="{{ asset('js/app.js') }}"></script>
            <script src="{{ asset('//media.twiliocdn.com/sdk/js/common/v0.1/twilio-common.min.js') }}"></script>
            <script src="{{ asset('//media.twiliocdn.com/sdk/js/chat/v3.0/twilio-chat.min.js') }}"></script>
        </div>
    </div>
</body>
这是我的Chrome的屏幕截图。无法为localTrack生成音频和视频。
localTrack不显示twilio视频通话JavaScript V2

如何解决localTrack不显示twilio视频通话JavaScript V2

相关推荐
