Fonte da web

Demonstração do widget

Este widget adiciona um site dentro do overlay do StreamElements, desde que ele tenha suporte para incorporação. No exemplo acima, este widget é usado para inserir uma webcam do OBS.ninja diretamente no overlay.

Agradecimentos especiais para a Dabs, do Pra Quem Gosta, por me permitir publicar este widget que eu fiz pra uso dela ^^

☕ Te ajudei? Me manda um cafézinho ^^

[email protected]

Índice:

Guia de configuração

Códigos

Guia de configuração

Antes de começar, se você não sabe instalar um widget no StreamElements, veja aqui como instalar.

URL

Aqui você irá definir qual site será exibido no widget.

Vale o aviso:

Para exibir um site por esse widget, o site em questão precisa permitir incorporação. Normalmente os sites que permitem tem uma opção chamada "Embed" ou "Incorporar" próxima a alguma opção de compartilhamento.
Isso não é uma limitação do widget ou do StreamElements, mas é parte das normas de segurança de iFrame, e não conheço nenhuma forma de contornar isso.
Se o site que você deseja inserir não suportar incorporação, este widget não carregará. Nesse caso, você deve inseri-lo diretamente como uma fonte de navegador no OBS Studio.

<body style="
    --cropTop: {{cropTop}}px;
    --cropBottom: {{cropBottom}}px;
    --cropLeft: {{cropLeft}}px;
    --cropRight: {{cropRight}}px;
">

    <div class="cutcontainer">
        <div class="placeholder" active="{{placeholderActive}}">
            <h2>Placeholder</h2>
            <p>Aqui irá ficar o site de URL:</p>
            <code>{{URL}}</code>
            <br>
            <p>Lembre de desativar o placeholder antes de salvar.</p>
        </div>
        <iframe src="{{URL}}" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
    </div>

</body>

CSS

* {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

iframe {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: transparent;
}

.placeholder {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    color: white;
    background-color: #5d22b5;
    box-shadow: inset 0 0 0 10px #2b1053;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-family: Arial, Helvetica, sans-serif;
}

.placeholder h2 {
    margin-bottom: 10px;
    ;
}

[active='false'] {
    display: none !important;
}
body {
    -webkit-mask-image: linear-gradient(0deg,
            transparent 0px,
            transparent var(--cropBottom),
            black var(--cropBottom),
            black calc(100% - var(--cropTop)),
            transparent calc(100% - var(--cropTop)),
            transparent 100%);
    mask-image: linear-gradient(0deg,
            transparent 0px,
            transparent var(--cropBottom),
            black var(--cropBottom),
            black calc(100% - var(--cropTop)),
            transparent calc(100% - var(--cropTop)),
            transparent 100%);
}

.cutcontainer {

    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    -webkit-mask-image: linear-gradient(90deg,
        transparent 0px,
        transparent var(--cropLeft),
        black var(--cropLeft),
        black calc(100% - var(--cropRight)),
        transparent calc(100% - var(--cropRight)),
        transparent 100%);

    mask-image: linear-gradient(90deg,
        transparent 0px,
        transparent var(--cropLeft),
        black var(--cropLeft),
        black calc(100% - var(--cropRight)),
        transparent calc(100% - var(--cropRight)),
        transparent 100%)
}

JS

// Vazio

Fields

{
    "credits1": {
        "type": "checkbox",
        "value": true,
        "label": "Detalhes de como fazer a configuração podem ser encontrados no site toolbox.danifluffy.dev :)",
        "group": "Fonte da Web | DaniFluffyCat ^^"
    },
    "credits2": {
        "type": "text",
        "label": "Você pode copiar o link abaixo:",
        "value": "toolbox.danifluffy.dev",
        "group": "Fonte da Web | DaniFluffyCat ^^"
    },
    "URL": {
        "group": "URL",
        "type": "text",
        "label": "URL",
        "value": "URL"
    },
    "placeholderActive": {
        "group": "URL",
        "type": "checkbox",
        "value": true,
        "label": "Exibir placeholder"
    },
    "cropTop": {
        "group": "Recortar",
        "type": "number",
        "label": "Cima",
        "value": 0,
        "min": 0,
        "max": 4000,
        "step": 1
    },
    "cropBottom": {
        "group": "Recortar",
        "type": "number",
        "label": "Baixo",
        "value": 0,
        "min": 0,
        "max": 4000,
        "step": 1
    },
    "cropLeft": {
        "group": "Recortar",
        "type": "number",
        "label": "Esquerda",
        "value": 0,
        "min": 0,
        "max": 4000,
        "step": 1
    },
    "cropRight": {
        "group": "Recortar",
        "type": "number",
        "label": "Direita",
        "value": 0,
        "min": 0,
        "max": 4000,
        "step": 1
    }
}

☕ Te ajudei? Me manda um cafézinho ^^

[email protected]