如何通过JavaScript从浏览器调用手机摄像头向Kinesis Video Stream推流

核心步骤概述 #

• 获取摄像头媒体流：通过HTML5原生API调用手机摄像头，获取视频/音频流
• 适配KVS推流协议：借助AWS官方JavaScript SDK，通过WebRTC协议建立与KVS的连接并推流
• 流处理与下游消费：推流至KVS后，EC2等消费者通过KVS SDK拉流处理，结果同步至Kinesis Data Streams和S3

具体实现细节 #

1. 浏览器端获取摄像头流 #

使用MediaDevices.getUserMediaAPI调用手机摄像头，示例代码：

async function getCameraStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { facingMode: 'environment' }, // 指定调用后置摄像头
      audio: true
    });
    // 绑定到页面video元素实现预览（可选）
    document.getElementById('camera-preview').srcObject = stream;
    return stream;
  } catch (err) {
    console.error('摄像头调用失败:', err);
  }
}

2. 向KVS推流的核心适配 #

AWS KVS支持通过WebRTC协议从浏览器端直接推流，核心依赖KVS的JavaScript SDK和WebRTC连接：

• 用Cognito身份池提供临时AWS凭证（避免硬编码密钥）
• 创建KVS流并获取WebRTC信令端点，建立PeerConnection后注入摄像头流

示例代码框架：

import { KinesisVideoClient, CreateStreamCommand, GetDataEndpointCommand } from "@aws-sdk/client-kinesis-video";
import { KinesisVideoSignalingClient, SendAlexaOfferToMasterCommand } from "@aws-sdk/client-kinesis-video-signaling";

async function setupKvsPush(streamName, cameraStream) {
  // 初始化KVS客户端（传入Cognito临时凭证）
  const kvsClient = new KinesisVideoClient({ 
    region: '你的AWS区域', 
    credentials: 你的Cognito临时凭证 
  });
  
  // 创建或获取目标流
  await kvsClient.send(new CreateStreamCommand({ 
    StreamName: streamName, 
    DataRetentionInHours: 24 
  }));
  
  // 获取WebRTC信令服务端点
  const endpointRes = await kvsClient.send(new GetDataEndpointCommand({
    StreamName: streamName,
    APIName: 'WEBRTC_SIGNALING'
  }));
  
  // 初始化信令客户端
  const signalingClient = new KinesisVideoSignalingClient({
    endpoint: endpointRes.DataEndpoint,
    region: '你的AWS区域',
    credentials: 你的Cognito临时凭证
  });
  
  // 建立WebRTC PeerConnection
  const pc = new RTCPeerConnection({ 
    iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] 
  });
  // 将摄像头流的音视频轨道添加到连接
  cameraStream.getTracks().forEach(track => pc.addTrack(track, cameraStream));
  
  // 生成SDP Offer并发送至KVS信令服务
  const offer = await pc.createOffer();
  await pc.setLocalDescription(offer);
  
  await signalingClient.send(new SendAlexaOfferToMasterCommand({
    ChannelARN: '你的KVS WebRTC通道ARN',
    SenderClientId: `browser-client-${Math.random()}`,
    Message: JSON.stringify({ sdp: offer.sdp, type: offer.type })
  }));
  
  // 监听信令响应，设置远程SDP Answer
  pc.ontrack = (event) => {
    // 可选：处理KVS返回的流（用于双向场景）
  };
}

3. 消费者端处理逻辑 #

• EC2视频处理消费者：使用KVS的Java/Python SDK拉取流，完成视频分析（如人脸识别、内容审核）后，将结果写入Kinesis Data Streams
• S3归档消费者：可通过KVS的生命周期规则自动将流归档至S3，或通过SDK拉流后分段存储到S3

关键注意事项 #

• 权限配置：确保Cognito身份池拥有kinesisvideo:CreateStream、kinesisvideo:GetDataEndpoint、kinesisvideo:SendAlexaOfferToMaster等必要权限
• 浏览器兼容性：确认移动端浏览器支持getUserMedia和WebRTC（Chrome、Safari等现代浏览器均支持）
• 备选推流方式：若WebRTC存在兼容性问题，可将摄像头流编码为H.264，通过带签名的HTTP POST请求推送到KVS的Ingest端点

内容的提问来源于stack exchange，提问作者Santosh S Kumar