利用obs自动小程序开播、切换视频（纯html脚本）

于 2024-08-14 17:44:22 发布
阅读量437 收藏 4
点赞数 3
分类专栏： obs 文章标签： 音视频 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/siennagesen/article/details/141195632
版权

效果：

利用obs配合实现自动小程序开播、切换视频、定时开关播（使用纯html脚本，不用装环境和库啥的）

整体功能实现流程：

一、下载obs

二、安装obs-WebSocket工具

我这下载的是exe版本（zip版本我这老是安装失败，exe一键运行就方便很多），如果科学不易的也可下载我的免费资源（我这个版本其实很新了）我的共享免费资源icon-default.png?t=N7T8https://download.csdn.net/download/siennagesen/89639203，

三、obs端设置

        1、

        2、

        3、点击下方 应用+确定

四、脚本设置

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OBS 推流控制</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        button {
            margin: 5px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>OBS 手动推流控制</h1>
    <div>
        <br>
        <button onclick="startStreaming5()">获取当前推流状态</button>
        <button onclick="startStreaming1()">停止推流</button>
        <button onclick="startStreaming2()">设置推流</button>
        <button onclick="startStreaming3()">文件设置</button>
        <button onclick="startStreaming4()">开始推流</button>
        <button onclick="deleteNote()">删除日志</button>
    </div>
    <h1>OBS 自动推流控制</h1>
    <div>
        <button id="startBtn">开启自动挡推流</button>
        <button id="stopBtn" disabled>关闭自动挡推流</button>
    </div>
    <h1>OBS 推流控制日志</h1>
    <pre id="output"></pre>

   <script>
    const url = 'ws://localhost:4455'; // OBS WebSocket 服务器地址
    let previousData = null; // 存储上次获取的数据
    let intervalId = null; // 存储定时器的ID
    let socket;
    // API接口地址
    const apiUrl = '你的接口路径，用于给你返回参数';

    function startMonitoring() {
        if (!intervalId) {
            intervalId = setInterval(fetchData, 5000);
            document.getElementById('startBtn').disabled = true;
            document.getElementById('stopBtn').disabled = false;
            console.log('监测已开始。');
        }
    }

    function stopMonitoring() {
        if (intervalId) {
            clearInterval(intervalId);
            intervalId = null;
            document.getElementById('startBtn').disabled = false;
            document.getElementById('stopBtn').disabled = true;
            startStreaming1();
            console.log('监测已停止。');
        }
    }

    document.getElementById('startBtn').addEventListener('click', startMonitoring);
    document.getElementById('stopBtn').addEventListener('click', stopMonitoring);

    function updateParameters(newData) {
            // 在这里执行更新参数的逻辑
            console.log('参数已更新:', newData);
        }
        
    function fetchData() {
        fetch(apiUrl)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误：' + response.status);
                }
                return response.json();
            })
            .then(data => {
                // 检查type参数
                console.log(data.data,'data.data',data.data.type == 1);
                if (data.data.type == 1) {
                    // 如果有变化，则更新参数
                    if (JSON.stringify(data.data) !== JSON.stringify(previousData)) {
                        previousData = { ...data.data }; // 更新previousData为新的数据
                        updateParameters(data.data);
                        startStreaming2();
                        startStreaming3();
                        startStreaming4();
                        startStreaming5();
                    }
                } else if (data.data.type == 0) {
                    console.log('type为0，不执行操作。');
                }

            })
    }
     
    let getStreamInfo = null;
    fetch(apiUrl)
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应错误：' + response.status);
            }
            return response.json();
        })
        .then(data => {
            // 处理返回的数据
            getStreamInfo = data.data;
        })
    // 连接到 WebSocket
    function connect() {
        socket = new WebSocket(url);

        // WebSocket 打开时的回调
        socket.onopen = () => {
            log('连接成功！');
            
            // 发送 Identify 消息进行身份验证
            const identifyPayload = {
                "op": 1, // 操作码 1 表示 Identify 消息
                "d": {
                    "rpcVersion": 1, // 根据 API 版本设置
                }
            };
            
            socket.send(JSON.stringify(identifyPayload));
            log('发送 Identify 请求');
        };

        // 接收到消息时的回调
        socket.onmessage = (event) => {
            const message = JSON.parse(event.data);
            
            if (message.op === 2) {
                if (message.d.authentication == null) {
                    log('认证成功！');
                } else {
                    log('认证失败，需要提供认证信息');
                }
            } else if (message.op === 5) {
                log('服务器事件: ' + JSON.stringify(message.d));
            } else {
                log('收到消息: ' + event.data);
            }
        };

        // 发生错误时的回调
        socket.onerror = (error) => {
            log('WebSocket 错误: ' + error.message);
        };

        // 连接关闭时的回调
        socket.onclose = (ee) => {
            log('连接已关闭');
        };
    }

    // 停止推流
    async function startStreaming1() {
        if (socket.readyState !== WebSocket.OPEN) {
            log('WebSocket 尚未连接，请稍后再试。');
            connect();
            return;
        }
        // 停止推流
        await sendRequest({
            "op": 6, 
            "d": {
                "requestType": "StopStream",
                "requestId": "1"
            }
        })
    }
    // 推流设置
    async function startStreaming2() {
        console.log('开始推流设置');
        if (socket.readyState !== WebSocket.OPEN) {
            log('WebSocket 尚未连接，请稍后再试。');
            connect();
            return;
        }


        // 1. 设置推流地址
        await sendRequest({
            "op": 6, // Request 操作码
            "d": {
                "requestType": "SetStreamServiceSettings",
                "requestId": "1",
                "requestData": {
                "streamServiceType": "rtmp_custom",
                "streamServiceSettings": {
                "server": getStreamInfo.streamUrl,
                "key": getStreamInfo.streamKey,
                "use_auth": false
                }
            }
            }
        });
    }
    // 文件设置
    async function startStreaming3() {
        console.log('开始文件设置');
        if (socket.readyState !== WebSocket.OPEN) {
            log('WebSocket 尚未连接，请稍后再试。');
            connect();
            return;
        }
        
        log(`获取视频文件路径: ${getStreamInfo.videoPath}`);

        // 2. 切换视频文件

        await sendRequest({
            "op": 6, // Request 操作码
            "d": {
                "requestType": "SetInputSettings",
                "requestId": "3",
                "requestData": {
                "inputName": "媒体源", 
                "inputSettings": {
                "local_file": getStreamInfo.videoPath
                }
                }
            }
        });
    }
    // 开始推流
    async function startStreaming4() {
        console.log('开始推流');
        if (socket.readyState !== WebSocket.OPEN) {
            log('WebSocket 尚未连接，请稍后再试。');
            connect();
            return;
        }

        // 3. 开始推流
        await sendRequest({
            "op": 6, // Request 操作码
            "d": {
                "requestType": "StartStream",
                "requestId": "4"
            }
        });
        log('发送开始推流请求');
    }

    // 获取当前推流状态
    async function startStreaming5() {
        console.log('开始获取推流状态');
        if (socket.readyState !== WebSocket.OPEN) {
            log('WebSocket 尚未连接，请稍后再试。');
            connect();
            return;
        }

        await sendRequest(
            {
                "op": 6,
                "d": {
                    "requestType": "GetStreamStatus",
                    "requestId": "1"
                }
            }

        );
    }
    

    function sendRequest(payload) {
        return new Promise((resolve, reject) => {
            socket.send(JSON.stringify(payload));
            // 等待响应并处理
            socket.onmessage = (event) => {
                const message = JSON.parse(event.data);
				
                if (message.op === 7 && message.d.requestId === payload.d.requestId) {
                    if (message.d.requestStatus && message.d.requestStatus.code === 100) {
                        resolve(message.d.requestStatus);
                    } else {
                        reject(new Error(`操作失败: ${message.d.responseData.error}`));
                    }
                }
            };
        });
    }


    // 日志输出
    function log(message) {
        const output = document.getElementById('output');
        output.textContent += message + '\n'; // 将日志信息添加到输出区域
    }

    // 连接 WebSocket
    connect();
    //清空日志
    function deleteNote() {
        const output = document.getElementById('output');
        output.textContent = ''; // 将日志信息清空
    }
</script>



</body>
</html>

        1、纯html书写，不用任何环境和任何库，甚至jquery都没用

        2、全参数设置的文档地址

        3、实现功能（功能解释）：

小程序直播可查看此文档，实现后端接口控制的开播关播，前端的这个html页面接收到下方参数后，定时循环接口，若接口type为1证明已经开播，需要推流了，之后根据接口参数设置推流地址和播放的视频文件后，进行推流即可。

至于定时循环，则体现在后端可定时根据提前准备好的参数，请求官方，创建对应直播间，之后本地脚本也修改成对应文件后进行推流。

"type": "1",                                                                                 //type为1的时候表示正在直播（直播间已打开）为0的时候表示直播还未开始/直播已结束

"streamUrl": "rtmp://wxalivepush.weixin.qq.com/live/",        
//为推流地址，有的可能这个参数和下一个参数的推流地址合在一块的，可以拆分一下

"streamKey": "wx8c57701ea-401?txSecret=14b6b7392b7fed7",        
//推流密钥，有可能跟上一个参数连在一块（官方给咱们的时候）

"videoPath": "F:/FFOutput/new/示例视频.mp4"          
//要打开视频的本地链接，必须绝对路径，需要提前确定并提供好，跟obs一个电脑上（之后可以改成网络链接）

注意：

1、尽量用一致版本的Obs-WebSocket插件配合脚本，一开始不熟悉，看的是最新文档，但调用的修改参数是旧的，后来发现不可运行，才改成新的脚本

2、message 这个参数中有相关返回结果，如果运行出错，请console.log()打印，点开查看一下报错，可用ai等工具查询一下问题

所念不知所起
关注
专栏目录
OBS Studio API 中用于控制媒体源（如视频文件和音乐文件播放）的方法
吃面不喝汤的博客
06-13 187
这些函数提供了丰富的控制接口，可以实现对媒体播放的详尽管理，使得 OBS 不仅能用于直播和录制视频，也能作为媒体播放的平台。
【Python】OBS 脚本
最新发布
风高秋月白，雨霁晚霞红
08-17 1252
obs视频录制（直播）软件的python脚本。
OBS-scripts:OBS文本小部件的简单脚本
03-31
OBS脚本 OBS文本小部件的简单脚本。
obs-build：OBS构建脚本，可与OBS一起使用或独立使用
02-05
obs-build：OBS构建脚本，可与OBS一起使用或独立使用
obs-scene-execute-command-script:OBS脚本，无论何时激活场景，都可以执行任何CLI命令
04-05
obs-scene-执行命令脚本 OBS脚本，无论何时激活场景，都可以执行任何CLI命令。 对...有用： 激活OBS场景时，加载任何PTZ摄像机的预设。 激活OBS场景后，执行任何可执行任何操作的命令。 安装 下载zip文件或targz文件 将归档文件提取到可以保留的位置。 在OBS中，打开“ Tools => Scripts 。 单击+然后在scene_execute_command.lua文件的位置选择scene_execute_command.lua文件。 该脚本将显示在“ Loaded scripts的脚本”下。 点击它。 您将看到脚本的描述和设置。 每当添加/重命名场景时，在脚本设置将显示该新场景的设置之前，您都必须按“ Reload Scripts按钮。 用法 通过在命令行上执行命令来测试要执行的命令。 查看针对不同场景执行命令时命令的哪一部分会有所不同。
如何编写OBS的脚本
m0_57236802的博客
09-10 2407
定义你想要自动化或自定义的功能。
OBS (27版本) 中音视频数据流向总结
05-26
OBS音视频数据流向总结 OBS（Open Broadcasting Software）是一个流行的直播软件，其音视频数据流向是整个直播系统的核心组件。下面是OBS音视频数据流向的总结： 音视频数据流向 音视频数据流向是指音视频数据从...
【OBS】视频直播录制软件
06-24
【OBS】视频直播录制软件【OBS】视频直播录制软件【OBS】视频直播录制软件【OBS】视频直播录制软件【OBS】视频直播录制软件【OBS】视频直播录制软件【OBS】视频直播录制软件【OBS】视频直播录制软件【OBS】视频直播...
obs-文本-脚本 date-and-time.lua
07-14
obs-文本-脚本 date-and-time.lua
【OBS Studio】脚本自动生成大量场景思考实践
txq0211的博客
01-26 2663
OBS脚本自动生成大量场景思考实践
LiveTime:OBS Python脚本允许您在文本源中显示正常运行时间
03-06
直播时间 OBS Python脚本，可让您在文本源中显示正常运行时间。 安装 以.zip格式下载此存储库，解压缩并将livetime.py移到OBS脚本目录中。 这是一个python文件，因此您需要安装最新的OBS支持版本的 。 通过“脚本”窗口中的“ Python设置”选项卡将OBS指向Python安装目录。 将livetime.py添加为脚本。 享受！ 补丁说明 v1.1.1 修复了多次按下启动计时器会导致计数加快的问题 v1.1 添加了{hh} {mm} {ss}作为格式设置选项
OBS_Lua_CustomBounce：我用Lua为OBS编写的自定义退回脚本
03-03
OBS_Lua_CustomBounce 我用Lua为OBS编写的Custom Bounce脚本 链接： 脚本示例/示例 ，深入的脚本教程 提示：您可以设置热键来切换OBS中的脚本：“文件”->“设置”->“热键” 默认的热键名称是“ MF Toggle Bounce”，但是可以通过修改HotkeyName字符串（lua脚本的〜第50行）来更改，如果您正在使用脚本的多个实例来创建不同的效果，这将很有用。
OBS-Studio增加自动录制功能总结
12-30
OBS-Studio增加自动录制功能，能将电脑的所有操作抓屏并录制存放在本地硬盘。
OBS编译
longzhilanyuan的博客
05-04 548
Mark：编译OBS的步骤参考https://blog.csdn.net/longji/article/details/52335863编译之后由于需要分离出QT的关系，需要对OBS的项目进行重新定位，因为编译之后很多路径都是绝对路径，需要改为相对路径。已经遇到的问题有两个：1，是frontend-tools的时候.c文件调用.cpp里的函数，由于无法定位到函数实现，所以在相应的hpp文件中加了声...
obs服务起停急脚本
永不放弃的传说
06-15 1701
#!/bin/bash case $1 in    start)   rcmysql         start   rcobsrepserver  start   rcobssrcserver  start   rcobsscheduler  start   rcobsworker     start   rcobsdispatcher start   rcobspublish
python控制obs实现无缝切换场景！obs-websocket-py
爪哇盘古
08-16 6283
SceneName1场景添加一个MediaSourceNameB来源，添加视频A【当数字人视频生成好通过py替换掉这个路径的】可以监听MediaSourceNameB场景的视频是否播放完毕，当播放完毕切换回SceneName场景的循环播放视频。目的是默认播放推流SceneName场景MediaSourceNameA的视频A，也就是不说话时的视频。SceneName场景的MediaSourceNameA的视频A设置循环播放。会告诉你它是干什么的，传什么参数，会得到什么响应！对于传参名，文档里有！
OBS实现直播解决方案【html实现直播】
weixin_34326558的博客
05-22 1316
项目的需要，要整一个视频直播，但又不想在其他平台那种直播室盗链展示，那我就直接用播放器来实现rtmp流媒体服务器推流吧！没废话，走起 1.你要有一个媒体服务器，暂时用【盘古云】，这个还好，算是不错的平台了。注册就能用，貌似免费的一样，哈哈不管那么多先搭建一个，看图： 图解：【1】菜单，进入创建一个媒体服务 【2】开始创建，这里自己需要填的自己填 【3】创建好之后，点击【更多】【高级设...
OBS （Open Broadcaster Software）
lengye7的博客
01-26 1602
Open Broadcaster Software是一个免费的开源的视频录制和视频实时流软件。其有多种功能并广泛使用在视频采集，直播等领域。   Open Broadcaster Software 它支持和包含以下功能： [1]  支持H264（X264）和 AAC 编码。 支持Intel Quick Sync Video (QSV) 和 NVENC。 无限量的场景和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值