[Day 9] 讓 C# 也可以很 Social — .NET 6 C# 與 Line Services API 開發 — Video、Audio、Location Message
Hello 各位好，今天要介紹的訊息種類是
<<回顧上一篇<<
一、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
>>下一篇>>
