VideoCalling mit Twilio

Question

Ich implementiert Twilio Video-Aufruf-Funktion mit Twilio Javascript SDK und PHP. Alles funktioniert gut, wenn ich das alte sdk und den Code in ihrem Schnellstart-Tutorial auf github benutze (obwohl es IOS nicht unterstützt). Wenn ich den neuesten sdk benutze, erhalte ich einen Fehler und die Funktionalität funktioniert nicht mehr.

alt Twilio Javascript sdk in Datei index.html verwendet <script src="//media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta2/twilio-video.js"></script>

neue Twilio Javascript sdk verwendet: <script src="//media.twiliocdn.com/sdk/js/video/v1/twilio-video.min.js"></script>

Und das ist der Fehler, den ich in meiner Konsole sehen, wenn ich die späteste verwenden.

Meine index.js Datei.

var videoClient; 
var activeRoom; 
var previewMedia; 
var identity; 
var roomName; 

// Check for WebRTC 
if (!navigator.webkitGetUserMedia && !navigator.mozGetUserMedia) { 
    alert('WebRTC is not available in your browser.'); 
} 

// When we are about to transition away from this page, disconnect 
// from the room, if joined. 
window.addEventListener('beforeunload', leaveRoomIfJoined); 
$(document).ready(function() { 
    console.log('testing'); 

$.getJSON('./token.php', function (data) { 
    identity = data.identity; 

    console.log(data); 
    // Create a Video Client and connect to Twilio 
    videoClient = new Twilio.Video.Client(data.token); 
    document.getElementById('room-controls').style.display = 'block'; 

    // Bind button to join room 
    document.getElementById('button-join').onclick = function() { 
    roomName = document.getElementById('room-name').value; 
    if (roomName) { 
     log("Joining room '" + roomName + "'..."); 

     videoClient.connect({ to: roomName}).then(roomJoined, 
     function(error) { 
      log('Could not connect to Twilio: ' + error.message); 
     }); 
    } else { 
     alert('Please enter a room name.'); 
    } 
    }; 

    // Bind button to leave room 
    document.getElementById('button-leave').onclick = function() { 
    log('Leaving room...'); 
    activeRoom.disconnect(); 
    }; 
}); 

}); 

// Successfully connected! 
function roomJoined(room) { 
    activeRoom = room; 

    log("Joined as '" + identity + "'"); 
    document.getElementById('button-join').style.display = 'none'; 
    document.getElementById('button-leave').style.display = 'inline'; 

    // Draw local video, if not already previewing 
    if (!previewMedia) { 
    room.localParticipant.media.attach('#local-media'); 
    } 

    room.participants.forEach(function(participant) { 
    log("Already in Room: '" + participant.identity + "'"); 
    participant.media.attach('#remote-media'); 
    }); 

    // When a participant joins, draw their video on screen 
    room.on('participantConnected', function (participant) { 
    log("Joining: '" + participant.identity + "'"); 
    participant.media.attach('#remote-media'); 
    }); 

    // When a participant disconnects, note in log 
    room.on('participantDisconnected', function (participant) { 
    log("Participant '" + participant.identity + "' left the room"); 
    participant.media.detach(); 
    }); 

    // When we are disconnected, stop capturing local video 
    // Also remove media for all remote participants 
    room.on('disconnected', function() { 
    log('Left'); 
    room.localParticipant.media.detach(); 
    room.participants.forEach(function(participant) { 
     participant.media.detach(); 
    }); 
    activeRoom = null; 
    document.getElementById('button-join').style.display = 'inline'; 
    document.getElementById('button-leave').style.display = 'none'; 
    }); 
} 

// Local video preview 
document.getElementById('button-preview').onclick = function() { 
    if (!previewMedia) { 
    previewMedia = new Twilio.Video.LocalMedia(); 
    Twilio.Video.getUserMedia().then(
    function (mediaStream) { 
     previewMedia.addStream(mediaStream); 
     previewMedia.attach('#local-media'); 
    }, 
    function (error) { 
     console.error('Unable to access local media', error); 
     log('Unable to access Camera and Microphone'); 
    }); 
    }; 
}; 

// Activity log 
function log(message) { 
    var logDiv = document.getElementById('log'); 
    logDiv.innerHTML += '<p>&gt;&nbsp;' + message + '</p>'; 
    logDiv.scrollTop = logDiv.scrollHeight; 
} 

function leaveRoomIfJoined() { 
    if (activeRoom) { 
    activeRoom.disconnect(); 
    } 
} 

Der Code in ihrer github (quickstart Probe als Referenz) vor kurzem geändert wird und sie verwenden Express.js statt, wegen denen ich nicht sicher bin, wo ist es falsch gehen. Kann mir jemand bei der Lösung helfen?

Answer 1

Twilio Entwickler Evangelist hier.

Zwischen der Beta und der freigegebenen Version haben wir die Art der Initialisierung der Bibliothek geändert. Sie verwenden den Konstruktor nicht mehr, weshalb Sie diesen Fehler sehen.

Stattdessen sollten Sie Twilio.Video.connect(token, { name: 'room-name' }) verwenden, die ein Versprechen zurückgibt, das löst, sobald Sie dem Raum beigetreten sind.

Überprüfen Sie die latest Twilio Video JS documentation für ein vollständiges Codebeispiel und um zu sehen, wie das SDK Version 1 zu verwenden.

Lassen Sie mich wissen, ob das überhaupt hilft.