Telegram Mini App内录制视频的方法及相机访问可行性咨询

一、能否在Telegram Mini App内录制视频（访问相机） #

可以实现。Telegram Mini App基于Web技术构建，支持调用浏览器原生的MediaDevices API访问设备相机与麦克风，只要用户授予对应的权限，就能完成视频录制操作。需要注意：

• 应用本身运行在HTTPS环境（Telegram Mini App默认满足此要求）
• 必须向用户申请相机及麦克风的使用权限

二、如何在Telegram Mini App内录制视频 #

以下是具体实现步骤及代码示例：

1. 请求权限并获取相机流 #

通过navigator.mediaDevices.getUserMedia()发起权限请求，获取视频（含可选音频）流：

async function getCameraStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { facingMode: 'user' }, // user=前置摄像头，environment=后置摄像头
      audio: true // 需要录制音频则设为true，否则为false
    });
    return stream;
  } catch (err) {
    console.error('获取相机流失败:', err);
    // 处理权限拒绝、设备不可用等异常情况
  }
}

2. 实时预览视频流 #

将获取到的流绑定到页面的video元素，实现实时预览：

<video id="preview" autoplay playsinline></video>

const previewVideo = document.getElementById('preview');
const stream = await getCameraStream();
if (stream) {
  previewVideo.srcObject = stream;
}

3. 启动与停止视频录制 #

使用MediaRecorderAPI处理视频录制逻辑：

let mediaRecorder;
let recordedChunks = [];

function startRecording(stream) {
  recordedChunks = [];
  // 选择浏览器支持的MIME格式，优先video/webm
  const recordOptions = { mimeType: 'video/webm; codecs=vp9' };
  
  try {
    mediaRecorder = new MediaRecorder(stream, recordOptions);
  } catch (e) {
    console.error('MediaRecorder初始化失败:', e);
    return;
  }

  mediaRecorder.ondataavailable = (e) => {
    if (e.data.size > 0) recordedChunks.push(e.data);
  };

  mediaRecorder.onstop = () => {
    // 录制完成后生成视频Blob对象
    const videoBlob = new Blob(recordedChunks, { type: 'video/webm' });
    // 可转为URL用于本地播放，或上传至服务器
    const videoUrl = URL.createObjectURL(videoBlob);
    // 后续业务逻辑：比如展示录制结果、调用Bot API上传等
  };

  mediaRecorder.start();
}

function stopRecording(stream) {
  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
    mediaRecorder.stop();
    // 释放相机资源
    stream.getTracks().forEach(track => track.stop());
  }
}

4. 绑定用户交互按钮 #

添加控制按钮，让用户触发录制的开始与停止：

<button id="startRecord">开始录制</button>
<button id="stopRecord">停止录制</button>

let currentStream;

document.getElementById('startRecord').addEventListener('click', async () => {
  currentStream = await getCameraStream();
  if (currentStream) startRecording(currentStream);
});

document.getElementById('stopRecord').addEventListener('click', () => {
  if (currentStream) stopRecording(currentStream);
});

额外注意事项 #

• 不同浏览器对视频编码格式的支持存在差异，可提前通过MediaRecorder.isTypeSupported()检测兼容格式
• 录制完成后的视频文件可通过Telegram Bot API上传至后端服务，或在Mini App内直接处理
• 务必在录制停止后释放相机与麦克风资源，避免占用设备性能

内容的提问来源于stack exchange，提问作者user2809176