如何通过链接将视频直接分享到 facebook/instagram 作为可以使用 react-native 直接播放的视频

Posted 2023-03-28

【中文标题】如何通过链接将视频直接分享到 facebook/instagram 作为可以使用 react-native 直接播放的视频

【英文标题】：How to share a video directly to facebook/instagram through a link as video which can be directly played using react-native

【发布时间】：2020-07-12 10:04:20

【问题描述】：

如何通过使用 react-native 的链接将视频直接分享到 Facebook/Instagram/twitter。我正在使用 react-native-share 在 Instagram/Facebook 上分享视频，但这是作为链接分享的，但我想像 TikTok 一样将它们作为视频分享。

我怎样才能做到这一点？我知道它可以通过将其转换为 base 64 来实现，那么是否有任何库可以直接将链接转换为 base 64？否则我需要先下载它然后检索它然后转换为base 64然后分享它。

请帮忙！

如果有人需要完整代码，将回答我是如何做到的：

shareURL = async (socialMedia) => 
        let facebook = socialMedia === 'facebook'
        let twitter = socialMedia === 'twitter'
        const  video, uploadingStatus  = this.state;

        this.setState( isSliderModalVisible: true , async () => 
            let uploadOptions =  fileCache: true, appendExt: 'mp4', timeout: 60000, indicator: true, iosBackgroundTask: true, 
            const res = await RNFetchBlob.config(uploadOptions).fetch('GET', video, )
                .progress((received, total) => 
                    this.setState( uploadingStatus: (received / total) * 100 )
                    console.log('Progress', (received / total) * 100);
                )
            const filePath = res.path(); //to delete video
            const base64String = await res.base64();
            const url = `data:video/mp4;base64,$base64String`;
            await RNFetchBlob.fs.unlink(filePath); //deleted the video from path of celebfie.
            this.setState( isSliderModalVisible: false )
            setTimeout(() => 
                const shareOptions = 
                    title: 'Celebfie',
                    message: hashtags,
                    subject: 'Sharing my intro video which I recorded in Celebfie.',
                    url: url,
                    type: 'video/mp4',
                    social: facebook ? Share.Social.FACEBOOK : twitter ? Share.Social.TWITTER : Share.Social.INSTAGRAM
                ;
                Share.shareSingle(shareOptions).then((res) => this.setState( sharedVideoToSocialNetwork: true ))
                    .catch((err) =>  Global.customToast('Video sharing failed.', 'failure') )
            )
        , 1000);
    

【参考方案1】：

在这里回答我自己的问题，它是如何工作的：

shareURL = async (socialMedia) => 
        let facebook = socialMedia === 'facebook'
        let twitter = socialMedia === 'twitter'
        const  video, uploadingStatus  = this.state;

        this.setState( isSliderModalVisible: true , async () => 
            let uploadOptions =  fileCache: true, appendExt: 'mp4', timeout: 60000, indicator: true, IOSBackgroundTask: true, 
            const res = await RNFetchBlob.config(uploadOptions).fetch('GET', video, )
                .progress((received, total) => 
                    this.setState( uploadingStatus: (received / total) * 100 )
                    console.log('Progress', (received / total) * 100);
                )
            const filePath = res.path(); //to delete video
            const base64String = await res.base64();
            const url = `data:video/mp4;base64,$base64String`;
            await RNFetchBlob.fs.unlink(filePath); //deleted the video from path of Sexy lady.
            this.setState( isSliderModalVisible: false )
            setTimeout(() => 
                const shareOptions = 
                    title: 'Sexy Lady',
                    message: hashtags,
                    subject: 'Sharing my intro video which I recorded in Celebfie.',
                    url: url,
                    type: 'video/mp4',
                    social: facebook ? Share.Social.FACEBOOK : twitter ? Share.Social.TWITTER : Share.Social.INSTAGRAM
                ;
                Share.shareSingle(shareOptions).then((res) => this.setState( sharedVideoToSocialNetwork: true ))
                    .catch((err) =>  Global.customToast('Video sharing failed.', 'failure') )
            )
        , 1000);
    

【讨论】：

有效吗？我正在从 firebase 下载文件。存储，然后发布文件共享。我尝试了多种方式。唯一对我有用的是share.open。 Share.single 选项根本不起作用

【参考方案2】：

你可以这样做：

Share.open(
      
        message: `I have successfully Completed this course`,
        title: 'Share',
        url: 'file:///documents..',
        type: 'video/mp4',
      ,
      
        // android only:
        dialogTitle: 'Share',
        // iOS only:
        excludedActivityTypes: ['com.apple.UIKit.activity.PostToTwitter'],
      ,
    );

【讨论】：

指定的 url 是文件，但我有一个像 www.asw.mp4 这样的 URL 我没有文件

我试试看.. 共享来自 react native 还是第三方库 react-native-share？

遗憾的是它没有用！仍然是视频网址而不是视频

为此，您需要在选项对象中添加linkMetaData

这是一个iOS独有的功能，应该在activityItemSources下使用