使用Blazor调用Twilio语音API

问题描述

我正在使用blazor服务器进行项目,并且正在尝试使用Twilio进行语音通话。

我从twilio在线关注了这封信,但收到此错误:

System.Net.Http.HttpRequestException: Response status code does not indicate success: 404 (Not Found).
   at System.Net.Http.HttpResponseMessage.EnsureSuccessStatusCode()
   at QUBeMyGuest.Pages.GuestArrivals.EmergencyContact.GetClientToken() in C:\Pages\GuestArrivals\EmergencyContact.razor:line 98
   at QUBeMyGuest.Pages.GuestArrivals.EmergencyContact.OnAfterRenderAsync(Boolean firstRender) in C:\Users\\Pages\GuestArrivals\EmergencyContact.razor:line 58
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

文档指出,我应该在解决方案中打开一个新的asp.net核心api项目,并将该类添加到controller文件夹:

using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Twilio.Jwt;
using Twilio.Jwt.Client;
using Twilio.TwiML;
using Twilio.Types;
using System.Net.Http;

namespace api.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TwilioBackEndController : ControllerBase
    {
        public readonly string AccountSid = "xxxxxxxxxx";
        public readonly string AuthToken = "xxxxxxxx";
        public readonly string AppSid = "xxxxxxxx";
        public readonly string PhoneNumber = "xxxxxxxx";

        [HttpGet("token")]
        public async Task<IActionResult> GetToken()
        {
            var scopes = new HashSet<IScope>
            {
                new OutgoingClientScope(AppSid),new IncomingClientScope("tester")
            };

            var capability = new ClientCapability(AccountSid,AuthToken,scopes: scopes);
            return await Task.FromResult(Content(capability.ToJwt(),"application/jwt"));
        }

        [HttpPost("voice")]
        public async Task<IActionResult> PostVoiceRequest([FromForm] string phone)
        {
            var destination = !phone.StartsWith('+') ? $"+{phone}" : phone;

            var response = new VoiceResponse();
            var dial = new Twilio.TwiML.Voice.Dial
            {
                CallerId = PhoneNumber
            };
            dial.Number(new PhoneNumber(destination));

            response.Append(dial);

            return await Task.FromResult(Content(response.ToString(),"application/xml"));
        }
    }
}

然后我将页面设置为使用blazor项目拨打电话

@page "/guest/emergencycall"
@using System.ComponentModel.DataAnnotations
@inject HttpClient httpClient
@using Microsoft.Extensions.DependencyInjection
@using System.Net.Http


<EditForm Model="Input" OnValidSubmit="InitiatePhoneCall">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label for="phoneNumber">Enter Phone Number:</label>
        <InputText id="phoneNumber" @bind-Value="Input.PhoneNumber"></InputText>
        <button type="submit" class="btn btn-primary" disabled="@IsDialDisabled">DIAL</button>
        <button type="button" id="endBtn" class="btn btn-primary" disabled="@IsEndDisabled" @onclick="EndPhoneCall">END</button>
        <button type="button" id="clearBtn" class="btn btn-primary" disabled="@IsClearDisabled" @onclick="ClearPhoneNumber">CLEAR</button>
    </p>
</EditForm>

<hr />

@if (Logs.Count == 0)
{
    <p>No Logs available yet</p>
}
else
{
    <ul>
        @foreach (var log in Logs)
        {

            <li>@log</li>
        }
    </ul>
}

@code {
    private string _tokenUrl = "https://xxxxxxxxxxxxxxx";
    private bool appSetupRun = false;

    protected bool IsDialDisabled { get; set; } = false;
    protected bool IsEndDisabled { get { return !IsDialDisabled; } }

    protected bool IsClearDisabled { get { return string.IsNullOrEmpty(Input.PhoneNumber); } }
    protected List<string> Logs { get; set; } = new List<string>();

    protected InputModel Input { get; set; } = new InputModel();
    [Inject]
    protected IJSRuntime JSRuntime { get; set; }
    [Inject]
    protected IHttpClientFactory HttpClientFactory { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !appSetupRun)
        {
            var token = await GetClientToken();
            await JSRuntime.InvokeVoidAsync("appFunctions.setup",token);
            appSetupRun = true;
        }
    }

    protected async Task InitiatePhoneCall()
    {
        IsDialDisabled = true;
        await LogMessage($"Calling the number {Input.PhoneNumber}");
        await JSRuntime.InvokeVoidAsync("appFunctions.placeCall",Input.PhoneNumber);
        await LogMessage($"Called the number {Input.PhoneNumber}");
        StateHasChanged();
    }

    protected async Task EndPhoneCall()
    {
        IsDialDisabled = false;
        await LogMessage($"Ending the call to {Input.PhoneNumber}");
        await JSRuntime.InvokeVoidAsync("appFunctions.endCall");
        await LogMessage($"Ended the call to {Input.PhoneNumber}");
        StateHasChanged();

    }

    protected async Task ClearPhoneNumber()
    {
        await LogMessage("Clearing the phone number entry");
        Input.PhoneNumber = string.Empty;
        await LogMessage("Cleared the phone number entry");
        StateHasChanged();
    }

    private async Task<string> GetClientToken()
    {
        var uri = new Uri(_tokenUrl);

        using var client = HttpClientFactory.CreateClient();
        var response = await client.GetAsync(uri);

        response.EnsureSuccessStatusCode();
        return await response.Content.ReadAsStringAsync();
    }

    [JSInvokable]
    public async Task LogMessage(string message)
    {
        Logs.Add($"{DateTimeOffset.Now} - {message}");
        await Task.CompletedTask;
    }

    public class InputModel
    {
        [Required]
        [Phone(ErrorMessage = "Please enter your phone number in a proper format")]
        public string PhoneNumber { get; set; }
    }
}

,然后添加此JS函数:

window.appFunctions = {
    setup: function (token) {
        console.log('Getting connected');

        // Setup Twilio Device
        Twilio.Device.setup(token);

        Twilio.Device.ready(() => {
            console.log('We are connected and ready to do the thing');
        });

        Twilio.Device.error((err) => {
            console.error('This should not have been reached. We need to do something here');
            console.error(err);
        });
    },placeCall: function (destination) {
        console.log(`Calling ${destination}`);
        Twilio.Device.connect({ phone: destination });
        console.log(`Successfully called ${destination}`);
    },endCall: function () {
        console.log('Ending the call');
        Twilio.Device.disconnectAll();
        console.log('Successfully ended the call');
    }
};

然后在我的启动文件中添加了它,但似乎没有什么不同:

 services.AddHttpClient();

            if (!services.Any(x => x.ServiceType == typeof(HttpClient)))
            {
                services.AddScoped<HttpClient>(s =>
                {
                    var uriHelper = s.GetRequiredService<NavigationManager>();
                    return new HttpClient
                    {
                        BaseAddress = new Uri(uriHelper.BaseUri)
                    };
                });
            }

关于我可能做错什么的任何建议吗?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)