So erhalten Sie Obs-Push-Flow in Vue

Mit der kontinuierlichen Entwicklung der Live-Übertragungsbranche beginnen immer mehr Entwickler, der Live-Übertragungstechnologie Aufmerksamkeit zu schenken. Im Live-Übertragungsprozess ist Streaming ein entscheidender Teil. Für Entwickler, die das Vue-Framework verwenden, ist auch die Frage, wie man Obs-Push-Streaming erhält, ein wichtiges Thema. In diesem Artikel wird erläutert, wie Sie den Obs-Push-Flow in Vue erhalten.

1. Was ist obs

OBS ist eine kostenlose Open-Source-Software und eine professionelle Video-Live-Übertragungssoftware. OBS kann Live-Übertragungen unter Windows und MacOS unterstützen. Benutzer können während der Live-Übertragung Untertitel und Filter hinzufügen, den Videobildschirm anpassen.

2. Verwenden Sie Vue, um den Obs-Push-Flow zu erhalten installiert von der offiziellen Website, auch zum Download auf GitHub verfügbar.

2. Installieren Sie das obs-websocket-Plugin

Als nächstes müssen Sie das obs-websocket-Plugin installieren, das es OBS ermöglicht, WebSockets-Verbindungen zu unterstützen die Verbindung zwischen dem Browser und OBS. Die Methode zur Installation des obs-websocket-Plugins ist wie folgt:

(1) Öffnen Sie das Menü „Extras“ in der OBS-Software und wählen Sie die Option „Skripte“.

(2) Klicken Sie auf die Schaltfläche „Neu“, geben Sie den Skriptnamen ein, wählen Sie dann „Lua Script“ (Lua-Skript) aus und klicken Sie auf die Schaltfläche „OK“.

(3) Geben Sie den folgenden Code ein:

obs = obslua

websocket = require('websocket')

#🎜🎜 # ws = nil

obs.obs_register_output_format('WebSockets Output', 'WebSockets Output',

function(settings)

local port = obs.obs_data_get_int(settings, 'port')
local password = obs.obs_data_get_string(settings, 'password')

ws = websocket.new_client('ws://localhost:' .. tostring(port) .. 
    '?password=' .. password)

end, function()#🎜 🎜 #

 ws = nil

end

)

obs.obs_register_service('WebSockets Service', '',

function(settings)

local port = obs.obs_data_get_int(settings, 'port')
local password = obs.obs_data_get_string(settings, 'password')

ws = websocket.new_server('127.0.0.1', port)
ws.onmessage = function(ws,message)
    if message == password then
        ws.send('authenticated')
    end
end

end , function()

ws:close()
ws = nil

end)

obs.obs_register_source({

type = obs.OBS_SOURCE_TYPE_INPUT,
id = 'websocket_input',
output_flags = obs.OBS_SOURCE_VIDEO,
get_name = function()
    return 'WebSockets Input'
end,
get_defaults = function(settings)
    obs.obs_data_set_default_int(settings, 'port', 4444)
    obs.obs_data_set_default_string(settings, 'password', 'password123')
end,
create = function(source, settings)
    local port = obs.obs_data_get_int(settings, 'port')
    local password = obs.obs_data_get_string(settings, 'password')
    local video_format = obs.obs_source_get_base_source(source).b
    source.websocket = websocket.new_client('ws://localhost:' .. 
        tostring(port) .. '?password=' .. password)
    source.websocket.onmessage = function(ws, message)
        local packet = msgpack.unpack(message)
        if packet ~= nil then
            if packet.type == 'video' then
                -- do something with the video data
            end
        end
    end
    obs.obs_source_set_output_format(source, 'WebSockets Output',
        video_format)
    return source
end,
get_properties = function(source)
    local props = obs.obs_properties_create()
    obs.obs_properties_add_int(props, 'port', 'Port', 1024, 65535, 1)
    obs.obs_properties_add_text(props, 'password', 'Password',
     obs.OBS_TEXT_DEFAULT)
    return props
end

})

3. Holen Sie sich den Obs-Push-Flow im Vue-Projekt

Wenn Sie den OBS-Push-Flow im Vue-Projekt verwenden, können Sie den Obs-Push-Flow abrufen, indem Sie die vom obs-websocket-Plugin bereitgestellte Schnittstelle aufrufen. Sie können über WebSocket im Vue-Projekt eine Verbindung zu OBS herstellen und bestimmte Befehle senden (z. B. Push starten, Push anhalten, Push stoppen usw.), um den Push-Status von OBS zu steuern.

Das folgende Codebeispiel verwendet Vue.js, um den OBS-Push-Flow zu erhalten:

<template>
  <div>
    <video ref="video" autoplay></video>
  </div>
</template>

<script>
import WebSocket from 'ws'

export default {
  data() {
    return {
      socket: null
    }
  },
  mounted() {
    this.socket = new WebSocket('ws://localhost:4444')
    this.socket.addEventListener('open', () => {
      console.log('Connection opened to OBS')
      this.socket.send(JSON.stringify({
        type: 'start',
        data: {
          width: 1920,
          height: 1080
        }
      }))
    })
    this.socket.addEventListener('message', evt => {
      const data = JSON.parse(evt.data)
      if (data.type === 'video') {
        this.$refs.video.src = URL.createObjectURL(new Blob([data.data]))
      }
    })
    this.socket.addEventListener('error', evt => {
      console.error('Socket error:', evt)
    })
  },
  beforeDestroy() {
    this.socket.close()
  }
}
</script>

Wenn die Seitenkomponente geladen wird, wird OBS über WebSocket verbunden und der angegebene Befehl wird ausgeführt gesendet. Wenn der Socket die von OBS übertragenen Daten empfängt, spielt er automatisch den Videostream in den Daten ab. Wenn die Seitenkomponente zerstört ist, schließen Sie die WebSocket-Verbindung.

3. Übergangseffekte zum OBS-Push-Flow in Vue hinzufügen

In Vue können Sie Übergangseffekte zum OBS-Push-Flow über CSS3-Übergangseffekte hinzufügen. Sie können die Übergangskomponente in der Komponente verwenden und die Attribute „Enter-Active-Class“ und „Leave-Active-Class“ auf benutzerdefinierte Übergangsklassennamen festlegen, um den Effekt des Hinzufügens von Übergangsinteraktionseffekten zu erzielen.

Das folgende Codebeispiel verwendet Vue.js und CSS3, um Übergangseffekte zu OBS-Push-Streams hinzuzufügen:

<template>
  <div>
    <transition name="fade">
      <video ref="video" autoplay></video>
    </transition>
  </div>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Legen Sie Übergangsanimationseffekte über CSS3 fest, damit Benutzer sich in den bereitgestellten Bereichen bewegen können Push-Stream Holen Sie sich ein besseres Seherlebnis.

4. Zusammenfassung

Dieser Artikel stellt vor, wie man den OBS-Push-Flow in Vue.js erhält. Durch Aufrufen der vom obs-websocket-Plugin bereitgestellten Schnittstelle wird der Schnittstellensteuerungsvorgang realisiert. Gleichzeitig unterstützt es das Hinzufügen von CSS3-Übergangseffekten, um Benutzern ein besseres Seherlebnis zu bieten. Ich glaube, dass die Einführung in diesem Artikel jedem helfen kann, die Entwicklung und Anwendung von Vue.js- und OBS-Anwendungen besser zu beherrschen.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie Obs-Push-Flow in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!