Vueでobsプッシュフローを取得する方法

ライブ ブロードキャスト業界の継続的な発展に伴い、ますます多くの開発者がライブ ブロードキャスト テクノロジーに注目し始めています。ライブブロードキャストのプロセスにおいて、ストリーミングは重要な部分です。 Vue フレームワークを使用する開発者にとって、obs プッシュ ストリーミングをどのように取得するかも重要な問題です。この記事ではvueでobsのプッシュフローを取得する方法を紹介します。

1. obs とは

#OBS は、無料のオープンソース ソフトウェアであり、プロフェッショナルなビデオ ライブ ブロードキャスト ソフトウェアです。 OBS は Windows および MacOS でのライブ ブロードキャストをサポートしており、ユーザーはライブ ブロードキャスト中に字幕の追加、フィルター、ビデオ画面の調整などを行うことができます。

2. vue を使用して obs プッシュ フローを取得します

1. obs をインストールします

まず、公式 Web サイトからダウンロードしてインストールできる OBS ソフトウェアをインストールする必要があります。または GitHub ダウンロードで。

2. obs-websocket プラグインをインストールします

次に、obs-websocket プラグインをインストールする必要があります。このプラグインにより、OBS が WebSocket 接続をサポートできるようになり、ブラウザとOBS間の接続。 obs-websocket プラグインのインストール方法は次のとおりです。

(1) OBS ソフトウェアの「ツール」メニューを開き、「スクリプト」オプションを選択します。

(2) 「新規」ボタンをクリックし、スクリプト名を入力し、「Lua Script」(Lua スクリプト)を選択して「OK」ボタンをクリックします。

(3) 次のコードを入力します:

obs = obslua

websocket = require('websocket')

ws = nil

obs.obs_register_output_format('WebSockets 出力', 'WebSockets 出力',

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 サービス', '',

function(設定)

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. vue プロジェクトでの obs プッシュ フローの取得

vue プロジェクトでの OBS プッシュ フローの使用は、obs を呼び出すことで提供できます。 -websocket プラグイン obs プッシュ ストリームを取得するためのインターフェイス。 vue プロジェクトの WebSocket を介して OBS に接続し、指定したコマンド (プッシュの開始、プッシュの一時停止、プッシュの停止など) を送信して、OBS のプッシュ ステータスを制御できます。

次のコード例では、Vue.js を使用して 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>

ページ コンポーネントが読み込まれると、WebSocket 経由で OBS に接続し、指定されたコマンドを送信します。ソケットが OBS によってプッシュされたデータを受信すると、データ内のビデオ ストリームが自動的に再生されます。ページコンポーネントが破棄されたら、WebSocket 接続を閉じます。

3. vue で OBS プッシュ フローにトランジション エフェクトを追加する

vue では、CSS3 トランジション エフェクトを通じて OBS プッシュ フローにトランジション エフェクトを追加できます。コンポーネント内でtransitionコンポーネントを使用し、enter-active-class属性とleave-active-class属性をカスタム遷移クラス名に設定して、遷移インタラクション効果を追加する効果を実現できます。

次のコード例では、Vue.js と CSS3 を使用して、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>

CSS3 を介してトランジション アニメーション効果を設定し、ユーザーが提供されたプッシュ ストリームからより良い結果を取得できるようにします。 .視聴体験。

4. 概要

この記事では、Vue.js で OBS プッシュ フローを取得する方法を紹介します。 obs-websocketプラグインが提供するインターフェースを呼び出すことで、インターフェースの制御動作を実現します。同時に、CSS3 トランジション効果の追加をサポートし、ユーザーにより良い視聴体験を提供します。この記事の概要は、誰もが Vue.js および OBS アプリケーションの開発とアプリケーションをよりよく習得するのに役立つと信じています。

以上がVueでobsプッシュフローを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。