我试图使用Twilio video实现一个视频呼叫,这里是连接,但给Twilio访问令牌。
我得到了访问令牌,但本地房间(本地摄像机预览视频不可见),我试图连接远程视频。远程视频也连接了,但没有在移动屏幕上显示。
HTML
<ion-content #scrollArea fullscreen>
<div id="video-container">
<div id="local" #localVideo>
<p>local video</p>
</div>
<div id="remote" #remoteVideo>
<p>remote video</p>
</div>
<input type="text" [(ngModel)]="username" placeholder="username">
<input type="text" [(ngModel)]="roomName" placeholder="room name">
<input type="button" [disabled]="!username || !roomName ? true : false" value="connect" (click)="connect()">
<input type="button" [disabled]="!twilioService.roomObj ? true : false" value="disconnect" (click)="disconnect()">
</div>
</ion-content>
TS
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { TwiliovideoService } from '../_service/twiliovideo.service';
import { ServiceProxy, ServiceRegistry } from '../_helpers/ServiceProxy';
import { IonContent } from '@ionic/angular';
import { async } from '@angular/core/testing';
@Component({
selector: 'app-videocall',
templateUrl: './videocall.component.html',
styleUrls: ['./videocall.component.scss'],
})
export class VideocallComponent implements OnInit {
message1: string;
accessToken: string;
roomName: string;
username: string;
@ViewChild('scrollArea') content: IonContent;
@ViewChild('localVideo') localVideo: ElementRef;
@ViewChild('remoteVideo') remoteVideo: ElementRef;
video_token: any;
constructor(public twilioService: TwiliovideoService,public serviceProxy: ServiceProxy,) {
this.twilioService.msgSubject.subscribe(r => {
this.message1 = r;
});
}
ngOnInit() {
this.twilioService.localVideo = this.localVideo;
this.twilioService.remoteVideo = this.remoteVideo;
// this.connect();
}
//Video call
log(message) {
this.message1 = message;
}
disconnect() {
if (this.twilioService.roomObj && this.twilioService.roomObj !== null) {
this.twilioService.roomObj.disconnect();
this.twilioService.roomObj = null;
}
}
async connect() {
let date = Date.now();
let video_start = {
userName: this.username,
roomName: this.roomName
}
console.log(this.roomName)
await this.serviceProxy.SingleRequest(ServiceRegistry.VIDEOCALL_SESSION,video_start).subscribe(async arg=>{
this.video_token = arg.result
});
console.log(this.video_token)
// localStorage.setItem('video_token', JSON.stringify({
// video_token: this.video_token,
// created_at: date
// }));
// let storage = JSON.parse(localStorage.getItem('video_token') || '{}');
// if (!this.roomName || !this.username) { this.message1 = "enter username and room name."; return; }
// if (storage['video_token'] && storage['created_at'] + 3600000 > date) {
if(this.video_token){
this.accessToken = this.video_token
await this.twilioService.connectToRoom(this.accessToken, { name: this.roomName, audio: true, video: { width: 240 } })
// return;
}
// if (this.video_token!= null)
// this.twilioService.connectToRoom(this.accessToken, { name: this.roomName, audio: true, video: { width: 240 } })
}
//
}
Service.ts
import { Injectable, ElementRef } from '@angular/core';
import { connect, createLocalTracks, createLocalVideoTrack } from 'twilio-video';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class TwiliovideoService {
msgSubject = new BehaviorSubject("");
remoteVideo: ElementRef;
localVideo: ElementRef;
previewing: boolean;
roomObj: any;
constructor() { }
connectToRoom(accessToken: string, options): void {
connect(accessToken, options).then(room => {
console.log(`Successfully joined a Room: ${room}`);
if (!this.previewing && options['video']) {
this.startLocalVideo();
this.previewing = true;
}
// Attach the Participant's Media to a <div> element.
room.on('participantConnected', participant => {
console.log(`Participant "${participant.identity}" connected`);
participant.tracks.forEach(publication => {
if (publication.isSubscribed) {
const track = publication.track;
this.remoteVideo.nativeElement.appendChild(track.attach());
}
});
participant.on('trackSubscribed', track => {
this.remoteVideo.nativeElement.appendChild(track.attach());
});
});
// Log your Client's LocalParticipant in the Room
const localParticipant = room.localParticipant;
console.log(`Connected to the Room as LocalParticipant "${localParticipant.identity}"`);
// Log any Participants already connected to the Room
room.participants.forEach(participant => {
console.log(`Participant "${participant.identity}" is connected to the Room`);
participant.on('trackSubscribed', track => {
this.remoteVideo.nativeElement.appendChild(track.attach());
});
});
// Log new Participants as they connect to the Room
room.once('participantConnected', participant => {
console.log(`Participant "${participant.identity}" has connected to the Room`);
});
// Log Participants as they disconnect from the Room
room.once('participantDisconnected', participant => {
console.log(`Participant "${participant.identity}" has disconnected from the Room`);
});
}, error => {
console.error(`Unable to connect to Room: ${error.message}`);
});
}
startLocalVideo(): void {
createLocalVideoTrack().then(track => {
this.localVideo.nativeElement.appendChild(track.attach());
});
}
}
您需要在config.xml和AndroidManifest.xml中赋予音频和相机权限
>
安装android权限(folllow ionic文档)
在config.xml和AndroidManifest.xml中添加这些权限
<custom-config-file parent="/*" target="AndroidManifest.xml">
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-feature android:name="android.hardware.camera2.full" />
<uses-feature android:name="android.hardware.camera2.autofocus" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.webkit.PermissionRequest" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
</custom-config-file>
是否有一个更Twilio惯用的方法来获取与特定参与者相对应的纵隔参考?
null 提前感谢您的任何帮助:)
当我试图使用方法从应用程序传递param时,我无法在twiML应用程序上获得这些param。但是当我试图用FormData从POSTMAN传递相同的数据时,它工作得很好,也成功地能够创建调用。 请您帮助我如何使用从iOS应用程序传递到twiML的param PHP中的TwiML应用程序: 引用TwiML应用程序代码 https://github.com/twilio/voice-quickstar
我已经尝试了很多和VOIP电话是工作很好,但我想添加一个可编程的消息,当接收者将接受呼叫。 我在后端使用了上面的代码,我的VOIP呼叫工作正常,但我想添加一个可编程的消息,当接收者接受呼叫时
我正在努力将Twilio可编程聊天集成到QT/QML应用程序中--这意味着我不能很容易地使用Javascript客户机SDK。我想有像打字指示符,令牌到期通知等功能,在我的客户机处理。 在示例中,客户端sdk直接启动到Twilio的WebSocket连接,并直接接收诸如令牌过期等事件。 Twilio似乎为Javascript、iOs和Android提供了许多SDK,这些SDK抽象了大多数特性(读取
我正在开发一个使用Twilio接收短信的系统,我的问题是Twilio在给它的cookie过期之前要等待多长时间,我可以设置一个自定义过期吗?