VideoCalling使用Twilio

时间:2017-08-23 08:40:27

标签: javascript php video twilio twilio-php

我使用Twilio Javascript sdk和php实现了twilio视频通话功能。如果我在github上的快速入门教程中使用旧的sdk和代码,一切都运行正常。(虽然它不支持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>

这是我在使用最新版本时在控制台中看到的错误。 enter image description here

我的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中的代码(使用quickstart示例作为参考)最近更改了,他们使用的是express.js,因此我不确定它出错的地方。有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

Twilio开发者传道者在这里。

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

相反,你应该使用Twilio.Video.connect(token, { name: 'room-name' }),它会返回一个你加入房间后解决的承诺。

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

让我知道这是否有帮助。