แชร์ภาพ หลายหน้าจอ ด้วย computer เครื่องเดียว จัดการด้วย OBS + Python

สำหรับตอนนี้ จะเกี่ยวกับการใช้งาน OBS ซึ่งเป็น program จัดการหน้าจอ recording & streaming ร่วมกับการใช้ python script ในการเปลี่ยนรูปในแต่ละหน้าจอ ให้แตกต่างกัน หรือ ใส่ข้อความ โดยจัดการด้วย computer เครื่องเดียว

concept diagram

เริ่มต้น

Download OBS และทำการติดตั้งให้เรียบร้อย

[embed]Download | OBS Download OBS Studio for Windows, Mac or Linuxobsproject.com

โดยการสั่งงานจาก python ไปหา OBS เราจะใช้งานผ่าน websocket ของ OBS ซึ่งเป็น feature ที่อยู่ภายใน เราต้องเปิดใช้งานก่อน

Enable websocket feature

จากนั้นเปิด program แล้วไปที่ Tool -> Websocket Server Settings ทำการ Enble websocket , ใส่ port และ ใส่ password ให้เรียบร้อย แล้วกด apply

Create scene & image source

จากนั้นทำการสร้าง scene ตามจำนวนหน้าจอ ซึ่ง scene นี่แหละที่จะเป็นตัวส่งภาพไปที่หน้าจอจริงๆ จากนั้นในส่วนของ source ให้สร้าง source image ในแต่ละ scene โดยตั้งชื่อให้ไม่เหมือนกัน ส่วน image path ยังม่ต้องใส่ เพราะเราจะให้ python ส่งข้อมูลมาเปลี่ยนตรงจุดนี้

Python scripts

ทำการติดตั้ง Library

pip install obs-websocket-py

import time
from obswebsocket import obsws, requests
import os

# ตั้งค่าการเชื่อมต่อ
host = "localhost"
port = 4455
password = "your password"

ws = obsws(host, port, password)
ws.connect()

def change_image(source_name, file_path):
    """ฟังก์ชันสำหรับเปลี่ยนรูปภาพใน Source ที่ระบุ"""
    try:
        # ใช้คำสั่ง SetInputSettings เพื่อเปลี่ยน path ของรูปภาพ
        ws.call(requests.SetInputSettings(
            inputName=source_name,
            inputSettings={
                'file': file_path
            }
        ))
        print(f"Changed {source_name} to {file_path}")
    except Exception as e:
        print(f"Error: {e}")

def main():
    try:  
        # สั่งเปลี่ยนรูปจอที่ 1
        change_image("Image1", r"D:\VSCODE\MyPython\OBStest\test1.png")

        # สั่งเปลี่ยนรูปจอที่ 2
        change_image("Image2", r"D:\VSCODE\MyPython\OBStest\test2.png")

        สั่งเปลี่ยนรูปจอที่ 3
        change_image("Image3", r"D:\VSCODE\MyPython\OBStest\test3.png")

        # สั่งเปลี่ยนรูปจอที่ 4
        change_image("Image4", r"D:\VSCODE\MyPython\OBStest\test4.png")

        # ใช้เป็นแบบ loop เพื่อความง่าย
        # for id,img in enumerate(list_img):
        #    change_image(f"Image{id + 1}", rf"D:\VSCODE\MyPython\OBStest\test{img}.png")

    finally:
        ws.disconnect()

if __name__ == "__main__":
    main(list_img)

ทำการใส่ host , port , password ตามที่เราใส่ OBS ให้เรียบร้อย โดย python จะส่งคำสั่งผ่าน request คำสั่งหลักๆที่จะเปลี่ยนข้อมูลใน OBS คือ SetInputSettings ซึ่งสามารถเปลี่ยนชื่อ source และข้อมูลภายในได้ ซึ่งในตัวอย่างนี้ เราจะเปลี่ยน path ของ source image

Test image changed in multi monitor view

จากนั้นไปที่ view -> Open Multiview -> New window จะได้หน้าต่างใหม่มา

Multiview

เนื่องจากตอนทดสอบ ไม่มีจอจริงๆให้ใช้งานมากถึง 4 จอ เราเลยจะใช้หน้าต่างนี้ ดูภาพในแต่ละหน้าจอ เพื่อตรวจสอบว่า script ที่รันใช้งานได้หรือไม่ หลังทดสอบใช้งานดู จะเห็นว่าสามารถสั่งเปลี่ยนภาพได้แล้ว

ปรับปรุงเพิ่ม ให้มี GUI รับค่า

import tkinter as tk
from obswebsocket import obsws, requests
import os

IMAGE_MAP = {
    "1": [1,2,3,4],
    "2": [4,3,2,1],
    "3": [1,2,1,3],
    "4": [4,2,4,1]
}

OBS_HOST = "localhost"
OBS_PORT = 4455
OBS_PASSWORD = "admin@1234"
MAIN_PATH = r"D:\VSCODE\MyPython\OBStest\image"

class SimpleControl:
    def __init__(self, root):
        self.root = root
        self.root.title("OBS Controller")
        self.root.geometry("250x150")

        try:
            self.ws = obsws(OBS_HOST, OBS_PORT, OBS_PASSWORD)
            self.ws.connect()
            self.status_label = tk.Label(root, text="OBS Connected", fg="green")
        except:
            self.ws = None
            self.status_label = tk.Label(root, text="OBS Disconnected", fg="red")

        self.status_label.pack(pady=5)

        tk.Label(root, text="Enter Number (1-9):", font=('Arial', 12)).pack()

        self.entry_var = tk.StringVar()
        self.entry_var.trace("w", self.process_input)
        self.entry = tk.Entry(root, textvariable=self.entry_var, font=('Arial', 24), justify='center', width=5)
        self.entry.pack(pady=10)
        self.entry.focus_set() # ให้ Cursor พร้อมพิมพ์ทันที

    def process_input(self, *args):
        val = self.entry_var.get()

        # ถ้ามีข้อมูล และเป็นเลขที่เราตั้งค่าไว้
        if val in IMAGE_MAP:
            image_path = IMAGE_MAP[val]
            self.change_obs_image(image_path)

            # ลบเลขในช่องออกเพื่อให้พร้อมรับเลขถัดไป (Optional)
            self.root.after(500, lambda: self.entry.delete(0, tk.END))

    def change_obs_image(self, list_img):
        if self.ws:
            try:
                for id,img in enumerate(list_img): 
                    self.ws.call(requests.SetInputSettings(
                        inputName=f"Image{id + 1}", # ชื่อ Source ใน OBS
                        inputSettings={'file': os.path.join(MAIN_PATH,f"test{img}.png")}
                    ))
                    print(f"Sent to OBS: {img}")
            except Exception as e:
                print(f"Error: {e}")

if __name__ == "__main__":
    root = tk.Tk()
    app = SimpleControl(root)
    root.mainloop()

test change image with GUI

ลองเปลี่ยน source เป็น text บ้าง

Add text source

หลังจากเราเปลี่ยน source image ได้แล้ว เรามาลองเปลี่ยน source text บ้าง โดยทำคล้ายกัน แต่รอบนี้ เราต้องการให้ text เป็นข้อความเดียวกันในทุกๆหน้าจอ เราเลยจะใช้ชื่อเดียวกัน ในทุก scene เลยใช้วิธีเลือกจาก Add Existing

import time
from obswebsocket import obsws, requests
import os

# ตั้งค่าการเชื่อมต่อ
host = "localhost"
port = 4455
password = "your password"

ws = obsws(host, port, password)
ws.connect()

def change_image(source_name, file_path):
    """ฟังก์ชันสำหรับเปลี่ยนรูปภาพใน Source ที่ระบุ"""
    try:
        # ใช้คำสั่ง SetInputSettings เพื่อเปลี่ยน path ของรูปภาพ
        ws.call(requests.SetInputSettings(
            inputName=source_name,
            inputSettings={
                'file': file_path
            }
        ))
        print(f"Changed {source_name} to {file_path}")
    except Exception as e:
        print(f"Error: {e}")

def change_text(source_name, textvalue):
    """ฟังก์ชันสำหรับเปลี่ยน text ใน Source ที่ระบุ"""
    try:
        # ใช้คำสั่ง SetInputSettings เพื่อเปลี่ยน path ของรูปภาพ
        ws.call(requests.SetInputSettings(
            inputName=source_name,
            inputSettings={
                'text': f"Model: {textvalue}"
            }
        ))
        print(f"Changed {source_name} to {textvalue}")
    except Exception as e:
        print(f"Error: {e}")

def main():
    try:  
      for id,img in enumerate(list_img):
            change_image(f"Image{id + 1}", os.path.join(main_path,f"test{img}.png"))
            change_text("GetModel", "AAABBBCCC")

    finally:
        ws.disconnect()

if __name__ == "__main__":
    main(list_img)

test send text & image

ทดสอบแล้ว จะเห็นว่า รูปแต่ละจอ ไม่เหมือนกัน แต่แสดง text เป็นแบบเดียวกัน

set to real screen

ในการใช้งานจริง เราจะเซต Open scene projector เป็นจอจริงๆที่เราใช้งาน

Tips

ปัญหาที่เจอจากการใช้จริง คือ หลังจากปิด OBS ไปแล้ว ค่าที่เราเซตไว้ทั้งหมด จะหายไป วิธีแก้คือ ไปที่ File -> Settings -> General -> Project -> Save projectors on Exit คราวนี้ ทุกครั้งที่ออกจาก program ระบบจะ save project ให้ทันที เมื่อเราเปิดมาใหม่ ค่าทุกอย่างจะอยู่เหมือนเดิม

save on exit