Comment obtenir le flux push d'obs dans vue

Avec le développement continu de l'industrie de la diffusion en direct, de plus en plus de développeurs commencent à s'intéresser à la technologie de diffusion en direct. Dans le processus de diffusion en direct, le streaming est un élément crucial. Pour les développeurs utilisant le framework Vue, comment obtenir le streaming push d'obs est également une question importante. Cet article explique comment obtenir le flux push d'obs dans vue.

1. Qu'est-ce qu'obs

OBS est un logiciel open source gratuit et un logiciel professionnel de diffusion vidéo en direct. OBS peut prendre en charge la diffusion en direct sous Windows et MacOS. Les utilisateurs peuvent ajouter des sous-titres, des filtres, ajuster l'écran vidéo, etc. pendant la diffusion en direct.

2. Utilisez vue pour obtenir le flux push obs

1. Installez obs

Vous devez d'abord installer le logiciel OBS, qui peut être téléchargé et installé à partir du site officiel, ou téléchargé sur GitHub.

2. Installez le plug-in obs-websocket

Ensuite, vous devez installer le plug-in obs-websocket. Ce plug-in permet à OBS de prendre en charge la connexion WebSockets, réalisant ainsi la connexion entre le navigateur et OBS. La méthode pour installer le plug-in obs-websocket est la suivante :

(1) Ouvrez le menu "Outils" dans le logiciel OBS et sélectionnez l'option "Scripts".

(2) Cliquez sur le bouton "Nouveau", entrez le nom du script, puis sélectionnez "Lua Script" et cliquez sur le bouton "OK".

(3) Entrez le code suivant :

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. Obtenez le flux push obs dans le projet vue

Lorsque vous utilisez le flux push OBS dans le projet vue, vous pouvez obtenir le flux push obs en appelant l'interface fournie par le plug-in obs-websocket. . Vous pouvez vous connecter à OBS via WebSocket dans le projet vue et envoyer les commandes spécifiées (telles que démarrer la poussée, mettre en pause la poussée, arrêter de pousser, etc.) pour contrôler l'état de poussée d'OBS.

L'exemple de code suivant utilise Vue.js pour obtenir le flux push OBS :

<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>

Lorsque le composant de page est chargé, OBS sera connecté via WebSocket et la commande spécifiée sera envoyée. Lorsque le socket reçoit les données poussées par OBS, il lit automatiquement le flux vidéo dans les données. Lorsque le composant de page est détruit, fermez la connexion WebSocket.

3. Ajouter des effets de transition au flux push OBS dans vue

Dans vue, vous pouvez ajouter des effets de transition au flux push OBS via les effets de transition CSS3. Vous pouvez utiliser le composant de transition dans le composant et définir les attributs enter-active-class et Leave-active-class sur des noms de classe de transition personnalisés pour obtenir l'effet d'ajouter des effets d'interaction de transition.

L'exemple de code suivant utilise Vue.js et CSS3 pour ajouter des effets de transition aux flux push OBS :

<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>

Définissez les effets d'animation de transition via CSS3 pour permettre aux utilisateurs d'obtenir une meilleure expérience de visualisation dans les flux push fournis.

4. Résumé

Cet article explique comment obtenir le flux push OBS dans Vue.js. En appelant l'interface fournie par le plug-in obs-websocket, l'opération de contrôle de l'interface est réalisée. Dans le même temps, il prend en charge l'ajout d'effets de transition CSS3 pour offrir aux utilisateurs une meilleure expérience visuelle. Je pense que l'introduction de cet article peut aider chacun à mieux maîtriser le développement et l'application des applications Vue.js et OBS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!