diff --git a/README.md b/README.md index 0a0749f..bda8a2d 100644 --- a/README.md +++ b/README.md @@ -1 +1,35 @@ -# TwitchAdSolutions \ No newline at end of file +# TwitchAdSolutions + +This repo aims to provide multiple solutions for blocking Twitch ads. + +## Current solutions + +- dyn + - Ad segments are replaced by a low resolution stream segments (on a m3u8 level). + - Stuttering and looping of segments my occur. +- dyn-video-swap + - Ads are replaced by a low resolution stream which is swapped with the original stream for the duration of the ad. + - Similar to `dyn`, but may have a larger jump in time. +- low-res + - No ads. + - The stream is 480p for the duration of the stream. +- mute-black + - Ads are muted / blacked out for the duration of the ad. + +## Other solutions / projects + +- https://github.com/odensc/ttv-ublock (extension, outdated) +- https://gist.github.com/simple-hacker/ddd81964b3e8bca47e0aead5ad19a707 (UserScript + FrankerFaceZ extension) +- https://github.com/Wilkolicious/twitchAdSkip (UserScript + FrankerFaceZ extension) + +## Applying a solution (uBlock Origin) + +uBlock Origin solutions single files, suffixed by `ublock-origin.js` e.g. `low-res-ublock-origin.js`. + +- Navigate to the uBlock Origin Dashboard (the extension options) +- Under the `My filters` tab add `twitch.tv##+js(twitch-videoad)`. +- Under the `Settings` tab, enable `I am an advanced user`, then click the cog that appears. Modify the value of `userResourcesLocation` from `unset` to the full url of the solution you wish to use (if a url is already in use, add a space after the existing url). e.g. `userResourcesLocation ` + +## NOTE/TODO + +Many of these solutions could do with improvements. Ports to UserScript should also be made. \ No newline at end of file diff --git a/dyn-video-swap/dyn-video-swap-ublock-origin.js b/dyn-video-swap/dyn-video-swap-ublock-origin.js new file mode 100644 index 0000000..ca18002 --- /dev/null +++ b/dyn-video-swap/dyn-video-swap-ublock-origin.js @@ -0,0 +1,101 @@ +// Adapted from dyn / mute-black +twitch-videoad.js application/javascript +(function() { + if ( /(^|\.)twitch\.tv$/.test(document.location.hostname) === false ) { return; } + window.addEventListener("DOMContentLoaded", function() { + //current state of if video is disabled + var tempVideo = null; + var disabledVideo = null; + var originalVolume = 0; + //repeatedly check for ad + function checkForAd() { + //check ad by looking for text banner + var adBanner = document.querySelectorAll("span.tw-c-text-overlay"); + var foundAd = false; + for (var i = 0; i < adBanner.length; i++) { + if (adBanner[i].attributes["data-test-selector"]) { + foundAd = true; + break; + } + } + if (foundAd && typeof Hls !== 'undefined') { + //if found ad and video is visible, black out video and mute + if (!disabledVideo) { + //get livestream video element + var liveVid = document.getElementsByTagName("video"); + if (liveVid.length) { + disabledVideo = liveVid = liveVid[0]; + //mute + originalVolume = liveVid.volume; + liveVid.volume = 0; + //black out + liveVid.style.filter = "brightness(0%)"; + var createTempStream = async function() { + // Create new video stream TODO: Do this with callbacks + var channelName = "nickmercs"; + var playerType = "thunderdome"; + var CLIENT_ID = "kimne78kx3ncx6brgo4mv6wki5h1ko"; + var tempM3u8 = null; + var accessTokenResponse = await fetch('https://api.twitch.tv/api/channels/' + channelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=' + playerType + '&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}}); + if (accessTokenResponse.status === 200) { + var accessToken = JSON.parse(await accessTokenResponse.text()); + var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8?allow_source=true'); + urlInfo.searchParams.set('sig', accessToken.sig); + urlInfo.searchParams.set('token', accessToken.token); + var encodingsM3u8Response = await fetch(urlInfo.href); + if (encodingsM3u8Response.status === 200) { + // TODO: Maybe look for the most optimal m3u8 + var encodingsM3u8 = await encodingsM3u8Response.text(); + var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0]; + // Maybe this request is a bit unnecessary + var streamM3u8Response = await fetch(streamM3u8Url); + if (streamM3u8Response.status == 200) { + tempM3u8 = streamM3u8Url; + } else { + console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status); + } + } else { + console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status); + } + } else { + console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status); + } + if (tempM3u8 != null) { + tempVideo = document.createElement('video'); + tempVideo.autoplay = true; + disabledVideo.parentElement.insertBefore(tempVideo, disabledVideo.nextSibling); + if (Hls.isSupported()) { + tempVideo.hls = new Hls(); + tempVideo.hls.loadSource(tempM3u8); + tempVideo.hls.attachMedia(tempVideo); + } + console.log(tempVideo); + console.log(tempM3u8); + } + } + createTempStream(); + } + } + } else { + //if no ad and video blacked out, unmute and disable black out + if (disabledVideo) { + disabledVideo.volume = originalVolume; + disabledVideo.style.filter = ""; + disabledVideo = null; + if (tempVideo) { + tempVideo.hls.stopLoad(); + tempVideo.remove(); + tempVideo = null; + } + } + } + setTimeout(checkForAd,100); + } + checkForAd(); + if (typeof Hls === 'undefined') { + var script = document.createElement('script'); + script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest"; + document.head.appendChild(script); + } + }); +})(); \ No newline at end of file diff --git a/dyn/dyn-ublock-origin.js b/dyn/dyn-ublock-origin.js new file mode 100644 index 0000000..28275d7 --- /dev/null +++ b/dyn/dyn-ublock-origin.js @@ -0,0 +1,270 @@ +twitch-videoad.js application/javascript +(function() { + if ( /(^|\.)twitch\.tv$/.test(document.location.hostname) === false ) { return; } + function declareOptions(scope) { + // Options / globals + scope.OPT_INITIAL_M3U8_ATTEMPTS = 1; + scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = "";//'embed'; + scope.AD_SIGNIFIER = 'stitched-ad'; + scope.LIVE_SIGNIFIER = ',live'; + scope.CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko'; + // These are only really for Worker scope... + scope.StreamInfos = []; + scope.StreamInfosByUrl = []; + } + // Worker injection by instance01 (https://github.com/instance01/Twitch-HLS-AdBlock) + const oldWorker = window.Worker; + window.Worker = class Worker extends oldWorker { + constructor(twitchBlobUrl) { + var jsURL = getWasmWorkerUrl(twitchBlobUrl); + var version = jsURL.match(/wasmworker\.min\-(.*)\.js/)[1]; + var newBlobStr = ` + var Module = { + WASM_BINARY_URL: '${jsURL.replace('.js', '.wasm')}', + WASM_CACHE_MODE: true + } + ${stripAds.toString()} + ${getSegmentTimes.toString()} + ${hookWorkerFetch.toString()} + ${declareOptions.toString()} + declareOptions(self); + hookWorkerFetch(); + importScripts('${jsURL}'); + ` + super(URL.createObjectURL(new Blob([newBlobStr]))); + var adDiv = null; + this.onmessage = function(e) { + if (e.data.key == 'UboShowAdBanner') { + if (adDiv == null) { adDiv = getAdDiv(); } + adDiv.style.display = 'block'; + } + else if (e.data.key == 'UboHideAdBanner') { + if (adDiv == null) { adDiv = getAdDiv(); } + adDiv.style.display = 'none'; + } + } + function getAdDiv() { + var msg = 'uBlock Origin is waiting for ads to finish...'; + var playerRootDiv = document.querySelector('.video-player'); + var adDiv = null; + if (playerRootDiv != null) { + adDiv = playerRootDiv.querySelector('.ubo-overlay'); + if (adDiv == null) { + adDiv = document.createElement('div'); + adDiv.className = 'ubo-overlay'; + adDiv.innerHTML = '

' + msg + '

'; + adDiv.style.display = 'none'; + playerRootDiv.appendChild(adDiv); + } + } + return adDiv; + } + } + } + function getWasmWorkerUrl(twitchBlobUrl) { + var req = new XMLHttpRequest(); + req.open('GET', twitchBlobUrl, false); + req.send(); + return req.responseText.split("'")[1]; + } + function getSegmentTimes(lines) { + var result = []; + var lastDate = 0; + for (var i = 0; i < lines.length; i++) { + var line = lines[i]; + if (line.startsWith('#EXT-X-PROGRAM-DATE-TIME:')) { + lastDate = Date.parse(line.substring(line.indexOf(':') + 1)); + } else if (line.startsWith('http')) { + result[lastDate] = line; + } + } + return result; + } + async function stripAds(url, textStr, realFetch) { + var haveAdTags = textStr.includes(AD_SIGNIFIER); + var streamInfo = StreamInfosByUrl[url]; + if (streamInfo == null) { + console.log('Unknown stream url!'); + return textStr; + } + if (haveAdTags && !textStr.includes(LIVE_SIGNIFIER)) { + postMessage({key:'UboShowAdBanner'}); + } else { + postMessage({key:'UboHideAdBanner'}); + } + if (haveAdTags) { + if (!streamInfo.BackupFailed && streamInfo.BackupUrl == null) { + // NOTE: We currently don't fetch the oauth_token. You wont be able to access private streams like this. + streamInfo.BackupFailed = true; + var accessTokenResponse = await realFetch('https://api.twitch.tv/api/channels/' + streamInfo.ChannelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=picture-by-picture&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}}); + if (accessTokenResponse.status === 200) { + var accessToken = JSON.parse(await accessTokenResponse.text()); + var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + streamInfo.ChannelName + '.m3u8' + streamInfo.RootM3U8Params); + urlInfo.searchParams.set('sig', accessToken.sig); + urlInfo.searchParams.set('token', accessToken.token); + var encodingsM3u8Response = await realFetch(urlInfo.href); + if (encodingsM3u8Response.status === 200) { + // TODO: Maybe look for the most optimal m3u8 + var encodingsM3u8 = await encodingsM3u8Response.text(); + var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0]; + // Maybe this request is a bit unnecessary + var streamM3u8Response = await realFetch(streamM3u8Url); + if (streamM3u8Response.status == 200) { + streamInfo.BackupFailed = false; + streamInfo.BackupUrl = streamM3u8Url; + console.log('Fetched backup url: ' + streamInfo.BackupUrl); + } else { + console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status); + } + } else { + console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status); + } + } else { + console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status); + } + } + var backupM3u8 = null; + if (streamInfo.BackupUrl != null) { + var backupM3u8Response = await realFetch(streamInfo.BackupUrl); + if (backupM3u8Response.status == 200) { + backupM3u8 = await backupM3u8Response.text(); + } else { + console.log('Backup m3u8 failed with ' + backupM3u8Response.status); + } + } + var lines = textStr.replace('\r', '').split('\n'); + var segmentMap = []; + if (backupM3u8 != null) { + var backupLines = backupM3u8.replace('\r', '').split('\n'); + var segTimes = getSegmentTimes(lines); + var backupSegTimes = getSegmentTimes(backupLines); + for (const [segTime, segUrl] of Object.entries(segTimes)) { + var closestTime = Number.MAX_VALUE; + var matchingBackupTime = Number.MAX_VALUE; + for (const [backupSegTime, backupSegUrl] of Object.entries(backupSegTimes)) { + var timeDiff = Math.abs(segTime - backupSegTime); + if (timeDiff < closestTime) { + closestTime = timeDiff; + matchingBackupTime = backupSegTime; + segmentMap[segUrl] = backupSegUrl; + } + } + if (closestTime != Number.MAX_VALUE) { + backupSegTimes.splice(backupSegTimes.indexOf(matchingBackupTime), 1); + } + } + } + for (var i = 0; i < lines.length; i++) { + var line = lines[i]; + if (line.includes('stitched-ad')) { + lines[i] = ''; + } + if (line.startsWith('#EXTINF:') && !line.includes(',live')) { + lines[i] = line.substring(0, line.indexOf(',')) + ',live'; + var backupSegment = segmentMap[lines[i + 1]]; + lines[i + 1] = backupSegment != null ? backupSegment : '' + } + } + textStr = lines.join('\n'); + //console.log(textStr); + } + return textStr; + } + function hookWorkerFetch() { + var realFetch = fetch; + fetch = async function(url, options) { + if (typeof url === 'string') { + if (url.endsWith('m3u8')) { + // Based on https://github.com/jpillora/xhook + return new Promise(function(resolve, reject) { + var processAfter = async function(response) { + var str = await stripAds(url, await response.text(), realFetch); + var modifiedResponse = new Response(str); + resolve(modifiedResponse); + }; + var send = function() { + return realFetch(url, options).then(function(response) { + processAfter(response); + })['catch'](function(err) { + console.log('fetch hook err ' + err); + reject(err); + }); + }; + send(); + }); + } + else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture')) { + return new Promise(async function(resolve, reject) { + // - First m3u8 request is the m3u8 with the video encodings (360p,480p,720p,etc). + // - Second m3u8 request is the m3u8 for the given encoding obtained in the first request. At this point we will know if there's ads. + var maxAttempts = OPT_INITIAL_M3U8_ATTEMPTS <= 0 ? 1 : OPT_INITIAL_M3U8_ATTEMPTS; + var attempts = 0; + while(true) { + var encodingsM3u8Response = await realFetch(url, options); + if (encodingsM3u8Response.status === 200) { + var encodingsM3u8 = await encodingsM3u8Response.text(); + var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0]; + var streamM3u8Response = await realFetch(streamM3u8Url); + var streamM3u8 = await streamM3u8Response.text(); + if (!streamM3u8.includes(AD_SIGNIFIER) || ++attempts >= maxAttempts) { + if (maxAttempts > 1 && attempts >= maxAttempts) { + console.log('max skip ad attempts reached (attempt #' + attempts + ')'); + } + var channelName = (new URL(url)).pathname.match(/([^\/]+)(?=\.\w+$)/)[0]; + var streamInfo = StreamInfos[channelName]; + if (streamInfo == null) { + StreamInfos[channelName] = streamInfo = {}; + } + // This might potentially backfire... maybe just add the new urls + streamInfo.ChannelName = channelName; + streamInfo.Urls = []; + streamInfo.RootM3U8Params = (new URL(url)).search; + streamInfo.BackupUrl = null; + streamInfo.BackupFailed = false; + var lines = encodingsM3u8.replace('\r', '').split('\n'); + for (var i = 0; i < lines.length; i++) { + if (!lines[i].startsWith('#') && lines[i].includes('.m3u8')) { + streamInfo.Urls.push(lines[i]); + StreamInfosByUrl[lines[i]] = streamInfo; + } + } + resolve(new Response(encodingsM3u8)); + break; + } + console.log('attempt to skip ad (attempt #' + attempts + ')'); + } else { + // Stream is offline? + resolve(encodingsM3u8Response); + break; + } + } + }); + } + } + return realFetch.apply(this, arguments); + } + } + // This hooks fetch in the global scope (which is different to the Worker scope, and therefore different to the Worker fetch hook) + function hookFetch() { + var realFetch = window.fetch; + window.fetch = function(url, init, ...args) { + if (typeof url === 'string') { + if (OPT_ACCESS_TOKEN_PLAYER_TYPE) { + if (url.includes('/access_token')) { + var modifiedUrl = new URL(url); + modifiedUrl.searchParams.set('player_type', OPT_ACCESS_TOKEN_PLAYER_TYPE); + arguments[0] = modifiedUrl.href; + } + else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) { + const newBody = JSON.parse(init.body); + newBody.variables.playerType = OPT_ACCESS_TOKEN_PLAYER_TYPE; + init.body = JSON.stringify(newBody); + } + } + } + return realFetch.apply(this, arguments); + } + } + declareOptions(window); + hookFetch(); +})(); \ No newline at end of file diff --git a/low-res/low-res-ublock-origin.js b/low-res/low-res-ublock-origin.js new file mode 100644 index 0000000..780b651 --- /dev/null +++ b/low-res/low-res-ublock-origin.js @@ -0,0 +1,27 @@ +twitch-videoad.js application/javascript +(function() { + if ( /(^|\.)twitch\.tv$/.test(document.location.hostname) === false ) { return; } + function hookFetch() { + var OPT_ACCESS_TOKEN_PLAYER_TYPE = 'thunderdome';//480p + //var OPT_ACCESS_TOKEN_PLAYER_TYPE = 'picture-by-picture';//360p + var realFetch = window.fetch; + window.fetch = function(url, init, ...args) { + if (typeof url === 'string') { + if (OPT_ACCESS_TOKEN_PLAYER_TYPE) { + if (url.includes('/access_token')) { + var modifiedUrl = new URL(url); + modifiedUrl.searchParams.set('player_type', OPT_ACCESS_TOKEN_PLAYER_TYPE); + arguments[0] = modifiedUrl.href; + } + else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) { + const newBody = JSON.parse(init.body); + newBody.variables.playerType = OPT_ACCESS_TOKEN_PLAYER_TYPE; + init.body = JSON.stringify(newBody); + } + } + } + return realFetch.apply(this, arguments); + } + } + hookFetch(); +})(); \ No newline at end of file diff --git a/mute-black/mute-black-ublock-origin.js b/mute-black/mute-black-ublock-origin.js new file mode 100644 index 0000000..79c2979 --- /dev/null +++ b/mute-black/mute-black-ublock-origin.js @@ -0,0 +1,46 @@ +// Author: https://twitter.com/EthanShulman +twitch-videoad.js application/javascript +(function() { + if ( /(^|\.)twitch\.tv$/.test(document.location.hostname) === false ) { return; } + window.addEventListener("DOMContentLoaded", function() { + //current state of if video is disabled + var disabledVideo = null; + var originalVolume = 0; + //repeatedly check for ad + function checkForAd() { + //check ad by looking for text banner + var adBanner = document.querySelectorAll("span.tw-c-text-overlay"); + var foundAd = false; + for (var i = 0; i < adBanner.length; i++) { + if (adBanner[i].attributes["data-test-selector"]) { + foundAd = true; + break; + } + } + if (foundAd) { + //if found ad and video is visible, black out video and mute + if (!disabledVideo) { + //get livestream video element + var liveVid = document.getElementsByTagName("video"); + if (liveVid.length) { + disabledVideo = liveVid = liveVid[0]; + //mute + originalVolume = liveVid.volume; + liveVid.volume = 0; + //black out + liveVid.style.filter = "brightness(0%)"; + } + } + } else { + //if no ad and video blacked out, unmute and disable black out + if (disabledVideo) { + disabledVideo.volume = originalVolume; + disabledVideo.style.filter = ""; + disabledVideo = null; + } + } + setTimeout(checkForAd,100); + } + checkForAd(); + }); +})(); \ No newline at end of file