tft每日頭條

 > 科技

 > 小程序js開發直播

小程序js開發直播

科技 更新时间:2024-08-12 00:12:28

業務場景,門店客戶觀看平台發的視頻,一鍵發布視頻,領取優惠,目的是利用抖音小程序作為拓客工具。

編碼思路:

1:觀看視頻,下載視頻到本地。

2:JS實現視頻切割,分片上傳。

3:上傳後等待抖音服務合成視頻ID,即抖音開放平台存放的視頻video_id。

4:調用開放平台接口發布視頻

整個環節思路清晰,純屬理論派,我們秉承實踐才是硬道理,不做參數工程師和理論工程師,下面把整個實現代碼和效果貼出來。

代碼實現第一步,下載視頻:

小程序js開發直播(小程序JS實現分片上傳)1

小程序js開發直播(小程序JS實現分片上傳)2

小程序js開發直播(小程序JS實現分片上傳)3

分片上傳視頻我們需要按抖音小程序的約束,先創建上傳視頻的任務ID(upload_id),後面持續進行多次異步上傳文件,注意是異步,綁定此任務ID,再把視頻合成,返回給我們一個video_id,

我們拿到video_id,請求自己的服務器接口,直接替客戶發布視頻,即,發布抖音視頻。

先拿到上傳任務ID,即upload_id,這個必須用真機測試。

小程序js開發直播(小程序JS實現分片上傳)4

調試真實數據如圖:

小程序js開發直播(小程序JS實現分片上傳)5

小程序js開發直播(小程序JS實現分片上傳)6

綁定數據到對象

小程序js開發直播(小程序JS實現分片上傳)7

小程序js開發直播(小程序JS實現分片上傳)8

分片上傳代碼多,說不清楚,下面上傳附件查看源代碼即可,注意看控制台,有報錯,這個是哪個現象導緻的呢,來分析一下原因:

分片上傳視頻是異步的,此處視頻切了9片,異步上傳,但是我客戶端是怎麼判斷上傳完了呢,大家一般會說如下圖:

小程序js開發直播(小程序JS實現分片上傳)9

注意啊,因為是異步上傳,網絡的不穩定因素,我什麼時間去請求抖音接口,拿到分片視頻合成的video_id,下圖看官方文檔如圖:

小程序js開發直播(小程序JS實現分片上傳)10

有什麼辦法,或者邏輯,隻讓我請求一次,拿到video_id呢?因為上傳視頻是異步的,其實是9片視頻同時在上傳,根本不能判斷出哪一個切片先上傳上去,所以抖音也沒有給出一個明确的flag來标識,抖音不知道我們要上傳多少片視頻,每個視頻多大,所以抖音不能在分片上傳的返回信息裡告訴我們,已經上傳完了,可以來找我來請求獲取合成視頻video_id了,所以此處,萬能的循環代碼就上了,因為設計到視頻下載和分片上傳,本身時間就會比較長!

小程序js開發直播(小程序JS實現分片上傳)11

再看分片上傳的代碼段:

小程序js開發直播(小程序JS實現分片上傳)12

還有一個坑:需要我們自己對JS的String屬性做兼容性調整,在抖音小程序這個殼子裡,有寫兼容性很坑爹!

小程序js開發直播(小程序JS實現分片上傳)13

小程序js開發直播(小程序JS實現分片上傳)14

分片上傳和切割視頻的代碼比較繁瑣,就不解析了,直接上附件,目前這個代碼片段在網絡上不好找,很是費了時間,測試環境也需要用真機來測試,耗時費力,比去工地綁鋼筋還累。

下圖上幾張項目圖:歡迎回複交流

小程序js開發直播(小程序JS實現分片上傳)15

小程序js開發直播(小程序JS實現分片上傳)16

小程序js開發直播(小程序JS實現分片上傳)17

附件下載:目前發布文章不支持夾帶附件

私信發-傳送門發 1 即可,領取代碼段,歡迎交流學習。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved