javascript - 使用 Twilio 进行视频通话

Question

我使用 Twilio Javascript sdk 和 php 实现了 twilio 视频通话功能。如果我使用旧的 sdk 和 github 上快速入门教程中的代码，一切都会正常工作。(尽管它不支持 IOS)。当我使用最新的 sdk 时，出现错误并且功能不再起作用。

index.html 文件中使用的旧 Twilio Javascript sdk <script src="//media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta2/twilio-video.js"></script>

使用新的 Twilio Javascript sdk: <script src="//media.twiliocdn.com/sdk/js/video/v1/twilio-video.min.js"></script>

这是我使用最新控制台时在控制台中看到的错误。

我的index.js文件。

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();
  }
}

其github中的代码(使用快速入门示例作为引用)最近发生了变化，他们改用express.js，因此我不确定哪里出了问题。有人可以帮我解决这个问题吗？

Answer 1

这里是 Twilio 开发者布道者。

在测试版和发布版本之间，我们更改了初始化库的方式。您不再使用构造函数，这就是您看到该错误的原因。

相反，您应该使用 Twilio.Video.connect(token, { name: 'room-name' }) ，它返回一个 promise ，一旦您加入房间，该 promise 就会解决。

查看 latest Twilio Video JS documentation获取完整的代码示例并了解如何使用版本 1 SDK。

请告诉我这是否有帮助。