You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Telegram托管视频并在React Web App流式播放?附免费平台推荐

Telegram托管视频+React Web App流式播放实现步骤

一、Telegram方案实施流程

1. 搞定Telegram API凭证

  • 去my.telegram.org注册开发者账号,创建应用后拿到api_id和api_hash
  • 用telethon库生成会话字符串(避免每次登录扫码):
    运行这段Python代码,按提示扫码登录:
    from telethon import TelegramClient
    client = TelegramClient('my_session', 你的api_id, '你的api_hash')
    client.start()
    

2. 上传视频到Telegram

  • 把视频传到自己的私密对话或频道(防止被公开访问),上传时必须开启流式支持:
    示例代码(Telethon):
    from telethon import TelegramClient
    client = TelegramClient('my_session', 你的api_id, '你的api_hash')
    
    async def upload():
        await client.start()
        # 传到自己的账号对话,或者替换成频道ID
        msg = await client.send_file('me', 'your_video.mp4', supports_streaming=True)
        print(f"存好的视频:对话ID {msg.chat.id},消息ID {msg.id}")
    
    client.loop.run_until_complete(upload())
    
  • 记住输出的对话ID和消息ID,后面要用来取视频

3. 搭个后端代理(必须做)

  • Telegram的视频链接是临时的(几小时就失效),而且前端跨域没法直接请求,所以得用后端中转:
    举个Node.js的例子(用express和node-telegram-bot-api):
    const express = require('express');
    const TelegramBot = require('node-telegram-bot-api');
    const app = express();
    const bot = new TelegramBot('你的Bot Token', { polling: false });
    
    app.get('/fetch-video', async (req, res) => {
      const { chatId, msgId } = req.query;
      try {
        const msg = await bot.getMessage(chatId, msgId);
        const streamLink = await bot.getFileLink(msg.video.file_id);
        res.redirect(streamLink);
      } catch (err) {
        res.status(500).send('获取视频失败');
      }
    });
    
    app.listen(3001, () => console.log('代理服务跑在3001端口'));
    

4. React端实现流式播放

  • 用HTML5的<video>标签,把src指向后端代理接口就行:
    import React from 'react';
    
    const StreamPlayer = ({ chatId, msgId }) => {
      const videoUrl = `http://localhost:3001/fetch-video?chatId=${chatId}&msgId=${msgId}`;
      return (
        <video 
          controls 
          style={{ width: '100%' }}
          preload="metadata"
        >
          <source src={videoUrl} type="video/mp4" />
          浏览器不支持视频播放
        </video>
      );
    };
    
    export default StreamPlayer;
    
  • 链接过期后,后端会自动重新获取新链接,前端不用管

5. 长期存储注意点

  • 别删存视频的对话/频道,不然视频直接没了
  • 偶尔检查下视频能不能正常访问,防止Telegram规则变动给删了

二、替代的免费视频托管平台(适合长期存储+API调用)

  • Cloudflare Stream:免费层每月10分钟时长,无带宽限制,支持API上传/拿流式链接,小项目够用
  • Vimeo Free:最多存5GB,单视频1GB上限,API能拿嵌入链接,但每月带宽250GB
  • YouTube(非公开):上传设为“不公开”,用Data API拿嵌入链接,长期存储稳,但要遵守版权
  • Internet Archive:完全免费无限存(非商用),API支持拿流式链接,适合存档类视频

内容的提问来源于stack exchange,提问作者Aryan Singh

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.29 05:54:58