I am trying to build a video conference room using Twilio's JavaScript SDK and after migrating from v1 to v2, somehow localTrack is not adding to room, basically users can not see their own video but can see other's video and hear to their audio. Here is the code I am trying
<!DOCTYPE html>
<html lang="">
<!-- <script src=""></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('', {
name: '',
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="">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<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="">Home</a>
@else
<a href="">Login</a>
@if (Route::has('register'))
<a href="">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=""></script>
<script src=""></script>
<script src=""></script>
</div>
</div>
</body>
Here is the screenshot from my chrome. Audio and Video not generating for the localTrack.
from localTrack not showing twilio video call JavaScript V2
No comments:
Post a Comment