init: function(config){
var that = this;
that.CONFIG = config;
that.video = Twilio.Video;
that.CONFIG.videoCall = true;
that.CONFIG.audioCall =true;
that.CONFIG.audioCallTrackCount =0;
that.CONFIG.videoCallTrackCount =0;
//alert message instance
that.ALERT_MESSAGES = Object.create(AlertMessage).init();
//ajaxing instance
that.AJAXING = Object.create(Ajaxing);
$(".fullscreen-btn").addClass('hide');
window.videoCallObject = that;
that.cachePageConstants();
//that.getTwilioTokenFromRestAPI();
return that;
},
cachePageConstants: function(){
var that = this;
$("#buttonCall").on("click", function(e){
e.preventDefault();
console.log("video button clicked");
$("#buttonCall").hide();
$("#audioCall").hide();
$("#buttonCallEnd").show();
$(".mute-btns").removeClass('hide');
document.getElementById('connecting').innerHTML = '<span style="color:#69C4CB;"><img src="/resources/css/images/refresh_gif.gif" />Calling...</span>';
that.CONFIG.videoCall =true;
that.getTwilioTokenFromRestAPI();
});
$("#audioCall").on("click", function(e){
e.preventDefault();
console.log("Audio button clicked");
$("#buttonCall").hide();
$("#audioCall").hide();
$("#buttonCallEnd").show();
$(".mute-btns").removeClass('hide');
document.getElementById('connecting').innerHTML = '<span style="color:#69C4CB;"><img src="/resources/css/images/refresh_gif.gif" />Calling...</span>';
that.CONFIG.videoCall = false;
that.CONFIG.audioCall =true;
that.getTwilioTokenFromRestAPI();
});
$("#buttonRefresh").on("click", function(e){
e.preventDefault();
that.refreshPatientStatus(true);
});
$("#buttonCallEnd").on("click", function(e){
e.preventDefault();
console.log("Call end button clicked");
$("#buttonCallEnd").hide();
$("#buttonCall").show();
$("#audioCall").show();
$(".mute-btns").addClass('hide');
that.leaveRoomIfJoined();
});
$('.fullscreen-btn').on('click', function(){
$(this).parent().toggleClass('fullscreen');
});
},
getTwilioTokenFromRestAPI: function(){
var that = this,
postRequestActions = {
"successCallBack": that.onGettingToken,
"loading": $("#connecting"),
"ajaxType": "GET"
};
that.AJAXING.sendRequest(that.CONFIG.baseUrl+ "/services/v3/twilio/getTwilioToken?patientUuid="+UUID+"&providerUserId="+providerUserId+"&requestedFrom="+"COACH", null, postRequestActions);
},
onGettingToken: function(data){
var that = window.videoCallObject;
that.CONFIG.data=data;
if(data){
that.CONFIG.TOKEN = data.token;
$("#connecting").removeClass("hide");
$("#connecting").show();
that.sendNotificationForcall(data);
that.initTwilioCall(data.token,data.room);
}else{
that.ALERT_MESSAGES.showAlertMessage($("#terminatedMessage"), "Unable to get token from rest API", that.ALERT_MESSAGES.ERROR);
}
},
//send Video call Notification to client.
sendNotificationForcall:function (data) {
var that = this,
requestActions = {
"ajaxType": "GET"
};
var type = "CREATE_CALL"
var callType;
if(that.CONFIG.videoCall)
callType = "VIDEO_CALL";
else
callType = "AUDIO_CALL";
/*that.AJAXING.sendRequest(that.CONFIG.baseUrl+ "/services/v3/twilio/sendTwilioVideoNotification?patientId="+patId+"&providerUserId="+data.providerUserId+"&roomName="+data.roomName+"&callType="+callType+"&type="+type, null, requestActions);*/
},
//send Video call Notification to client.
sendNotificationForCallCancel:function (data,type) {
var that = this,
requestActions = {
"ajaxType": "GET"
};
var callType;
if(that.CONFIG.videoCall)
callType = "VIDEO_CALL";
else
callType = "AUDIO_CALL";
/*that.AJAXING.sendRequest(that.CONFIG.baseUrl+ "/services/v3/twilio/sendTwilioVideoNotification?patientId="+patId+"&providerUserId="+data.providerUserId+"&roomName="+data.roomName+"&callType="+callType+"&type="+type, null, requestActions);*/
},
initTwilioCall: function (token,room) {
var that = window.videoCallObject;
that.video.connect(token, {audio: that.CONFIG.audioCall,
name: room,
video: that.CONFIG.videoCall
}).then(function(room) {
that.onParticipantConnected(room);
//room.disconnect();
}, function(error) {
//console.error('Unable to connect to Room: ' + error.message);
that.ALERT_MESSAGES.showAlertMessage($("#terminatedMessage"), "Unable to get token from rest API", error.message);
});
},
onParticipantConnected: function (room) {
var that = window.videoCallObject;
that.CONFIG.activeRoom=room;
// Attach LocalParticipant's Tracks, if not already attached.
that.CONFIG.previewContainer = document.getElementById('local-media');
var previewContainer = that.CONFIG.previewContainer;
if (!previewContainer.querySelector('video')) {
document.getElementById('connecting').innerHTML = '<span style="color:Blue;"><img src="/resources/css/images/refresh_gif.gif" />Connecting...</span>';
//that.attachParticipantTracks(room.localParticipant, previewContainer);
}
room.on('participantConnected', function(participant) {
room.participants.forEach(function(participant) {
//console.log("Already in Room: '" + participant.identity + "'");
var previewContainer = document.getElementById('videoContainer');
that.CONFIG.activeRoom.previewContainer=previewContainer;
that.attachParticipantTracks(participant, previewContainer);
});
//console.log('A remote Participant connected: ', participant);
$(".fullscreen-btn").removeClass('hide');
document.getElementById('connecting').innerHTML = '<span style="color:green;">Call active</span>';
});
// When a Participant adds a Track, attach it to the DOM.
room.on('trackAdded', function(track, participant) {
if(track.kind =='video' && that.CONFIG.videoCall == false){
that.CONFIG.videoCall = true;
that.video.createLocalVideoTrack().then(function(localTrack) {
room.localParticipant.addTrack(localTrack);
that.attachParticipantTracks(room.localParticipant, that.CONFIG.previewContainer);
});
}else{
room.localParticipant.tracks.forEach(track => {
if(track.kind == 'video'){
track.enable();
}
});
if(track.kind =='video')
that.attachParticipantTracks(room.localParticipant, that.CONFIG.previewContainer);
}
var previewContainer = document.getElementById('videoContainer');
that.attachTracks([track], previewContainer);
});
// When a Participant removes a Track, detach it from the DOM.
room.on('trackRemoved', function(track, participant) {
if(track.kind =='video'){
that.detachSingleTracks(room.localParticipant);
}
that.detachTracks([track]);
});
// When a Participant leaves the Room, detach its Tracks.
room.on('participantDisconnected', function(participant) {
$("#buttonCall").show();
$("#audioCall").show();
$("#buttonCallEnd").hide();
$(".mute-btns").addClass('hide');
that.detachParticipantTracks(participant);
that.detachParticipantTracks(room.localParticipant);
that.leaveRoomIfJoined();
});
// Once the LocalParticipant leaves the room, detach the Tracks
// of all Participants, including that of the LocalParticipant.
room.on('disconnected', function() {
$("#buttonCall").show();
$("#audioCall").show();
$("#buttonCallEnd").hide();
$(".mute-btns").addClass('hide');
that.detachParticipantTracks(room.localParticipant);
room.participants.forEach(that.detachParticipantTracks);
});
},
// Attach the Participant's Tracks to the DOM.
attachParticipantTracks:function (participant, container) {
var that = window.videoCallObject;
var tracks = Array.from(participant.tracks.values());
that.attachTracks(tracks, container);
},
// Attach the Tracks to the DOM.
attachTracks:function(tracks, container) {
var that = window.videoCallObject;
tracks.forEach(function(track) {
if(track.kind == 'audio' && that.CONFIG.audioCallTrackCount == 0){
container.appendChild(track.attach());
that.CONFIG.audioCallTrackCount = 1;
}else if(track.kind == 'video' && that.CONFIG.videoCallTrackCount == 0){
//console.log("video");
container.appendChild(track.attach());
that.CONFIG.videoCallTrackCount = 1;
}
else{
container.appendChild(track.attach());
}
});
},
// Detach the Tracks from the DOM.
detachTracks:function(tracks) {
tracks.forEach(function(track) {
track.detach().forEach(function(detachedElement) {
detachedElement.remove();
});
});
$("#connecting").addClass("hide");
$(".fullscreen-btn").addClass('hide');
},
// Detach the Participant's Tracks from the DOM.
detachParticipantTracks:function(participant) {
var that = window.videoCallObject;
var tracks;
if(participant.tracks !='undefined'){
tracks = Array.from(participant.tracks.values());
}
that.detachTracks(tracks);
},
detachSingleTracks:function(participant) {
var that = window.videoCallObject;
var tracks;
participant.tracks.forEach(track => {
if(track.kind == 'video'){
track.detach().forEach(function(detachedElement) {
detachedElement.remove();
});
track.disable();
}
});
},
leaveRoomIfJoined:function() {
var that = window.videoCallObject;
if (that.CONFIG.activeRoom) {
that.CONFIG.activeRoom.disconnect();
that.sendNotificationForCallCancel(that.CONFIG.data,'CANCEL_CALL');
//that.detachParticipantTracks(that.CONFIG.activeRoom.participant);
}
}
这里是 JavaScript 初学者!
我正在尝试静音/取消静音和暂停/取消暂停音频和视频，但我不知道该怎么做。
我希望按钮在单击时使音频静音/取消静音，并在我单击另一个按钮时暂停/取消暂停本地视频。这是完整的 javascript 代码。
现在请编辑它并解决问题。
最佳答案
此处为 Twilio 开发人员布道师。
您没有包含实际设置调用的代码位，因此我只能为您指出正确的方向。
当您加入一个房间时，可以从房间中的 localParticipant 对象访问您的本地媒体。 localParticpant 是 Participant 的一个实例，因此您可以调用它们的 audioTracks 或 videoTracks，它们都实现了 LocalTrack , 当你想要的时候。
如果你想静音，例如，你可以调用
room.localParticipant.audioTracks.forEach(function(trackId, track) {
track.disable();
});
您可以对 videoTracks 执行相同的操作。要再次启用轨道，您将执行相同的操作，但使用 track.enable() .
让我知道这是否有帮助。
关于twilio - 如何在 twilio 视频通话中静音/取消静音暂停/取消暂停音频和视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45631104/