tags: .NET6 C#, LineBot, Line Messaging API, C#, dotnet core

[Day 9] 讓 C# 也可以很 Social - .NET 6 C# 與 Line Services API 開發 - Video、Audio、Location Message

前言

Hello 各位好，今天要介紹的訊息種類是

• Video message - 影片訊息
• Audio message - 語音訊息
• Location message - 位置訊息

Video Message 介紹 & 實作 文件連結

• Video Message 由預覽圖片與影片內容組成，從文件內容可以得知，影片訊息有兩個圖層，在影片播放前只會顯示預覽圖片，當影片播放時就會將影片的圖層疊到預覽圖片前方，所以當預覽圖片與影片內容的長寬比不符合，並且預覽圖片比影片內容還大時，預覽圖片會在影片後方露出。(下方測試有實際例子)
  

• 如果還記得在介紹 Webhook Event 時有一個事件叫做 "VideoViewingComplete"，也就是使用者看完影片的事件，這個事件要觸發需要在傳送影片訊息時將其 TrackingId 的屬性帶入，則 Line 就會將其綁上該事件，只要使用者看完影片，伺服器就能收到事件通知。
  

實作 Video Message

• 首先照著文件新增 Class
  

• 在 Dtos/Messages 資料夾內新增 VideoMessageDto.cs

using LineBotMessage.Enum;
namespace LineBotMessage.Dtos
{
    public class VideoMessageDto : BaseMessageDto
    {
        public VideoMessageDto()
        {
            Type = MessageTypeEnum.Video;
        }

        public string OriginalContentUrl { get; set; }
        public string PreviewImageUrl { get; set; }
        public string? TrackingId { get; set; }
    }
}

• 在 LineBotService 中的 BroadcastMessageHandler Function 添加對應的 case

case MessageTypeEnum.Video:
    messageRequest = _jsonProvider.Deserialize<BroadcastMessageRequestDto<VideoMessageDto>>(strBody);
    break;

測試

• 準備影片 ＆ 預覽圖片

  • 這邊使用的方式就是上一篇介紹的 Static Files 方法，請準備一個 mp4 的影片檔放到 UploadFiles 資料夾中，預覽圖就用上次的～
    

• 使用廣播功能測試 Video Message 有沒有正確宣告。
  

• 測試用 RequestBody

{
  "Messages" : [
    {
      "Type":"video", 
      "OriginalContentUrl" : "your video url", 
      "PreviewImageUrl" : "your preview image url",
      "TrackingId" : "Video-001"
    }
  ]
}

• 影片播放前會先顯示 Preview Image
  

• 影片圖層會在播放時出現並蓋到 Preview Image 前面，但因為這邊準備的圖片長寬比與影片不同，甚至比影片大，導致影片沒辦法完全蓋住預覽圖片，所以上下藍色的區塊會露出來。
  

• 當使用者看完影片後(必須在手機上觀看)就會收到 video viewing complete 的事件。
  

• 可以在接收到 Webhook event 時，使用前幾篇接好的 Reply Message 功能回傳訊息給使用者
  --> 修改 LineBotService ReceiveWebhook Function 中的 VideoPlayComplete case。

case WebhookEventTypeEnum.VideoPlayComplete:
    replyMessage = new ReplyMessageRequestDto<TextMessageDto>()
    {
        ReplyToken = eventObject.ReplyToken,
        Messages = new List<TextMessageDto>
        {
            new TextMessageDto(){Text = $"使用者您好，謝謝您收看我們的宣傳影片，祝您身體健康萬事如意 !"}
        }
    };
    ReplyMessageHandler("text", replyMessage);
    break;

• 回覆訊息
  

Audio Message 介紹 & 實作 文件連結

語音訊息的屬性一樣非常少，一個 url 用來帶入語音檔案的絕對路徑，另一個 Duration 屬性是用來控制音源長度的顯示。

實作 Audio Message

• 語音訊息的屬性也非常少，但要注意的是官方提到語音訊息支援的檔案只有 M4A 格式(雖然經過測試 MP4 也可以正常播放)，所以先去準備一個 M4A 格式的音檔丟到 UploadFiles 資料夾裡面吧。
  

• 在 Dtos/Messages 資料夾下新增 AudioMessageDto.cs

using LineBotMessage.Enum;
namespace LineBotMessage.Dtos
{
    public class AudioMessageDto : BaseMessageDto
    {
        public AudioMessageDto()
        {
            Type = MessageTypeEnum.Audio;
        }

        public string OriginalContentUrl { get; set; }
        public int Duration { get; set; }
    }
}

• 在 LineBotService 中的 BroadcastMessageHandler Function 添加對應的 case

case MessageTypeEnum.Audio:
    messageRequest = _jsonProvider.Deserialize<BroadcastMessageRequestDto<AudioMessageDto>>(strBody);
    break;

測試

• 檔案放入 UploadFiles 資料夾
  

• 使用廣播功能測試 Audio Message 有沒有正確宣告。
  

• 測試用 RequestBody

{
  "Messages" : [
    {
      "Type":"audio", 
      "OriginalContentUrl" : "your audio url", 
      "Duration" : 72000
    }
  ]
}

• 結果
  • 因爲這則語音訊息 Duration 帶入 72000毫秒 = 72秒 = 1 分 12 秒，所以顯示長度為 01:12
    
  • 各位可以自己試一試將 Duration 隨意填寫，不管大小，對語音訊息會有怎樣的影響嗎？

Location Message 介紹 & 實作 文件連結

實作 Location Message

• 在 Dtos/Messages 資料夾中新增 LocationMesssageDto.cs

using LineBotMessage.Enum;
namespace LineBotMessage.Dtos
{
    public class LocationMessageDto : BaseMessageDto
    {
        public LocationMessageDto()
        {
            Type = MessageTypeEnum.Location;
        }

        public string Title { get; set; }
        public string Address { get; set; }

        public double Latitude { get; set; } // 緯度
        public double Longitude { get; set; } // 經度
    }
}

• 在 LineBotService 中的 BroadcastMessageHandler Function 添加對應的 case

case MessageTypeEnum.Location:
    messageRequest = _jsonProvider.Deserialize<BroadcastMessageRequestDto<LocationMessageDto>>(strBody);
    break;

測試

• 使用 swagger 測試位置訊息能否正確傳送
  

• 測試用 RequestBody

{
  "Messages" : [
    {
      "Type":"location", 
      "Title" : "Apps 時賦科技有限公司", 
      "Address" : "10491台北市中山區南京東路二段124號十樓",
      "Latitude" : 25.05176950722628, 
      "Longitude" : 121.53334933801854
    }
  ]
}

• 傳送結果
  

結語

今天的介紹就到這邊了，下一篇要介紹的訊息是 Imagemap，Imagemap 在廣告行銷上是非常實用的訊息，他能夠對一張圖片自由的切割出最多50個不同區塊，並指定該區塊被點擊後要發生的事件，雖然事件只有傳送訊息以及開啟URL，不過這些應該能夠滿足大部份的情境，那各位就下一篇見吧！

範例程式碼

如果想要參考今天範例程式碼的部份，下面是 Git Repo 連結，方便大家參考。

Day9_Video、Audio、Location Message