API financeira

Please note

A API do cenário financeiro é uma lista de APIs comuns que o phizdclip mantém em colaboração com A Philip Applet EcoSystem Partners em torno de cenários financeiros. Ao usar as APIs de Footwowing, verifique se o aplicativo HST ** tem Integrou o phizdclip sdk e o terceiro sdks **, caso contrário, o applet Não será capaz de implementar a funcionalidade relevante. Se você tiver Qualquer dupla quando os usou, entre em contato conosco.

1. Antecedentes de uso

O contexto em que a API do cenário financeiro está usando é a seguinte.

• Se o aplicativo integrates Phizclip sdk + um sdk que tem ben Interface com o phitclip, então o applet pode chamar diretamente a API e alcançar os objetivos funcionais relevantes.
• Se o aplicativo only Integra o PhizClip SDK, não o sdk para Funções interfiguradas com sucesso com phizclip, o applet não vai Responda a chamadas para a API do cenário financeiro.
• Se o aplicativo integrates Phizclip sdk + sdk não junto com Phizclip e o aplicativo host implementa o registro personalizado com base no Conteúdo da API ( iOS custom registration API | Android custom registration API), então o applet pode chamar o relevante API para implementar a função especificada. Em equilíbrio, recomendamos.
• Para desenvolvedores de applets no setor financeiro, as APIs Descrito nesta página pode ser usado diretamente no código comercial, minimizar a quantidade de cuscomissão exigida pelos desenvolvedores por Padronizando chamadas de API.
• Para fornecedores de aplicativos host no setor financeiro, eles podem integrar Phizclip SDK + outras funcionalidades especificadas SDK ** Academy para seus Necessidades reais, que podem minimizar a integração, desenvolvimento e Interface a carga de trabalho através desta especificação.

Cooperation notes

Terceiro-Os desenvolvedores do SDK do partido podem seguir o desenvolvimento unificado de Phizclip Especificações para projetar maneiras específicas de integrar funções relevantes em cenários de applet. Você pode ligar 0755-86967467 ordenado Inscreva -se no projeto DEEPL. Visite www.deepl.com/profors Mais informações. Escreva um e -mail para wangzi@finogeeks.com Para saber mais sobre isso.

2. Autenticação-APIs relacionadas

2.1 Reconhecimento de cartões OCR (Fincardocr)

Nome da interface: Fincardocring

Dependências de interface: nenhum (pode ser chamado usando qualquer versão de Phizclip sdk)

Parâmetros de solicitação

Name	Type	Default	Descrição
type	String	non-empty	"BankCard" : reconhecimento de cartão bancário "IDCard" : reconhecimento de cartão de identificação "IDCardCheck" : ID Check Quality Check "BusiCert" : Business License Reco Gnition
imagePath	String		O arquivo WHTO do caminho está localizado O applet pode extrair esse campo por ChoiceImage iOS/Android Pass o caminho absoluto do arquivo onde o e iOS pode escrever o arquivo UIImage em um arquivo temporário como Um simples problema de filtro de solutiina

Resultados de retorno

Name	Type	Default	Descrição
type	String	non-empty	"BankCard" : reconhecimento de cartão bancário "IDCard" : reconhecimento de cartão de identificação "IDCardCheck" : ID Check Quality Check "BusiCert" : Business License Reco Gnition
errorCode	Int	0	Identificar resultado, 0 significa sucesso
Descrição	String		Descrição do resultado do reconhecimento
recogResult	Object		Identifique o resultado {"cardno": "número do cartão", ...}

Recograma recogResult field description Frente do cartão de identificação

Name	Descrição
face	0: Frente, 1: Voltar
nation	Nacionalidade (disponível apenas na frente)
gender	Gênero (disponível apenas na frente)
birthday	Aniversário (disponível apenas na frente)
address	Endereço (disponível apenas na frente)
name	Nome (apenas aproveita na frente)
idNo	Número de ID (disponível somente na frente)
startDate	Data de expiração (disponível apenas no tamanho do reverso)
endDate	Data de expiração (disponível apenas no tamanho do reverso)
signOrg	Autoridade emissora (somente o lado inverso)

Controle de qualidade do cartão de identificação

Name	Descrição
risk	Riscos de imagem: 0 = nenhum 1 = cópia 2 = tela fotográfica 3 = id de falsa 4 = marca de água 5 = obscurd <br /6 = bordas cortadas 7 = bordas cortadas = distorção do cartão 8 = manchas de luz

Cartões bancários

Name	Descrição
cardNo Número do cartão
bankName	Banco
bankId	bankId
cardType	card type: debit card quasi-credit card

Licença comercial

Name	Descrição
regOrg	Autoridade de Registro
busiScrope	Escopo de negócios
certNo	Código de crédito social uniforme / Licença comercial No.
regDate	Data de inscrição
capital	Registert Capital
address	Residência
expDate	Período comercial
represent	Representante legal
certType	Tipo de licença comercial: original, cópia
corpName	Nome comercial
corpType	Tipo de negócios
foundDate	Data do estabelecimento

2.2 Face-Verificação de identidade conectada (FinfaceAult)

Nome da interface: FinfaceAuth

Dependências de interface: nenhum (pode ser chamado usando qualquer versão de Phizclip sdk)

Parâmetros de solicitação

Name	Type	Default	Descrição
idNo	String		ID Numberr
name	String
imagePath	String		Caminho para o arquivo fotográfico

Resultados de retorno

Name	Type	Default	Descrição
errorCode	Int	0	Identificar resultado, 0 significa sucesso
Descrição	String		Descrição do resultado do reconhecimento
score	double	0-1	Similaridade

2.3 Testes in vivo (FinlivityCheck)

Interface: FinlivityCheck

Dependências de interface: nenhum (pode ser chamado usando qualquer versão de Phizclip sdk)

Parâmetros de solicitação

Name	Type	Default	Descrição
None

Resultados de retorno

Name	Type	Default	Descrição
resultType	String
Voltar para cancelar o teste ao vivo
faceImgStr	String		A detecção ao vivo retorna a imagem, como um byte
Array após base64. Apenas retornos bem -sucedidos

2.4 Abrindo os três-App Way (FinopeNotherap)

Nome da interface: FinopeNotheApp

Dependências de interface: nenhum (pode ser chamado usando qualquer versão de Phizclip sdk)

Parâmetros de solicitação

Name	Type	Default	Descrição
package	String		Nome do pacote de aplicativos, use pelo Android para determinar se O aplicativo está instalado, apenas Android pacote
url	String		Esquema do aplicativo Plus URL, Use pelo iOS para determinar se o aplicativo é instalado e salto; usado pelo Android para pular
downloadUrl	String		Download App Address
alertMsg	String		Baixe a mensagem da caixa de alerta, se não passar, Em seguida, pule para a página com caixa de alerta

2.5 dois-Autenticação de vídeo Way (FinopenWitnessVideo)

Nome da interface: finopenwitnesssvideo

Dependências de interface: nenhum (pode ser chamado usando qualquer versão de Phizclip sdk)

Parâmetros de solicitação

Name	Type	Default	Descrição
videoType	String		Tipo de serviço de vídeo
videoIp	String		IP do serviço de vídeo
videoPort	String		Porta de serviço de vídeo
loginName	String		Nome de login
loginPwd	String
roomId	String		roomid
roomName	String		room name
roomPwd	String		Senha da sala (opcional)
appId	String		anychat cluster appId

Resultados de retorno

Name	Type	Default	Descrição
videoFlag	String	non-empty	Bandeira de retorno 0, sucesso, 1, falha, 2, rejeitando
rejectReason	String		Razão de rejeição
message	String		Detalhes

2.6 Um-Maneira como gravação de vídeo Implementação de applet

Dependências de interface: este componente não depende de terceiros SDKs que não sejam o phizdclip sdk Uso de um-Componente de gravação do jeito do applet

1. Faça o download do pacote de código de exemplo de componente de gravação de vídeo recording demo v1.0.0 O código do componente está nos componentes no diário da raiz, ou você Pode abrir a demonstração de registro diretamente com a ferramenta IDE para ver o resultados
2. Insira o componente de gravação no arquivo json da página ou componente a ser usado

{
  "usingComponents" : {
  "video-recognition" :  "... /... /components/video-recognition/index" 
 }
}

3. Dentro do FXML de uma página ou componente, use o componente

<view style="width: 100vw;height: 100vh;">
  <video-recognition
    recordTime="{{recordTime}}"
    top="{{top}}"
    stepList="{{stepList}}"
    buttonStyle="{{buttonStyle}}"
    mask="../../assets/img_mask_person@3x.png"
    resolution="low"
    bind:onRecordReady="onRecordReady"
    bind:onRecordStart="onRecordStart"
    bind:onRecordEnd="onRecordEnd"
    bind:onRecordError="onRecordError"
  >
  </video-recognition>
</view>

::: tip Note
As dimensões de largura e altura precisam ser declaradas na camada externa
do componente de gravação e será exibido como largura: 100%; 100%;
Altura: 100% dentro do componente de gravação.
:::

4. Parâmetros de componentes de relance

| Name | Type | Required | Default | Remarks |
| ------------- | --------------- | -------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| resolution | String | No | medium | Resolution, optional values: low, medium, high Valid only at initialization,cannot be changed dynamically |
| mask | String | No | - | The path to the mask resource for the framing area, we recommend using the relative path to the resource within the applet, the https address will take time to load, the mask will be placed on the camera at a width 100% height 100% size, note that it matches the size of the component |
| recordTime | Number | No | 30000 | Recording time in milliseconds |
| top | Number | No | 20 | Unit rpx Distance from top for text tips, or modify wxss within the video-recognition component to customize the position of the text |
| stepList | Array\< Object\> | No | - | Configurar a voz e o arquivo rápido para cada etapa, o comprimento máximo suportado é 3, consulte o design após o formulário para a estrutura do elemento de dados|
| buttonStyle | Object | No | - | Controla o estilo do botão gravado, permite que você faça tempo bom a posidade do botão e, superior, inferior, direita, válida apenas na inicialização, não pode ser alterada dinamicamente|
| onRecordReady | EventHandler | No | - | Com a ligação no Recordream, alguns recursos assíncronos serão dobrados antes de prontos e desencadeados quando os recursos estiverem prontos, que podem ser usados ​​para morrer arminho se o componente registrado está pronto na página em que o componente é usado, de modo a controlar o carregamento e o componente mostrar|
| onRecordStart | EventHandler | No | - | Bind via Bind: OnRecordStart, acionado quando a gravação inicia|
| onRecordEnd | EventHandler | No | - | Bind via Bind: OnRecordend, desencadeado no final da gravação, Método de retorno de chamada parâmetros res, res.tempVideopath é o endereço de arquivo local do vídeo gravado|
| onRecordError | EventHandler | No | - | Bind via Bind: OnRecorderRor, acionado ao gravar um erro, parâmetro de retorno de chamada, res.errmsg é a mensagem de erro quando ocorre um erro|

 **stepList Parameter Description** 

Configure os arquivos de voz e solicitação para cada etapa, o máximo de suporte
Os elementos de dados são Structud ​​da seguinte maneira.
```json
{
  "audioSrc" :  "https://xxxxx.mp3" ,
  "showTime" : 0,
  "textList" : []
}

Audiosrc- Link de áudio, link https é recomendado, o componente Anexado vai baixar o recurso de áudio, se o mercado dobrado Executará um retorno de chamada de erro e relatará um erro de recurso

Note

O nome de domínio do MP3 deve ser adicionado à lista de permissões na lista Back -end da administração, caso contrário, o download falhará

altura de começar- Mostrar tempo para pistas de texto e áudio, em milissegundos, 0 para Show inicial, 2000 para 2s em gravação TextList- Dicas de texto, tipo de matriz O objeto de parâmetro da lista de texto é o seguinte.

{
  "text" : 'Please read aloud in Mandarin'
}

texto- Conteúdo de texto O estilo de texto pode ser simplesmente controlado adicionando largura|height|padding|margin|color|fontSize|fontWeight|textalign e Outros atributos de estilo.

{
  "text" : 'text',
  "color" : 'red',
  "fontWeight" : 'bold',
  "margin" : '0 20rpx'
}

Note

Um elemento filho da lista de texto que é exibido como uma única linha sem Quebras de linha e podem ser divididas em vários elementos filhos sob demanda

Alternativamente, se as palavras indivuais precisam ser destacadas com Linha única de conteúdo, o atributo de texto pode ser passado para uma matriz Com os atributos como os parâmetros do objeto acima, como segue.

{
  "text" : [{
  "text" : 'text'
 }, {
  "text" : 'Highlighted text',
  "color" : 'red',
  "fontWeight" : 'bold',
  "margin" : '0 20rpx'
 }, {
  "text" : 'text'
 }]
}

Steplist é válido apenas na inicialidade e não pode ser alterado dinamicamente Este componente é devido ao uso da sintaxe nativa do applet. Em Além dos parâmetros descritos na documentação, você também pode Modifique a lógica dentro do componente para conhecer diferente Necessidades de negócios.

3. Webrtc-APIs relacionadas

Para apoiar o usuário da funcionalidade WebRTC em Applets, o Phizdclip Applet SDK fornece webrtc-APIs relacionadas nativamente na biblioteca base. Para reduzir a contagem de migração de html5 para applets, mantivemos tanto do webrtc-APIs relacionadas como posse e o applet-Relacionado APIs são as seguintes.

Please note

Este recurso é base no Google WebRTC Library E você precisará Para confirmar que a biblioteca base e a versão SDK são suporte.

• Integração iOS SDK: Veja aqui
• Integração do Android SDK: Veja aqui

3.1 MediaDevice

pz.webrtc.mediaDevices.enumerateDevices() Obtenha informações sobre o hardware de áudio e vídeo disponível para o WebRTC E retorna um objeto de promessa após a execução. Promise return value

Properties	Type	Descrição
devicesList	Array	Array contendo objetos de informação do dispositivo
Example code

const devicesList = await pz. webrtc. mediaDevices. enumerateDevices()
// or
pz. webrtc. mediaDevices. enumerateDevices(). then(devicesList => {
 console. log(devicesList)
})

pz.webrtc.mediaDevices.getSupportedConstraints() Obtém as propriedades de restrição suportadas pelo dispositivo atual (por exemplo, Taxa de quadros, tamanho da janela) e retorna um objeto de promessa após a execução. Promise return value

Properties	Type	Descrição
info	Object	Um objeto que contém as propriedades do dispositivo atual
Example code

const info = await pz. webrtc. mediaDevices. getSupportedConstraints()
// or
pz. webrtc. mediaDevices. getSupportedConstraints(). then(info => {
 console.log(info)
})

MediaStream.getUserMedia(Object object) O usuário é solicitado a entrada formedia, que é executada e uma promessa O objeto é Returnet e a promessa finalmente retorna um objeto.

Note

No celular, GetUsermedia tem um limite de chamada, se a getusermedia receber um fluxo e o webrtc está conectado, chamando o envelhecimento da getusermedia pode jogar um Erro. ​​Está se voltando para evitar chamadas repetidas para a lógica para Fins comerciais.

ParametersObject object

Property	Type	Default	Required	Descrição
video	boolean		yes	Se deve obter o fluxo de vídeo
audio	boolean	yes	whether to get the audio stream

Promise return value

Properties	Type	Descrição
stream	Object
Applet, o fluxo aqui é um objeto de wrapper simples contendo apenas um
Método Streamd e GetTracks
Example code

const stream = await pz. webrtc. mediaDevices. getUserMedia({ audio: 
true, video: true })
// or
pz. webrtc. mediaDevices. mediaDevices(). then(stream => {
 console. log(stream)
 console. log(stream. streamId)
})

stream.streamId Corda Passe os fluxos para o componente webrtcvideo para reproduzir o fluxo, veja A documentação do componente webrtcvideo para obter detalhes. stream.getTracks() Recebe uma variedade de faixas para o fluxo, executa e devolva um Objeto de promessa, a promessa finalmente retorna uma variedade de faixas. Promise return value

Properties	Type	Descrição
tracks	Array	Obtenha a matriz de rastreamento do fluxo, geralmente contendo faixas de vídeo e faixas de áudio
Example code

const stream = await pz. webrtc. mediaDevices. getUserMedia({ audio: 
true, video: true })
const tracks = await stream. getTracks()
tracks. forEach((track) => {
 console.log(track)
})

track.stop() Fechar uma pista, que pode ser usada em cenários onde o fluxo está Parou. Example code

const stream = await pz. webrtc. mediaDevices. getUserMedia({ audio: 
true, video: true })
const tracks = await stream. getTracks()
tracks. forEach((track) => {
 track. stop()
})

3.2 RTCPeerConnection

pz.webrtc.createRTCPeerConnection(Object options) A instância de conexão RTC é criada, executada e devolvida como um Promessa, que finalmente retorna o objeto de instância. Object options Os parâmetros são passados ​​para o CreaterTCPeerConnection Parâmetros de opções específicas podem ser encontradas no WebRTC Standard DocumentaçãoExample code

const options = { iceServers: [{ urls: 
 "stun:stun.stunprotocol.org"  }] }
const pc = await pz. webrtc. createRTCPeerConnection(options)

RTCPeerConnection property Atualmente suportado RTCPeerConnection Properties

Properties	Descrição
canTrickleIceCandidates
conectionState
CurrentLocaldScript
CurrentRemotescript
IceConnectionState
IcepatheringState
LocalDescript
Peeridade
RemoteteScript
SignalingState
Example code

const options = { iceServers: [{ urls: 
 "stun:stun.stunprotocol.org"  }] }
const pc = await pz. webrtc. createRTCPeerConnection(options)
console. log(pc. canTrickleIceCandidates)
console. log(pc. currentLocalDescription)
console. log(pc. currentRemoteDescription)
console. log(pc. peerIdentity)

RTCPeerConnection Event Listening Atualmente suportado RTCPeerConnection Events

property	event	Descrição
icecandidate	{ candidate: { ... }}	Retornar informações de gelo quando acionadas, contendo apenas dados de campo candidatos
iceconnectionstatechange	{ iceConnectionState, timeStamp }
negotiationneeded
signalingstatechange	{ signalingState }
track	{ streams }	O objeto de riachos do item da matriz é um objeto que contém um fluxo
Example code

const options = { iceServers: [{ urls: 
 "stun:stun.stunprotocol.org"  }] }
const pc = await pz. webrtc. createRTCPeerConnection(options)
pc. addEventListener('icecandidate', event => {
 console. log(event. candidate)
 console. log(event. candidate. address)
 console. log(event. candidate. type)
 console. log(event. candidate. sdpMLineIndex)
 console. log(event. candidate. sdpMid)
})
pc. addEventListener('iceconnectionstatechange', event => {
 console. log(event. iceConnectionState)
})
pc. addEventListener('negotiationneeded', event => {
 console. log(event)
})
pc. addEventListener('signalingstatechange', event => {
 console. log(event)
})
pc. addEventListener('track', event => {
 console. log(event. streams)
 // Pass the streamId to the webrtcVideo component to play the stream, 
see the webrtcVideo component documentation for details.
 this. setData({
 remoteStreamId: e. streams[0]. streamId
 })
})

RTCPeerConnection.createOffer(Object object)

Uma oferta SDP é criada, executada e um objeto de promessa é Returnet, e A promessa final retorna um objeto de oferta. ParametersObject object

Property	Type	Default	Required	Descrição
iceRestart	boolean	false	no
offerToReceiveAudio	boolean	false	no
offerToReceiveAudio	boolean	false	no
voiceActivityDetection	boolean	true	no

Promise return value

Properties	Type	Descrição
offer	Object	Um objeto que contém o SDP e o tipo arquivados
Example code

const pc = await pz. webrtc. createRTCPeerConnection(options)
const offer = await pc. createOffer({
 offerToReceiveAudio: true,
 offerToReceiveVideo: true
})
await pc. setLocalDescription(offer)

RTCPeerConnection.createAnswer(Object object) Crie uma resposta SDP, execute -a e devolva um objeto de promessa, que Eventualmente retornará um objeto de resposta. ParametersObject object

Property	Type	Default	Required	Descrição
iceRestart	boolean	false	no
offerToReceiveAudio	boolean	false	no
offerToReceiveAudio	boolean	false	no
voiceActivityDetection	boolean	true	no

Promise return value

Properties	Type	Descrição
answer	Object	Um objeto com dois campos, SDP e tipo
Example code

const pc = await pz. webrtc. createRTCPeerConnection(options)
const answer = await pc. createAnswer({
 offerToReceiveAudio: true,
 offerToReceiveVideo: true
})

RTCPeerConnection.setLocalDescription(Object object) Configure a oferta/resposta e retorne uma promessa após a execução. ParametersObject object Passar na oferta ou resposta que foi obtida Example code

const pc = await pz. webrtc. createRTCPeerConnection(options)
const offer = await pc. createOffer({
 offerToReceiveAudio: true,
 offerToReceiveVideo: true
})
await pc. setLocalDescription(offer)

RTCPeerConnection.setRemoteDescription(Object object) Configure a oferta/resposta e retorne uma promessa após a execução. ParametersObject object Passar na oferta ou resposta que foi obtida Example code

const pc = await pz. webrtc. createRTCPeerConnection(options)
// Pseudo code, offer is sent from remote
const offer = getFromRemote()
await pc. setRemoteDescription(offer)
const answer = await pc. createAnswer({
 offerToReceiveAudio: true,
 offerToReceiveVideo: true
})
await pc. setLocalDescription(answer)

RTCPeerConnection.addIceCandidate(Object object) Adicionar candidato à conexão ParametersObject object O objeto candidato deve ser aprovado como um parâmetro, isto é, o Objeto candidato obtido pelo evento Icecandidate Alguns atributos podem variar um pouco de uma extremidade para outra, dependendo de O valor real é obtido Example code

// Pseudo-code
// A-side
const pcA = await pz. webrtc. createRTCPeerConnection(options)
pcA. addEventListener('icecandidate', event => {
 // Send to B side
 sendToB(event. candidate)
})
// B-side
const pcB = await pz. webrtc. createRTCPeerConnection(options)
const candidate = await getFromA()
await pcB. addIceCandidate(candidate)

RTCPeerConnection.getConfiguration() Recebe a configuração da conexão e retorna uma promessa depois Execução. Example code

const pc = await pz. webrtc. createRTCPeerConnection(servers, 
mediaConstraints)
const configuration = await pc. getConfiguration()

RTCPeerConnection.addTrack(Object object) Adicione a faixa à conexão atual, observando que a interface é Assíncrono. ParametersObject object O objeto de faixa deve ser passado como um argumento, a faixa é o Fluxo obtido da getUsermedia via getTracks. Example code

const stream = await pz. webrtc. mediaDevices. getUserMedia({ audio: 
true, video: true })
const pc = await pz. webrtc. createRTCPeerConnection(servers, 
mediaConstraints)
const tracks = await stream. getTracks()
tracks. forEach(t => {
 pc. addTrack(t)
})

RTCPeerConnection.close()

Feche a conexão Example code

const pc = await pz. webrtc. createRTCPeerConnection(servers, 
mediaConstraints)
pc. close()

3.3 Componentes relacionados ao WebRTC

WebRTC Video component Componentes para reproduzir fluxos de mídia WebRTC Properties

Property	Type	Default	Required	Descrição
src	string		No	Deve estar no formato webrtc: // , o streamid pode ser recuperado através da getusermedia ou eventos de faixa de conexão
muted	boolean	false	no	Vídeo se deve mudo

Example code

<webrtc-video muted src="webrtc://{{localStreamId}}"></webrtc-video>

<webrtc-video src="webrtc://{{remoteStreamId}}"></webrtc-video>

// getUserMedia gets the local stream
const stream = await pz. webrtc. mediaDevices. getUserMedia({ audio: 
true, video: true })
const { streamId } = stream
this. setData({
 localStreamId: streamId
})
// webrtc connection track event to get the remote video stream
const pc = await pz. webrtc. createRTCPeerConnection()
pc. addEventListener('track', event => {
 const { streams } = event
 this. setData({
 remoteStreamId: streams[0]. streamId
 })
})

WebRTC Audio component O componente usado para reproduzir fluxos de mídia webrtc difere do WebRTC O vídeo nesse somente áudio será reproduzido. Properties

Property	Type	Default	Required	Descrição
src	string		No	Deve estar no formato webrtc: // , o streamid pode ser recuperado através da getusermedia ou eventos de faixa de conexão

Example code

<webrtc-audio src="webrtc://{{localStreamId}}"></webrtc-audio>

<webrtc-audio src="webrtc://{{remoteStreamId}}"></webrtc-audio>

// getUserMedia gets the local stream
const stream = await pz. webrtc. mediaDevices. getUserMedia({ audio: 
true })
const { streamId } = stream
this. setData({
 localStreamId: streamId
})
// webrtc connection track event to get the remote video stream
const pc = await pz. webrtc. createRTCPeerConnection()
pc. addEventListener('track', event => {
 const { streams } = event
 this. setData({
 remoteStreamId: streams[0]. streamId
 })
})