Bagaimana untuk mendapatkan aliran tolak obs dalam vue

Dengan perkembangan berterusan industri siaran langsung, semakin ramai pembangun mula memberi perhatian kepada teknologi siaran langsung. Dalam proses siaran langsung, penstriman adalah bahagian yang penting. Bagi pembangun yang menggunakan rangka kerja Vue, cara mendapatkan penstriman tolak obs juga merupakan isu penting. Artikel ini akan memperkenalkan cara mendapatkan aliran tolak obs dalam vue.

1. Apa itu obs

OBS ialah perisian sumber terbuka percuma dan perisian siaran langsung video profesional. OBS boleh menyokong siaran langsung di bawah Windows dan MacOS Pengguna boleh menambah sari kata, penapis, melaraskan skrin video, dsb. semasa siaran langsung.

2. Gunakan vue untuk mendapatkan obs push flow

1 Pasang obs

Mula-mula anda perlu memasang perisian OBS, yang boleh dimuat turun dan dipasang dari tapak web rasmi atau pada Muat Turun GitHub.

2. Pasang pemalam obs-websocket

Seterusnya, anda perlu memasang pemalam obs-websocket ini membolehkan OBS menyokong sambungan WebSockets, dengan itu merealisasikan sambungan antara penyemak imbas dan OBS. Kaedah untuk memasang pemalam obs-websocket adalah seperti berikut:

(1) Buka menu "Tools" dalam perisian OBS dan pilih pilihan "Skrip".

(2) Klik butang "Baru", masukkan nama skrip, kemudian pilih "Lua Script" dan klik butang "OK".

(3) Masukkan kod berikut:

obs = obslua

websocket = require('websocket')

ws = nil

obs.obs_register_output_format('WebSockets Output', 'WebSockets Output',
fungsi(tetapan)

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', '',
fungsi(tetapan)

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 Dapatkan aliran tolak obs dalam projek vue

Gunakan OBS dalam projek vue The. aliran tolak boleh diperolehi dengan memanggil antara muka yang disediakan oleh pemalam obs-websocket. Anda boleh menyambung ke OBS melalui WebSocket dalam projek vue dan menghantar arahan yang ditentukan (seperti mula menolak, jeda menolak, berhenti menolak, dll.) untuk mengawal status tolak OBS.

Contoh kod berikut menggunakan Vue.js untuk mendapatkan aliran tolak 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>

Apabila komponen halaman dimuatkan, OBS akan disambungkan melalui WebSocket dan arahan yang ditentukan akan dihantar. Apabila soket menerima data yang ditolak oleh OBS, ia akan memainkan aliran video secara automatik dalam data. Apabila komponen halaman dimusnahkan, tutup sambungan WebSocket.

3. Tambahkan kesan peralihan kepada aliran tolak OBS dalam vue

Dalam vue, anda boleh menambah kesan peralihan kepada aliran tolak OBS melalui kesan peralihan CSS3. Anda boleh menggunakan komponen peralihan dalam komponen dan tetapkan atribut enter-active-class dan leave-active-class kepada nama kelas peralihan tersuai untuk mencapai kesan menambah kesan interaksi peralihan.

Contoh kod berikut menggunakan Vue.js dan CSS3 untuk menambah kesan peralihan kepada aliran tolak 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>

Tetapkan kesan animasi peralihan melalui CSS3 untuk membolehkan pengguna mendapat lebih banyak faedah daripada yang disediakan tolak aliran.

4. Ringkasan

Artikel ini memperkenalkan cara mendapatkan aliran tolak OBS dalam Vue.js. Dengan memanggil antara muka yang disediakan oleh pemalam obs-websocket, operasi kawalan antara muka direalisasikan. Pada masa yang sama, ia menyokong penambahan kesan peralihan CSS3 untuk memberikan pengguna pengalaman menonton yang lebih baik. Saya percaya bahawa pengenalan dalam artikel ini dapat membantu semua orang menguasai pembangunan dan aplikasi aplikasi Vue.js dan OBS dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan aliran tolak obs dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!