React Native WebView Vimeo Embedding绕过隐私实现

Question

我正在使用 react-native-webview 在我的 React Native 应用程序中嵌入 Vimeo 视频。这些视频在 Vimeo 上启用了隐私限制，我正在努力授权这些视频，以免它们 'private' 在我的应用程序中。根据我的研究，我需要做的就是添加授权 header，您稍后会在我的代码中看到。

我已经尝试了“headers”行的所有组合，但我似乎无法 un-privatise 它们。澄清一下，我拥有这些视频，access_code 在我的实现中是正确的。

我想清楚地知道我输入的数据是否正确，或者我是否遗漏了什么？

我的代码：

import React from "react";
import {
Dimensions,
ActivityIndicator,
View
} from 'react-native';
import WebView from 'react-native-webview';
import urlParser from "js-video-url-parser";

const VimeoEmbed = (props) => {

const { url } = props;

const { width } = Dimensions.get("window");
const height = 0.5625 * width;

const Source = () => {
        return {
            headers: { 
                Authorization: 'bearer 0d1450gs4t853kgf3f6c09d1'
            },
            html: `
            <html>
                <head><meta name="viewport" content="width=device-width, initial-scale=1"></head>
                <body>
                    <div>
                        <iframe src="https://player.vimeo.com/video/${url}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
                        <script src="https://player.vimeo.com/api/player.js"></script>
                    </div>
                </body>
            </html>
            `,
        }
    }

const VideoComponent =
    <>
        <WebView
            source={Source()}
            startInLoadingState={true}
            scrollEnabled={false}
            originWhitelist={['*']}
            allowsInlineMediaPlayback={true}
            style={{
                height: height,
                width: width,
                margin: 0,
                padding: 0,
            }}
        />
    </>

return VideoComponent;
}

export default VimeoEmbed;

Answer 1

  const [apiResponse, setApiResponse] = useState();

  useEffect(() => {
        axios.get(`https://api.vimeo.com/videos/${ParseUrl.id}`, {
            headers: {
                referer: "https://yourUrlHere.com",
                Authorization: `Bearer ${Token}`,
            }
        })
            .then((response) => {
                setApiResponse(response.data);
            });
    }, [])

    const Source = () => { // This is the source that you would insert into the WebView
            return {
                uri: apiResponse.player_embed_url,
                headers: {
                    referer: "https://yourUrlHere.com",
                    Authorization: `Bearer ${Token}`
                },
        }
    }

React Native WebView Vimeo Embedding绕过隐私实现

React Native WebView Vimeo Embedding bypassing Privacy Implimentation

react-native

react-native-webview