← Back to list

SoftPhone em Flutter — SIP over WebSocket

No mundo moderno, a comunicação por voz e vídeo se tornou essencial, e os softphones desempenham um papel fundamental nesse cenário. Neste…

Luigi Gontijo · 2023-06-19 13:51 · 3 claps · 3.8 min read
#softphone #flutter #jssip #software-architecture #issabel
Open on Medium ↗
Wiki topics: 📱 · Mobile Development 🔒 · Cybersecurity 🏛️ · Architecture

SoftPhone em Flutter — SIP over WebSocket

No mundo moderno, a comunicação por voz e vídeo se tornou essencial, e os softphones desempenham um papel fundamental nesse cenário. Neste artigo, vamos explorar o desenvolvimento de um softphone utilizando a poderosa estrutura de desenvolvimento de aplicativos multiplataforma, o Flutter, juntamente com o protocolo SIP (Session Initiation Protocol).

Visão geral do projeto:

Um softphone é um software que permite realizar chamadas de voz e vídeo por meio da Internet, eliminando a necessidade de dispositivos físicos. No nosso projeto, focaremos em criar um softphone utilizando o Flutter, uma escolha excelente devido à sua capacidade de criar aplicativos de alta qualidade para Android e iOS.

Nossa arquitetura de projeto será baseada em componentes principais, como a interface do usuário, a lógica de negócios e a comunicação com o servidor SIP. Essa divisão garantirá uma estrutura organizada e modular, facilitando o desenvolvimento e a manutenção do aplicativo.

Preparando o ambiente de desenvolvimento:

Antes de iniciar o desenvolvimento, precisamos configurar nosso ambiente de desenvolvimento Flutter. Faremos a instalação do Flutter SDK e configuraremos nosso editor de código preferido, como o Android Studio, para desenvolver o aplicativo. Também é importante garantir que todas as dependências necessárias, como o Dart SDK e as bibliotecas do Flutter, estejam instaladas corretamente.

Arquitetura Utilizada no Projeto

No desenvolvimento do softphone utilizando Flutter e o protocolo SIP, adotamos uma arquitetura que permite a comunicação entre diferentes componentes do sistema. A arquitetura é composta pelos seguintes elementos:

  1. Servidor Issabel: O servidor Issabel é responsável por gerenciar a infraestrutura de telefonia e comunicação SIP. Ele se comunica com os dispositivos SIP por meio do protocolo SIP/UDP.
  2. ̶S̶e̶r̶v̶i̶ç̶o̶ ̶J̶s̶S̶I̶P̶:̶ ̶P̶a̶r̶a̶ ̶p̶e̶r̶m̶i̶t̶i̶r̶ ̶a̶ ̶c̶o̶m̶u̶n̶i̶c̶a̶ç̶ã̶o̶ ̶e̶n̶t̶r̶e̶ ̶o̶ ̶s̶e̶r̶v̶i̶d̶o̶r̶ ̶I̶s̶s̶a̶b̶e̶l̶ ̶e̶ ̶o̶ ̶a̶p̶l̶i̶c̶a̶t̶i̶v̶o̶ ̶F̶l̶u̶t̶t̶e̶r̶,̶ ̶u̶t̶i̶l̶i̶z̶a̶m̶o̶s̶ ̶u̶m̶ ̶s̶e̶r̶v̶i̶ç̶o̶ ̶c̶h̶a̶m̶a̶d̶o̶ ̶J̶s̶S̶I̶P̶.̶ ̶O̶ ̶J̶s̶S̶I̶P̶ ̶é̶ ̶u̶m̶a̶ ̶b̶i̶b̶l̶i̶o̶t̶e̶c̶a̶ ̶e̶m̶ ̶J̶a̶v̶a̶S̶c̶r̶i̶p̶t̶ ̶q̶u̶e̶ ̶c̶o̶n̶v̶e̶r̶t̶e̶ ̶a̶s̶ ̶c̶h̶a̶m̶a̶d̶a̶s̶ ̶S̶I̶P̶/̶U̶D̶P̶ ̶p̶a̶r̶a̶ ̶W̶e̶b̶S̶o̶c̶k̶e̶t̶,̶ ̶p̶e̶r̶m̶i̶t̶i̶n̶d̶o̶ ̶a̶ ̶c̶o̶m̶u̶n̶i̶c̶a̶ç̶ã̶o̶ ̶b̶i̶d̶i̶r̶e̶c̶i̶o̶n̶a̶l̶ ̶e̶n̶t̶r̶e̶ ̶o̶ ̶s̶e̶r̶v̶i̶d̶o̶r̶ ̶e̶ ̶o̶ ̶c̶l̶i̶e̶n̶t̶e̶ ̶u̶s̶a̶n̶d̶o̶ ̶o̶ ̶p̶r̶o̶t̶o̶c̶o̶l̶o̶ ̶W̶e̶b̶S̶o̶c̶k̶e̶t̶.̶(Abstração Removida)(Edit)
  3. Aplicativo Flutter: O aplicativo Flutter é desenvolvido utilizando a estrutura de desenvolvimento de aplicativos multiplataforma do Flutter. Ele é responsável por fornecer a interface do usuário do softphone e por gerenciar as chamadas SIP.
  4. Pacote sip_ua: No aplicativo Flutter, utilizamos o pacote sip_ua para lidar com a comunicação SIP. O **sip_ua** é uma biblioteca do Flutter que fornece recursos essenciais para estabelecer e gerenciar chamadas SIP, como autenticação, estabelecimento de chamadas, manipulação de eventos de chamada e gerenciamento de registros de chamadas.

A comunicação entre o servidor Issabel, o serviço JsSIP e o pacote sip_ua é estabelecida da seguinte maneira:

  1. O servidor Issabel envia mensagens SIP/UDP para o serviço JsSIP.
  2. ̶O̶ ̶s̶e̶r̶v̶i̶ç̶o̶ ̶J̶s̶S̶I̶P̶ ̶c̶o̶n̶v̶e̶r̶t̶e̶ ̶a̶s̶ ̶m̶e̶n̶s̶a̶g̶e̶n̶s̶ ̶S̶I̶P̶/̶U̶D̶P̶ ̶e̶m̶ ̶m̶e̶n̶s̶a̶g̶e̶n̶s̶ ̶W̶e̶b̶S̶o̶c̶k̶e̶t̶ ̶e̶ ̶e̶n̶v̶i̶a̶ ̶p̶a̶r̶a̶ ̶o̶ ̶p̶a̶c̶o̶t̶e̶ ̶s̶i̶p̶_̶u̶a̶ ̶d̶o̶ ̶a̶p̶l̶i̶c̶a̶t̶i̶v̶o̶ ̶F̶l̶u̶t̶t̶e̶r̶.̶ (Abstração Removida)(Edit)
  3. O pacote sip_ua recebe as mensagens WebSocket e as processa, estabelecendo e gerenciando as chamadas SIP no aplicativo Flutter.

Essa arquitetura baseada em stream permite a transmissão contínua de dados entre os diferentes componentes do sistema, proporcionando uma experiência de chamada suave e confiável para os usuários do softphone desenvolvido com Flutter.

Interface do usuário:

Exemplo da View — Flutter

Exemplo da View — Flutter

Criamos uma interface do usuário intuitiva e responsiva, permitindo ao usuário fazer chamadas, receber chamadas, gerenciar contatos, visualizar registros de chamadas e ajustar configurações. Utilizamos recursos de design e layout do Flutter e seguimos o padrão de UI do iPhone para fornecer uma experiência de usuário agradável e eficiente.

Testes e depuração:

Após a conclusão da implementação, é crucial realizar testes abrangentes e depuração para garantir que o softphone esteja funcionando corretamente em diferentes cenários. Vamos explorar estratégias de teste, incluindo testes unitários, testes de integração e testes de usabilidade. Também abordaremos técnicas de depuração para identificar e corrigir problemas comuns encontrados durante o desenvolvimento.

## Atualização 0.1.0

Removida abstração de camada desnecessária Jssip

Configuração necessária no Issabel — Asterisk:

1. Defina um IP Estático

2. Clique em PBX > Ferramentas > Editor de Arquivos do Asterisk

3. procure pelo arquivo http_custom.conf

**4. Defina seu IP

bindaddr=[SEU IP ESTÁTICO]
bindport=8089

4.1 Configure o Issabel para receber chamadas rtcp_mux**

5. Salve e reinicie o Issabel

Conclusão: Ao longo deste artigo, detalhamos o desenvolvimento de um softphone utilizando Flutter e o protocolo SIP sobre WebSocket. Apresentamos a arquitetura utilizada, a implementação do protocolo SIP, a interface do usuário, a integração com serviços de terceiros, os testes e a depuração. Esperamos que essas informações inspirem outros desenvolvedores a explorar a criação de softphones modernos e a aproveitar os benefícios do Flutter e do protocolo SIP. Continue acompanhando o projeto em andamento para obter mais atualizações e melhorias.

Código Fonte:

O código-fonte completo do projeto está disponível em dois repositórios no GitHub:

  1. Repositório do WebSocketUDP: ̶ E̶s̶t̶e̶ ̶r̶e̶p̶o̶s̶i̶t̶ó̶r̶i̶o̶ ̶c̶o̶n̶t̶é̶m̶ ̶o̶ ̶c̶ó̶d̶i̶g̶o̶-̶f̶o̶n̶t̶e̶ ̶d̶o̶ ̶s̶e̶r̶v̶i̶ç̶o̶ ̶J̶s̶S̶I̶P̶,̶ ̶r̶e̶s̶p̶o̶n̶s̶á̶v̶e̶l̶ ̶p̶o̶r̶ ̶c̶o̶n̶v̶e̶r̶t̶e̶r̶ ̶a̶s̶ ̶c̶h̶a̶m̶a̶d̶a̶s̶ ̶S̶I̶P̶/̶U̶D̶P̶ ̶e̶m̶ ̶W̶e̶b̶S̶o̶c̶k̶e̶t̶ ̶p̶a̶r̶a̶ ̶p̶e̶r̶m̶i̶t̶i̶r̶ ̶a̶ ̶c̶o̶m̶u̶n̶i̶c̶a̶ç̶ã̶o̶ ̶c̶o̶m̶ ̶o̶ ̶a̶p̶l̶i̶c̶a̶t̶i̶v̶o̶ ̶F̶l̶u̶t̶t̶e̶r̶.̶
  2. Repositório do SoftPhone: Este repositório contém o código-fonte do aplicativo Flutter, incluindo a interface do usuário, a lógica de negócios e a comunicação com o servidor Issabel por meio do serviço JsSIP.

Certifique-se de conferir os respectivos arquivos README em cada repositório, que fornecem informações detalhadas sobre a configuração do ambiente de desenvolvimento, a arquitetura do projeto, a implementação do protocolo SIP, a interface do usuário, a integração com serviços de terceiros, os testes e a depuração. Esses READMEs são excelentes fontes de referência para entender melhor o projeto e iniciar o desenvolvimento.

Texto gerado com auxílio do GPT

Luigi Gontijo — 2023


메타데이터
post_id
c976e7a93eb2
slug
softphone-em-flutter-sip-over-websocket-c976e7a93eb2
url
https://medium.com/@luigi.gontijo/softphone-em-flutter-sip-over-websocket-c976e7a93eb2
canonical_url
https://medium.com/@luigi.gontijo/softphone-em-flutter-sip-over-websocket-c976e7a93eb2
author_url
https://medium.com/@luigi.gontijo
status
ok
fetched_at
2026-07-25 15:44:25