Flutter将视频或图文共享到抖音
如安在 Flutter 中共享视频到抖音
话不多说,先上作用:
原理
发布内容至抖音 H5 场景_移动/网站运用_抖音敞开渠道 (open-douyin.com)
- 本教程没有接入抖音原生 SDK 以及任何第三方插件,运用抖音的 h5 共享接口合作
url_launcher
插件完成跳转至抖音共享页面 - 需求共享的资源需求被布置在可被揭露拜访的服务器上,调用抖音的 h5 共享接口需供给被共享资源的 url
- 需在自己的服务端进行签名核算,并将成果回来给前端,以供调用抖音的 api
过程
- 在 抖音敞开渠道注册 app,拿到
client_key
和client_secret
- 生成 client_token
- 获取 open_ticket
- 在服务端核算签名
- 将需求的参数回来给前端
- Flutter 拿到从服务端获取的参数 + 视频/图文链接 拉起抖音 App 共享
前端完成
服务端核算签名的部分就不多说了,我们依据官网的教程来就好,回来给前端的数据结构相似这样的:
{
// 服务端设置的 用于核算签名的 随机字符串
"nonceStr": "ae86",
// 签名
"signature": "665f1211738c4f348d093535e2ef93ac",
// 秒级时刻戳
"timestamp": "1717054967",
// 共享类型 默许 h5
"shareType": "h5",
"clientKey": "ztfqxgipi39ko49q"
}
前端生成 共享 schema,并调起共享代码:
Future<void> douyinShare({
// 图片列表
List<String> images = const [],
// 视频 url
String? videoUrl = "",
// 自定义标签
List<String> tagList = const [],
// 标题
required String title,
}) async {
Response response = await dio.get('/<获取签名接口>');
final Map<String, dynamic> param = {
'title': title,
'client_key': response.data['clientKey'],
'nonce_str': response.data['nonceStr'],
'signature': response.data['signature'],
'timestamp': response.data['timestamp'],
'share_type': response.data['h5'],
// 1-直接跳转到发布页 0-跳转到修改页
'share_to_publish': '1',
};
// 标签
param['hashtag_list'] = json.encode(['自定义标签', '自定义标签2', ...tagList]);
// 向 param 中增加图片或视频
if (images.isNotEmpty) {
if (images.length > 1) {
param['image_list_path'] = json.encode(images);
} else {
param['image_path'] = images.first;
}
} else if (videoUrl != "") {
param['video_path'] = videoUrl;
} else {
// error handle
}
// 固定写法
final Uri url = Uri(
scheme: 'snssdk1128',
host: 'openplatform',
path: 'share',
queryParameters: param,
);
if (await canLaunchUrl(url)) {
await launchUrl(url);
}
}
上述代码只展现了中心逻辑,至于详细的完成就请各位自行决断,例如 错误处理、 Util 东西类、 单例形式 等等...
IOS 需求增加运用白名单
抖音的 ApplicationQueriesScheme 为: snssdk1128
在 ios/info.plist
文件中参加
<key>LSApplicationQueriesSchemes</key>
<array>
<string>snssdk1128</string> <!-- 抖音 -->
...
</array>
完