add allowIframe option

[bachmanity1]

This PR fixes #585
Additional option allows iframes to retain src attribute. This option allong with custom-events can be used to replay content of iframes that is blocked by same-origin-policy such as youtube iframes.
By using below function I was able to replay content from youtube:

function allowIframe (src: string): boolean {
    try {
        const url = new URL(src);
        return url.origin === `https://www.youtube.com`;
    } catch {
        return false;
    }
}  

[Juice10]

I believe you are referring to issue #585 not #175

[bachmanity1]

Thanks @Juice10, I edited the description.

[YunFeng0817]

Could you please show an example of how to recording YouTube videos with the option "allowIframe"?

[Yuyz0112]

@Mark-Fenng I think @bachmanity1 means just allow loading YouTube iframe normally during replay, which is out of the control of rrweb's replayer.

[bachmanity1]

yes @Yuyz0112 is right, this option allows to load youtube iframe normally during replay and then using custom-events api we can transmit play, pause and seek events in youtube iframe from recorded page to replayed page.

[YunFeng0817]

Ok, but from your changes, I can't see how this option allows loading youtube iframe.

[bachmanity1]

@Mark-Fenng here is example how we can record events from youtube iframe, using same logic you can process these events in replayed page

function allowIframe (src: string): boolean {
    try {
        const url = new URL(src);
        return url.origin === `https://www.youtube.com`;
    } catch {
        return false;
    }
}

record({
    emit: (e, c) => {
        // send to backend
    },
    allowIframe,
});

if (!(window as any).YT) {
    const tag = document.createElement(`script`);
    tag.src = `https://www.youtube.com/iframe_api`;
    (window as any).onYouTubeIframeAPIReady = onYTAPIReady;
    const firstScriptTag = document.getElementsByTagName(`script`)[0];
    firstScriptTag?.parentNode?.insertBefore(tag, firstScriptTag);
} else {
    onYTAPIReady();
}

function onYTAPIReady () {
    const onPlayerStateChange = (id: string) => (event: any) => {
        record.addCustomEvent(`stateChange`, {
            id,
            playerInfo: event.target.playerInfo,
        });
    };
    for(const iframe of document.getElementsByTagName(`iframe`)) {
        try {
            const src = (iframe as HTMLIFrameElement).getAttribute(`src`) ?? ``;
            const url = new URL(src);
            if (url.origin !== `https://www.youtube.com`) {
                continue;
            }
            const id = (iframe as HTMLIFrameElement).getAttribute(`id`) ?? ``;
            new (window as any).YT.Player(id, {
                events: {
                    onStateChange: onPlayerStateChange(id),
                },
            });
        } catch {
            continue;
        }
    }
}

[Yuyz0112]

Let me take a look at this PR a little more.

Thanks for the code and review @bachmanity1 @Mark-Fenng

[bachmanity1]

@Yuyz0112 can you plz merge this before #595?

[Yuyz0112]

@bachmanity1 Both this PR and the PR in rrweb-snapshot look good to me. The only remaining topic is whether we can call this option allowIframe or keepIframeSrc or something else more concrete?

[YunFeng0817]

I prefer keepIframeSrc.

[bachmanity1]

@Yuyz0112 I renamed allowIframe to keepIframeSrcFn

[Yuyz0112]

@bachmanity1 Could you upgrade to rrweb-snapshot@1.1.5 in your branch?

[bachmanity1]

@Yuyz0112 upgraded.

[Yuyz0112]

Thanks!

[eoghanmurray]

Is there a record/replay youtube pattern here that can be integrated into core rrweb such that people get youtube replay out of the box?
Could it be added as a recipe? Or as a plugin?