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代码。
现在请编辑并解决问题。
答案 0 :(得分:3)
Twilio开发者传道者在这里。
您没有包含实际设置呼叫的代码位,因此我只能指出正确的方向。
当您加入会议室时,可以从会议室中的localParticipant
对象访问您的本地媒体。 localParticpant
是[{3}}的一个实例,因此您可以根据需要调用audioTracks
或videoTracks
,这两个实现Participant
。
例如,如果要静音,可以拨打
room.localParticipant.audioTracks.forEach(function(trackId, track) {
track.disable();
});
您可以对videoTracks
执行相同的操作。要再次启用曲目,您可以使用LocalTrack
执行相同操作。
让我知道这是否有帮助。
答案 1 :(得分:0)
substring(concat(input1,input2),3)
答案 2 :(得分:0)
如果您使用的是JavaScript v2,则以下代码可以正常工作。
function muteAudioHandler() {
event.preventDefault();
room.localParticipant.audioTracks.forEach(publication => {
publication.track.disable();
});
}
function unmuteAudioHandler() {
event.preventDefault();
room.localParticipant.audioTracks.forEach(publication => {
publication.track.enable();
});
}
function hideVideoHandler() {
event.preventDefault();
room.localParticipant.videoTracks.forEach(publication => {
publication.track.disable();
});
}
function showVideoHandler() {
event.preventDefault();
room.localParticipant.videoTracks.forEach(publication => {
publication.track.enable();
});
}
答案 3 :(得分:-1)
可能我来晚了
这很容易解释,但是...首先,您必须分配localParticipant音轨,然后检查它们是否处于活动状态(未静音)或已禁用(静音)。如果该轨道处于活动状态,请将其禁用以使其静音。如果禁用了轨道,请启用它以使其静音。此代码使您可以使用一个简单的“静音”按钮,这是主要问题
function unmute_mute() {
var localParticipant = room.localParticipant;
localParticipant.audioTracks.forEach(function (audioTrack) {
if ( audioTrack.isEnabled == true ) {
audioTrack.disable();
} else {
audioTrack.enable();
}
});
}