# OBScure

**Repository Path**: smdsbz/obscure

## Basic Information

- **Project Name**: OBScure
- **Description**: The more intuitive and privacy-secured way to mirrors web page element to OBS.
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-10
- **Last Updated**: 2022-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: VTUBER, VUP, 直播, OBS

## README

OBScure
=======

![obscure.gif](https://i.loli.net/2021/07/17/KloC1HwYJbDevNL.gif)

Conveniently mirroring elements in web page to OBS ...
* without having to manually moving / cropping source in OBS
* no immediate worries about accidentally letting your audience see other parts
    of the web page (whether for cleanliness or for privacy)

<span style="background-color:red;">Limitations</span>
------------------------------------------------------

* Due to lack of API support, the crop is shifted if sidebar (Firefox) or DevTool
    is opened

    > AFIK, there's no way you know which side the sidebar / DevTool is opened on.
    >
    > But I'm new to web development, please file an issue if you know how to fix this!

* At the time of writing, OBScure only supports __one `<video>` per tab__,
    no more, no less, and no other.

Usage
-----

### On the OBS side ...

1. Install the [OBSWebSocket](https://github.com/Palakis/obs-websocket) plugin
2. Setup OBSWebSocket, the settings can be found at _Tools > WebSockets server_

    ![OBSWebSocket setting](https://i.loli.net/2021/07/17/3Z8xgu4HVj76qXB.png)

3. Create the dummy source, it is used as insert location for later mirrors

    ![dummy source](https://i.loli.net/2021/07/17/BgWz7n5e2PYpsCN.png)

    * The source's name must be `OBScure::top`
    * The source must be __center aligned__

    Later sources will be created __just below__ the dummy source.

### On the browser side ...

1. Install the extension (should be available in the release page)
2. Fireup a web page with a video element

    At the time of writing, the page may contain __one and only one__ `<video>`
    element, like [this one](https://www.bilibili.com/video/BV1mh411S7gx).

3. Click on the extension's icon to start mirror
4. Click on the icon again to stop, or simply close the tab

### The mirror will be _hid away_ automatically when ...

* Switched to another tab (of the same browser profile)

### The mirror will be _cancelled_ automatically when ...

* The tab is closed
* The `<video>`'s position (w.r.t. browser window) / size changed
    * `getBoundingClientRect()` changed, to be more precise

Roadmap
-------

* [x] Proof-of-Concept: mirror the corrent window to OBS
* [x] Crop source (`<video>`) to the correct size
    * [x] Tested against DPI other than 1
    * [x] Tested against non-native OBS output / canvas resolution
    * [x] Tested against web page zoomming
* [x] Align mirrored source to a predefined area in OBS
* [x] Lazily connect to OBS
* [x] Option page for configuring OBS-WebSocket password, and other
* [x] On mirroring area shifted (e.g. resize, scroll, DOM change), cancel the mirror

    > __PERF:__ currently this is done by comparing for difference in rect every 500ms.

    * [ ] On shifted but still in viewport, adapt
* [x] On tab switched, disable output
* [ ] Not just `<video>`, let user choose what to mirror
    * [ ] choose with `querySelector()`
    * [ ] choose with right-click menu, like _AdBlock_
    * [ ] choose with "Take screenshot"-like UI

        > NOTE: no longer supports accurate auto removal when mirroring a
        > non-DOM attached area