diff --git a/examples/browser/README.md b/examples/browser/README.md index 9dd50530..19998d14 100644 --- a/examples/browser/README.md +++ b/examples/browser/README.md @@ -6,17 +6,52 @@ YouTube.js works in the browser! To use YouTube.js in the browser you must proxy requests through your own server. You can see our simple reference implementation in Deno in `examples/browser/proxy/deno.ts`. -Once the proxy is set up you need to tell Innertube about it when instantiating it. +We'll use our own fetch implementation to proxy requests through our server. This is a simple example, but you can use any fetch implementation you want. ```ts import { Innertube } from "youtubei.js/build/browser"; const yt = await Innertube.create({ - browser_proxy: { - host: "localhost", - schema: 'http', - } -}) + fetch: async (input, init) => { + // url + const url = typeof input === 'string' + ? new URL(input) + : input instanceof URL + ? input + : new URL(input.url); + + // transform the url for use with our proxy + url.searchParams.set('__host', url.host); + url.host = 'localhost:8080'; + url.protocol = 'http'; + + const headers = init?.headers + ? new Headers(init.headers) + : input instanceof Request + ? input.headers + : new Headers(); + + // now serialize the headers + url.searchParams.set('__headers', JSON.stringify([...headers])); + + // copy over the request + const request = new Request( + url, + input instanceof Request ? input : undefined, + ); + + headers.delete('user-agent'); + + // fetch the url + return fetch(request, init ? { + ...init, + headers + } : { + headers + }); + }, + cache: new UniversalCache(), +}); ``` after that you can use the library as normal. diff --git a/examples/browser/proxy/deno.ts b/examples/browser/proxy/deno.ts index 677c8bd8..954e123c 100644 --- a/examples/browser/proxy/deno.ts +++ b/examples/browser/proxy/deno.ts @@ -18,7 +18,7 @@ const handler = async (request: Request): Promise => { 'Access-Control-Allow-Origin': request.headers.get('origin') || '*', 'Access-Control-Allow-Methods': '*', 'Access-Control-Allow-Headers': - 'Origin, X-Requested-With, Content-Type, Accept, Authorization, x-goog-visitor-id, x-origin, x-youtube-client-version, Accept-Language, Range', + 'Origin, X-Requested-With, Content-Type, Accept, Authorization, x-goog-visitor-id, x-origin, x-youtube-client-version, Accept-Language, Range, Referer', 'Access-Control-Max-Age': '86400', 'Access-Control-Allow-Credentials': 'true', }), @@ -45,7 +45,7 @@ const handler = async (request: Request): Promise => { JSON.parse(url.searchParams.get('__headers') || '{}'), ); copyHeader('range', request_headers, request.headers); - copyHeader('user-agent', request_headers, request.headers); + !request_headers.has('user-agent') && copyHeader('user-agent', request_headers, request.headers); url.searchParams.delete('__headers'); // Make the request to YouTube @@ -62,6 +62,8 @@ const handler = async (request: Request): Promise => { copyHeader('content-length', headers, fetchRes.headers); copyHeader('content-type', headers, fetchRes.headers); copyHeader('content-disposition', headers, fetchRes.headers); + copyHeader('accept-ranges', headers, fetchRes.headers); + copyHeader('content-range', headers, fetchRes.headers); // add cors headers headers.set(