当前位置: 首页 > 知识库问答 >
问题:

Twilio可编程视频在ionic 4中不可见

庄欣然
2023-03-14

我试图使用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());
    });
  }
}

共有1个答案

滕令雪
2023-03-14

您需要在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过期之前要等待多长时间,我可以设置一个自定义过期吗?