Twilio와 Python을 사용하여 브라우저에서 전화를 걸다

Python을 사용하여 브라우저에서 전화를 걸다
Twilio은 개발자에게 문자메시지, 음성통화, 동영상 등 앱을 모바일 및 웹 앱에 구축하는 API를 제공한다.
Anvil, Twilio's Voice API 및 Client SDK을 사용하여 브라우저에서 전화하는 방법을 보여 드리겠습니다.
이것은 Anvil이기 때문에 우리는 파이톤으로 이 모든 것을 완성할 수 있다.브라우저의 실시간 음성 통화를 포함하여 front-end in Python을 구축할 것입니다. 자바스크립트가 필요하지 않습니다.그리고 우리는 hosted Python back end을 작성하여 호출을 제어하고 웹에서 사용할 수 있도록 할 것입니다. DevOps나 서버 설정이 필요하지 않습니다.
다음은 우리가 그것을 어떻게 구축할 것인가이다.

우선 Anvil 애플리케이션을 만들고 Twilio 전화 번호를 설정합니다.

HTTP 엔드포인트를 설정하여 호출을 안내합니다.

그리고 우리는 [Twilio 클라이언트 SDK를 설정하여 이 노드와 대화할 수 있습니다.

마지막으로 어플리케이션 전면에 몇 개의 버튼을 추가하고 브라우저를 통해 전화를 걸 예정입니다.

1. 새 Anvil 응용 프로그램 만들기
먼저 비어 있는 Anvil 애플리케이션을 만들어야 합니다.


2. Twilio 등록
다음은 Twilio에 등록하고 Twilio 전화번호를 구매해야 합니다.이 무료 시용 계좌가 생기면 트와이리오가 15달러의 신용카드를 줄 것이기 때문에 신용카드를 먼저 추가하거나 비용을 지불할 필요가 없다.
twilio.com으로 이동하여 계정을 만듭니다.계정이 있으면 콘솔에서 "Buy a Number" on the Phone Numbers dashboard으로 이동합니다.음성 기능이 있는 번호를 검색한 다음 '구매' 를 누르면 계정에 추가할 수 있습니다.

다음은 home page of the console에서 확인할 수 있는 계정 SID와 인증 토큰이 필요합니다.Anvil 애플리케이션의 App Secret에 각각 저장할 수 있습니다.이렇게 하면, Google의AccountSid와Auth 영패는 암호화되어 Google 프로그램에 저장됩니다.

이제 API 키를 만들어야 합니다.콘솔 사이드바 설정 아래의 API 키로 이동합니다.새 API 키를 추가하면 API SID와 비밀 정보를 제공합니다.이 두 값을 예전처럼 응용 프로그램 기밀에 저장합니다.


3. HTTP 끝점 추가
다음 단계는 브라우저 코드가 연결될 때 Twilio가 무엇을 해야 하는지 지정하는 것입니다.Twilio는 Google 브라우저를 가상 휴대전화로 간주합니다. Twilio의 클라이언트 SDK에서 connect()으로 전화를 걸면 Twilio는 Google 프로그램에 HTTP 요청을 보내고 응답을 사용하여 통화를 유도합니다.
우리는 Twilio의 표기 언어인 TwiML으로 명령을 되돌려받을 것입니다.TwiML에는 many actions을 사용할 수 있습니다.예를 들어, 우리는 <Say> 을 사용하여 브라우저에서 재생될 정보를 읽거나, <Play> 을 사용하여 녹음된 정보를 재생할 수 있다.우리는 더욱 상호작용성을 가지게 될 것이다. 우리는 <Dial> 을 사용할 것이다. 이것은 컴퓨터의 오디오가 휴대전화로 전송될 것이고, 반대로도 마찬가지다.
Anvil 응용 프로그램에서 서버 모듈을 추가하고 HTTP 엔드포인트 함수를 작성합니다.이 기능은 TwiML에서 Twilio에게 다음 번호로 전화하라고 알립니다.

@anvil.server.http_endpoint("/call-connected")
def get_twiml(**kwargs):
  resp = anvil.server.HttpResponse()
  resp.headers["Content-Type"] = "text/xml"
  # callerId should be your Twilio phone number
  resp.body = "<Response><Dial callerId='+1000000000'>+1555555555</Dial></Response>"
  return resp

이제 엔드포인트가 설정되었으므로 Twilio에게 이 URL에 요청을 보내라고 알려야 합니다.끝점은 https://<my-anvil-app-url>/_/api/call-connected에 있습니다.(Gear 메뉴의 "게시"에서 Anvil 프로그램의 URL을 찾을 수 있습니다. 만약 프로그램이 개인 URL 아래에서 발표된다면 서버 모듈 밑에 있는 메시지를 보십시오. 정확한 단점 URL을 가져오십시오.)
Twilio 콘솔에 돌아가서 TwiML apps을 열고 우리가 방금 설정한 URL로 새 앱을 추가합니다.이 애플리케이션의 ID, 애플리케이션 SID가 필요합니다.

어플리케이션 SID를 복제하고 application_sid이라는 이름의 어플리케이션 기밀로 저장합니다.

4. Twilio 클라이언트 SDK 설정
이제 Twilio 클라이언트 SDK를 추가하고 브라우저에서 음성 통화를 할 것입니다.먼저 SDK를 가져와야 합니다.그리고 우리는 그것을 우리가 새로 만든 TwiML 프로그램에 연결하는 것으로 설정해야 한다.

SDK 가져오기
먼저 Twilio JavaScript SDK를 응용 프로그램으로 가져옵니다.비록 우리가 사용하는 것은 JS SDK이지만, 걱정하지 마세요. 우리는 여전히 파이톤으로 모든 일을 완성할 것입니다.Anvil 응용 프로그램에서 다음 코드를 응용 프로그램에 붙여넣어 SDK를 응용 프로그램에 추가합니다.

<script type="text/javascript" src="https://media.twiliocdn.com/sdk/js/client/v1.13/twilio.min.js"></script>

연결 구성
클라이언트 SDK를 TwiML 프로그램에 연결하기 위해 설정하려고 합니다.이를 위해 서버의 Twilio API 키를 사용하는 시간제한 암호화 서명 토큰을 만들고 클라이언트 SDK에 전달합니다.클라이언트가 Twilio에 연결될 때, Twilio는 영패가 진실이고, 우리 프로그램에 대응하는 것을 볼 수 있으며, Twilio는 HTTP 노드를 호출해서 호출을 유도할 것입니다.
우리는 this page의 '음성' 예시에 따라 방문 영패를 생성하고 되돌려 주는 함수를 작성할 것이다.그리고 페이지를 불러올 때 호출하고 Twilio 클라이언트 SDK를 초기화합니다.
서버 모듈에서 먼저 다음 가져오기 문을 추가해야 합니다.

from twilio.jwt.access_token import AccessToken
from twilio.jwt.access_token.grants import VoiceGrant

다음은 함수의 주요 부분이다.App Secrets에 저장된 필수 토큰과 SID를 로드한 다음 TwiML 애플리케이션에 대한 음성 액세스 토큰을 생성합니다.

@anvil.server.callable
def get_access_token():
  # required for all twilio access tokens
  account_sid = anvil.secrets.get_secret('account_sid')
  api_key = anvil.secrets.get_secret('api_sid')
  api_secret = anvil.secrets.get_secret('api_secret')

  # required for Voice grant
  outgoing_application_sid = anvil.secrets.get_secret('application_sid')
  identity = 'user'

  # Create access token with credentials
  token = AccessToken(account_sid, api_key, api_secret, identity=identity)

  # Create a Voice grant and add to token
  voice_grant = VoiceGrant(
      outgoing_application_sid=outgoing_application_sid
  )
  token.add_grant(voice_grant)

  return token.to_jwt()

함수에 @anvil.server.callable 장식기를 추가했습니다. 이것은 클라이언트가 이 함수를 호출해서 생성된 영패를 되돌릴 수 있음을 의미합니다.
이제 브라우저에서 코드를 작성합시다. 그러면 우리가 진정으로 전화를 할 수 있습니다.

5. 브라우저에서 호출 설정
우선, 우리 프로그램에 빠른 전단을 추가합시다.App Designer에서 우리는 두 개의 단추를 창에 끌어다 놓았는데, 하나는 전화를 걸기 위한 것이고, 다른 하나는 전화를 끊기 위한 것이다.Properties 패널에서 visible 속성에서 호출을 끊는 단추를 선택하지 마십시오. 호출이 시작되기 전에 표시하지 않기를 원하지 않습니다.속성 패널 아래쪽으로 스크롤하여 각 버튼에 대해 클릭 이벤트를 만듭니다.

이제 폼의 코드 보기로 전환하고 자바스크립트에서 Twilio 대상을 가져옵니다. (예, import JS libraries from Python)코드 상단에 다음을 추가합니다.from anvil.js.window import Twilio현재, 폼을 불러올 때 (__init__ 방법 중) 방문 영패를 받을 것입니다.

  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    # Add this line:
    self.token = anvil.server.call("get_access_token")

접속 영패가 있으면 우리는 현재 Twilio Device 을 만들 수 있는데 이것은 기본적으로 가상 휴대전화이다.그리고 우리는 그것을 사용하여 Connection 을 만들 것입니다. 이것은 브라우저에서 호출된 대상을 나타냅니다.
이러한 모든 작업은 버튼을 클릭할 때 수행되기를 원하므로 call_button_click 함수에서 수행됩니다.

    def call_button_click(self, **event_args):
      """This method is called when the button is clicked"""
      self.device = Twilio.Device() #initialize the Device
      self.device.setup(self.token) 
      #when the device is ready, we can connect
      self.device.on("ready", self.make_connection)

      #make the hang_up_button visible during a call
      #and the call_button not
      self.hang_up_button.visible = True
      self.call_button.visible = False

  def make_connection(self, ready):
    connection = self.device.connect()

Connection이 성공적으로 설치되기 전에는 Device을 제작할 수 없습니다.그래서 우리는 Device.on("ready")사건이 발생한 후에 self.device.connect()을 호출해야 한다.
만약 네가 이렇게 하지 않는다면, 너의 위험은 intermittent call failures이다.Twilio의 문서에는 이 점에 대한 상세한 설명이 없지만 Device.on("ready") here의 참고 자료를 찾을 수 있습니다.
마지막으로 우리는 전화를 끊을 수 있기를 바란다.우리는 설비의 disconnectAll() method으로 전화를 걸어 통화를 끊을 수 있다.사용자가 [끊기] 버튼을 클릭할 때 다음을 수행합니다.

  def hang_up_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.device.disconnectAll()
    self.call_button.visible = True
    self.hang_up_button.visible = False

시험해 보다
그게 다야.call_button을 클릭하여 브라우저에서 전화하세요!
소스 코드를 보려면 클론 애플리케이션 here 을 클릭하십시오.

이렇게!
우리는 Twilio의 음성 API를 사용하여 브라우저에서 전화를 걸 수 있는 웹 응용 프로그램을 방금 개발했다. 우리는 Python과 몇 줄의 코드만 필요로 한다

모루
Anvil은 파이톤만 사용하여 전체 웹 응용 프로그램을 구축하는 플랫폼이다.JS, HTML, CSS, 파이톤, SQL, 그리고 모든 프레임워크와 싸울 필요가 없다. 파이톤에서 모든 프레임워크를 구축하기만 하면 된다.