Twilio 可编程视频和 Ionic 3
Twilio Programmable Video and Ionic 3
我正在开发必须实施 Twilio 可编程视频的移动应用程序。
我在 Laravel PHP 框架中使用 Twilio SDK 5.24.2 开发了一个后端并且运行良好。
在移动应用中，我已经通过npm安装了twilio-video 2.0.0-beta4包，并根据"video-quickstart-js-1.x"中的示例开发了一个页面。问题是当 Twilio 尝试连接到房间时，控制台中的错误如下（在日志末尾）：
sip.ua | configuration parameters after validation:
sip.ua | · viaHost: "2lknee65ci64.invalid"
sip.ua | · uri: sip:28cd13aa-0cbc-45d3-85e7-0279ce6869f6@endpoint.twilio.com
sip.ua | · wsServers: [{"ws_uri":"wss://endpoint.twilio.com","sip_uri":"<sip:endpoint.twilio.com;transport=ws;lr>","weight":0,"status":0,"scheme":"WSS"}]
sip.ua | · password: NOT SHOWN
sip.ua | · registerExpires: 600
sip.ua | · register: false
sip.ua | · registrarServer: sip:endpoint.twilio.com
sip.ua | · wsServerMaxReconnection: 3
sip.ua | · wsServerReconnectionTimeout: 4
sip.ua | · connectionRecoveryMinInterval: 2
sip.ua | · connectionRecoveryMaxInterval: 30
sip.ua | · keepAliveInterval: 30
sip.ua | · extraSupported: ["room-signaling","timer"]
sip.ua | · usePreloadedRoute: false
sip.ua | · userAgentString: "SIP.js/0.7.7"
sip.ua | · iceCheckingTimeout: 5000
sip.ua | · noAnswerTimeout: 60000
sip.ua | · stunServers: ["stun:stun.l.google.com:19302"]
sip.ua | · turnServers: []
sip.ua | · traceSip: true
sip.ua | · hackViaTcp: false
sip.ua | · hackIpInContact: false
sip.ua | · hackWssInTransport: true
sip.ua | · hackAllowUnregisteredOptionTags: true
sip.ua | · hackCleanJitsiSdpImageattr: false
sip.ua | · hackStripTcp: false
sip.ua | · contactTransport: "wss"
sip.ua | · forceRport: false
sip.ua | · autostart: false
sip.ua | · rel100: "none"
sip.ua | · replaces: "none"
sip.ua | · mediaHandlerFactory: function promisifiedFactory () {
var mediaHandler = mediaHandlerFactory.apply(this, arguments);
function patchMethod (methodName) {
var method = mediaHandler[methodName];
if (method.length > 1) {
var callbacksFirst = methodName === 'getDescription';
mediaHandler[methodName] = SIP.Utils.promisify(mediaHandler, methodName, callbacksFirst);
}
}
patchMethod('getDescription');
patchMethod('setDescription');
return mediaHandler;
}
sip.ua | · authenticationFactory: undefined
sip.ua | · allowLegacyNotifications: false
sip.ua | · instanceId: "7ef84624-118d-4cbc-838e-5093ef3907bb"
sip.ua | · sipjsId: "5249a"
sip.ua | · hostportParams: "endpoint.twilio.com"
sip.ua | · authorizationUser: "28cd13aa-0cbc-45d3-85e7-0279ce6869f6"
sip.ua | · media: undefined
INFO in [connect #1]: Connecting to a Room
DEBUG in [connect #1]: Options: {wsServer: "wss://endpoint.twilio.com", abortOnIceServersTimeout: false, createLocalTracks: ƒ, environment: "prod", iceServersTimeout: 3000, …}
INFO in [NTSIceServerSource #1]: Created a new NTSIceServerSource
DEBUG in [NTSIceServerSource #1]: ECS server: https://ecs.us1.twilio.com
INFO in [connect #1]: LocalTracks were not provided, so they will be acquired automatically before connecting to the Room. LocalTracks will be released if connecting to the Room fails or if the Room is disconnected
getusermedia.js:22 [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.
WARN in [createLocalTracks #1]: Call to getUserMedia failed: DOMException: Only secure origins are allowed (see: https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features).
INFO in [connect #1]: Error while connecting to a Room: DOMException: Only secure origins are allowed (see: https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features).
consultation-video.ts:137 Could not connect to Twilio: Only secure origins are allowed (see: https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features).
我在Ionic中的代码如下：
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { ApiServiceProvider } from '../../providers/api-service';
import TwilioVideo from 'twilio-video';
export class VideoPage
{
public roomSid: string;
public activeRoom: any;
public twilioAccessToken: string;
@ViewChild('remoteMedia') remoteMedia: any;
@ViewChild('localMedia') localMedia: any;
@ViewChild('buttonLeave') buttonLeave: any;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private apiServiceProvider: ApiServiceProvider
) {
this.roomSid = navParams.get('room_sid');
this.joinToRoom(this.roomSid);
}
joinToRoom(roomSid: string) {
let videoCallData = {
room_sid: roomSid
};
this.apiServiceProvider.joinVideoRoom(videoCallData)
.then(
(result) => {
this.twilioAccessToken = result.access_token;
this.generateVideoCall();
},
(error) => {
console.log(error);
}
)
.catch((error) => {
console.log(error);
});
}
generateVideoCall() {
let connectOptions = {
name: this.roomSid
};
connectOptions['logLevel'] = 'debug';
TwilioVideo.connect(this.twilioAccessToken, connectOptions)
.then(this.roomJoined, function(error) {
console.log('Could not connect to Twilio: ' + error.message);
});
}
roomJoined(room: any) {
this.activeRoom = room;
// Attach LocalParticipant's Tracks, if not already attached.
var previewContainer = this.localMedia;
if (!previewContainer.querySelector('video')) {
this.attachParticipantTracks(this.activeRoom.localParticipant, previewContainer);
}
// Attach the Tracks of the Room's Participants.
this.activeRoom.participants.forEach(function(participant) {
console.log("Already in Room: '" + participant.identity + "'");
let previewContainer = this.remoteMedia;
this.attachParticipantTracks(participant, previewContainer);
});
// When a Participant joins the Room, log the event.
this.activeRoom.on('participantConnected', function(participant) {
console.log("Joining: '" + participant.identity + "'");
});
// When a Participant adds a Track, attach it to the DOM.
this.activeRoom.on('trackAdded', function(track, participant) {
console.log(participant.identity + " added track: " + track.kind);
var previewContainer = this.remoteMedia;
this.attachTracks([track], previewContainer);
});
// When a Participant removes a Track, detach it from the DOM.
this.activeRoom.on('trackRemoved', function(track, participant) {
console.log(participant.identity + " removed track: " + track.kind);
this.detachTracks([track]);
});
// When a Participant leaves the Room, detach its Tracks.
this.activeRoom.on('participantDisconnected', function(participant) {
console.log("Participant '" + participant.identity + "' left the room");
this.detachParticipantTracks(participant);
});
// Once the LocalParticipant leaves the room, detach the Tracks of all Participants, including that of the LocalParticipant.
this.activeRoom.on('disconnected', function() {
console.log('Left room');
if (this.previewTracks) {
this.previewTracks.forEach(function(track) {
track.stop();
});
this.previewTracks = null;
}
this.detachParticipantTracks(this.activeRoom.localParticipant);
this.activeRoom.participants.forEach(this.detachParticipantTracks);
});
}
// Attach the Participant's Tracks to the DOM.
attachParticipantTracks(participant, container) {
var tracks = Array.from(participant.tracks.values());
this.attachTracks(tracks, container);
}
// Attach the Tracks to the DOM.
attachTracks(tracks, container) {
tracks.forEach(function(track) {
container.appendChild(track.attach());
});
}
// Detach the Tracks from the DOM.
detachTracks(tracks) {
tracks.forEach(function(track) {
track.detach().forEach(function(detachedElement) {
detachedElement.remove();
});
});
}
// Detach the Participant's Tracks from the DOM.
detachParticipantTracks(participant) {
var tracks = Array.from(participant.tracks.values());
this.detachTracks(tracks);
}
// Leave Room.
leaveRoomIfJoined() {
if (this.activeRoom) {
this.activeRoom.disconnect();
}
}
}
HTML 具有下一个结构：
<ion-content padding>
<div #remoteMedia></div>
<div #localMedia></div>
<div id="buttonContainer">
<button ion-button icon-only round #buttonLeave (click)="leaveCall($event)">
<ion-icon name="close"></ion-icon>
</button>
</div>
</ion-content>
我 运行 设备中使用此代码的应用程序：
ionic cordova run android --device --livereload
如何解决显示的错误？
提前致谢！
为避免此错误，执行 Ionic 应用程序的正确命令是：
ionic cordova run android --device
不得使用 --livereload，因为在这种情况下，应用程序会以不安全的来源访问开发机器。
我正在开发必须实施 Twilio 可编程视频的移动应用程序。
我在 Laravel PHP 框架中使用 Twilio SDK 5.24.2 开发了一个后端并且运行良好。
在移动应用中，我已经通过npm安装了twilio-video 2.0.0-beta4包，并根据"video-quickstart-js-1.x"中的示例开发了一个页面。问题是当 Twilio 尝试连接到房间时，控制台中的错误如下（在日志末尾）：
sip.ua | configuration parameters after validation:
sip.ua | · viaHost: "2lknee65ci64.invalid"
sip.ua | · uri: sip:28cd13aa-0cbc-45d3-85e7-0279ce6869f6@endpoint.twilio.com
sip.ua | · wsServers: [{"ws_uri":"wss://endpoint.twilio.com","sip_uri":"<sip:endpoint.twilio.com;transport=ws;lr>","weight":0,"status":0,"scheme":"WSS"}]
sip.ua | · password: NOT SHOWN
sip.ua | · registerExpires: 600
sip.ua | · register: false
sip.ua | · registrarServer: sip:endpoint.twilio.com
sip.ua | · wsServerMaxReconnection: 3
sip.ua | · wsServerReconnectionTimeout: 4
sip.ua | · connectionRecoveryMinInterval: 2
sip.ua | · connectionRecoveryMaxInterval: 30
sip.ua | · keepAliveInterval: 30
sip.ua | · extraSupported: ["room-signaling","timer"]
sip.ua | · usePreloadedRoute: false
sip.ua | · userAgentString: "SIP.js/0.7.7"
sip.ua | · iceCheckingTimeout: 5000
sip.ua | · noAnswerTimeout: 60000
sip.ua | · stunServers: ["stun:stun.l.google.com:19302"]
sip.ua | · turnServers: []
sip.ua | · traceSip: true
sip.ua | · hackViaTcp: false
sip.ua | · hackIpInContact: false
sip.ua | · hackWssInTransport: true
sip.ua | · hackAllowUnregisteredOptionTags: true
sip.ua | · hackCleanJitsiSdpImageattr: false
sip.ua | · hackStripTcp: false
sip.ua | · contactTransport: "wss"
sip.ua | · forceRport: false
sip.ua | · autostart: false
sip.ua | · rel100: "none"
sip.ua | · replaces: "none"
sip.ua | · mediaHandlerFactory: function promisifiedFactory () {
var mediaHandler = mediaHandlerFactory.apply(this, arguments);
function patchMethod (methodName) {
var method = mediaHandler[methodName];
if (method.length > 1) {
var callbacksFirst = methodName === 'getDescription';
mediaHandler[methodName] = SIP.Utils.promisify(mediaHandler, methodName, callbacksFirst);
}
}
patchMethod('getDescription');
patchMethod('setDescription');
return mediaHandler;
}
sip.ua | · authenticationFactory: undefined
sip.ua | · allowLegacyNotifications: false
sip.ua | · instanceId: "7ef84624-118d-4cbc-838e-5093ef3907bb"
sip.ua | · sipjsId: "5249a"
sip.ua | · hostportParams: "endpoint.twilio.com"
sip.ua | · authorizationUser: "28cd13aa-0cbc-45d3-85e7-0279ce6869f6"
sip.ua | · media: undefined
INFO in [connect #1]: Connecting to a Room
DEBUG in [connect #1]: Options: {wsServer: "wss://endpoint.twilio.com", abortOnIceServersTimeout: false, createLocalTracks: ƒ, environment: "prod", iceServersTimeout: 3000, …}
INFO in [NTSIceServerSource #1]: Created a new NTSIceServerSource
DEBUG in [NTSIceServerSource #1]: ECS server: https://ecs.us1.twilio.com
INFO in [connect #1]: LocalTracks were not provided, so they will be acquired automatically before connecting to the Room. LocalTracks will be released if connecting to the Room fails or if the Room is disconnected
getusermedia.js:22 [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.
WARN in [createLocalTracks #1]: Call to getUserMedia failed: DOMException: Only secure origins are allowed (see: https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features).
INFO in [connect #1]: Error while connecting to a Room: DOMException: Only secure origins are allowed (see: https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features).
consultation-video.ts:137 Could not connect to Twilio: Only secure origins are allowed (see: https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features).
我在Ionic中的代码如下：
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { ApiServiceProvider } from '../../providers/api-service';
import TwilioVideo from 'twilio-video';
export class VideoPage
{
public roomSid: string;
public activeRoom: any;
public twilioAccessToken: string;
@ViewChild('remoteMedia') remoteMedia: any;
@ViewChild('localMedia') localMedia: any;
@ViewChild('buttonLeave') buttonLeave: any;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private apiServiceProvider: ApiServiceProvider
) {
this.roomSid = navParams.get('room_sid');
this.joinToRoom(this.roomSid);
}
joinToRoom(roomSid: string) {
let videoCallData = {
room_sid: roomSid
};
this.apiServiceProvider.joinVideoRoom(videoCallData)
.then(
(result) => {
this.twilioAccessToken = result.access_token;
this.generateVideoCall();
},
(error) => {
console.log(error);
}
)
.catch((error) => {
console.log(error);
});
}
generateVideoCall() {
let connectOptions = {
name: this.roomSid
};
connectOptions['logLevel'] = 'debug';
TwilioVideo.connect(this.twilioAccessToken, connectOptions)
.then(this.roomJoined, function(error) {
console.log('Could not connect to Twilio: ' + error.message);
});
}
roomJoined(room: any) {
this.activeRoom = room;
// Attach LocalParticipant's Tracks, if not already attached.
var previewContainer = this.localMedia;
if (!previewContainer.querySelector('video')) {
this.attachParticipantTracks(this.activeRoom.localParticipant, previewContainer);
}
// Attach the Tracks of the Room's Participants.
this.activeRoom.participants.forEach(function(participant) {
console.log("Already in Room: '" + participant.identity + "'");
let previewContainer = this.remoteMedia;
this.attachParticipantTracks(participant, previewContainer);
});
// When a Participant joins the Room, log the event.
this.activeRoom.on('participantConnected', function(participant) {
console.log("Joining: '" + participant.identity + "'");
});
// When a Participant adds a Track, attach it to the DOM.
this.activeRoom.on('trackAdded', function(track, participant) {
console.log(participant.identity + " added track: " + track.kind);
var previewContainer = this.remoteMedia;
this.attachTracks([track], previewContainer);
});
// When a Participant removes a Track, detach it from the DOM.
this.activeRoom.on('trackRemoved', function(track, participant) {
console.log(participant.identity + " removed track: " + track.kind);
this.detachTracks([track]);
});
// When a Participant leaves the Room, detach its Tracks.
this.activeRoom.on('participantDisconnected', function(participant) {
console.log("Participant '" + participant.identity + "' left the room");
this.detachParticipantTracks(participant);
});
// Once the LocalParticipant leaves the room, detach the Tracks of all Participants, including that of the LocalParticipant.
this.activeRoom.on('disconnected', function() {
console.log('Left room');
if (this.previewTracks) {
this.previewTracks.forEach(function(track) {
track.stop();
});
this.previewTracks = null;
}
this.detachParticipantTracks(this.activeRoom.localParticipant);
this.activeRoom.participants.forEach(this.detachParticipantTracks);
});
}
// Attach the Participant's Tracks to the DOM.
attachParticipantTracks(participant, container) {
var tracks = Array.from(participant.tracks.values());
this.attachTracks(tracks, container);
}
// Attach the Tracks to the DOM.
attachTracks(tracks, container) {
tracks.forEach(function(track) {
container.appendChild(track.attach());
});
}
// Detach the Tracks from the DOM.
detachTracks(tracks) {
tracks.forEach(function(track) {
track.detach().forEach(function(detachedElement) {
detachedElement.remove();
});
});
}
// Detach the Participant's Tracks from the DOM.
detachParticipantTracks(participant) {
var tracks = Array.from(participant.tracks.values());
this.detachTracks(tracks);
}
// Leave Room.
leaveRoomIfJoined() {
if (this.activeRoom) {
this.activeRoom.disconnect();
}
}
}
HTML 具有下一个结构：
<ion-content padding>
<div #remoteMedia></div>
<div #localMedia></div>
<div id="buttonContainer">
<button ion-button icon-only round #buttonLeave (click)="leaveCall($event)">
<ion-icon name="close"></ion-icon>
</button>
</div>
</ion-content>
我 运行 设备中使用此代码的应用程序：
ionic cordova run android --device --livereload
如何解决显示的错误？
提前致谢！
为避免此错误，执行 Ionic 应用程序的正确命令是：
ionic cordova run android --device
不得使用 --livereload，因为在这种情况下，应用程序会以不安全的来源访问开发机器。