雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

在浏览器内使用obs-websocket-js控制obs录屏

2024-03-07 分类：前端之旅 / 后端之路 阅读(1168) 评论(0)

具体实现代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/obs-websocket-js@5.0.5/dist/obs-ws.min.js"></script>
  </head>
  <body>
    <button id="btn">打开</button>
    <script>
      const makeInit = () => {
        const address = `ws://127.0.0.1:4455`;
        console.log('OBSWebSocket连接中', address)
        return new Promise((resolve, reject) => {
          const obs = new OBSWebSocket();
          obs
            .connect(address)
            .then((res) => {
              console.log(`链接成功`, res);
              resolve(obs);
            })
            .catch((err) => {
              console.warn(err);
            });
        });
      };
      const sleep = (time = 1) => {
        return new Promise((resolve) => {
          setTimeout((_) => resolve(), time * 1000);
        });
      };
      // 获取视频;
      const getVideo = async (content = {}) => {
        console.log(`开始执行`);
        return new Promise(async (resolve, reject) => {
          console.log(`获取参数`, content);
          const {
            length = 10,
            direction,
            text,
            status,
            mp4,
            id,
            wait = 2,
            queryKey = '',
          } = content;
          // 横屏
          const directionConfig =
            +direction === 1
              ? { width: 1280, height: 720 }
              : { width: 720, height: 1280 };
          const obs = await makeInit();
          const playLink = `https://www.baidu.com`;
          const sceneName = "场景";
          const inputName = '浏览器';
          console.log(`全景播放地址`, playLink);
          console.log(`设置屏幕宽高`, directionConfig);
          const setting = {
            baseWidth: directionConfig.width,
            baseHeight: directionConfig.height,
            outputWidth: directionConfig.width,
            outputHeight: directionConfig.height,
          }
          const result =  await obs.call('SetVideoSettings', setting);
          console.log(`全局设置`, setting);
 
          // 新增一个场景!
           try {
            await obs.call('CreateScene', { 'sceneName': sceneName });
           } catch (e) {}
          
          // 切换到这个场景
          // await obs.call('SetCurrentPreviewScene', { 'sceneName': sceneName });
 
          const browser = {
             sceneName: sceneName,
            inputName: inputName,
            inputKind: 'browser_source',
            inputSettings: {
              url: playLink,
              ...directionConfig,
            },
          };
          console.log(`新增浏览器`, directionConfig);
          try {
              await obs.call('CreateInput', browser);
          } catch (e) {
              alert(e.message);
              console.log('没有创建场景');
              return ;
          }
          console.log(`浏览器打开成功`);
          await sleep(wait);
          console.log(`等${wait}秒再执行...`);
          await obs.call(`StartRecord`).then((_) => {
            console.log(`📍开始录制视频`);
            const time = 1000 * parseInt(length);
            console.log(`共录制时长`, time);
            setTimeout((_) => {
              console.log(`现在开始录制`, time);
              obs.call(`StopRecord`).then(async ({ outputPath }) => {
                console.log(`结束录制视频`, outputPath);
                await obs.call('RemoveInput', { inputName });
                console.log(`删除浏览器`);
                await sleep(5);
                console.log(`返回录制视频地址`, outputPath);
                resolve(outputPath);
              });
            }, time);
          });
        });
      };
      const callBack = (mp4, content = {}) => {
        const { id } = content;
        console.log(`生成成功的mp4`, mp4);
      };
 
      document.getElementById('btn').addEventListener('click', getVideo);
    </script>
  </body>
</html>

 

功能比较简单, 可以控制 obs 打开百度录制 10 秒视频后自动关闭!

分享到：更多 ()

相关推荐

  • 将docker安装到D盘或者其他目录
  • 使用 python 给音频增加水印,剪辑压缩后不丢失!
  • nodejs 脚本打包为可执行文件
  • 初学 python 笔记
  • nodejs 同时运行多个脚本
  • 让你的照片动起来
  • 如何使用 nodejs 下载一个 wav 音频
  • macOS 对 Demucs 的支持
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年5月
一 二 三 四 五 六 日
« 二    
 1234
567891011
12131415161718
19202122232425
262728293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说：
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说：
  • Dawn 9年前 (2016-09-16)说：
    call_user_func_array最后的例子是错哦，你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说：
    tp框架设置了全局捕获异常的，这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说：
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔

博客类型

  • 芊云全景
  • 配音兔

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图