feat(player): add Cloudflare Stream WebRTC (WHEP) playback support

- Add new 'cloudflare-webrtc' player type for low-latency streaming
- Implement WHEP protocol for Cloudflare Stream WebRTC endpoints
- Add play mode selector (iframe/WebRTC) to CC demo page
- Add WebRTC reconnect functionality
- Generate appropriate URL based on selected play mode
- Add test machine script for bulk data creation

WebRTC URL format: https://{domain}/{videoId}/webRTC/play

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components.d.ts

@@ -34,6 +34,8 @@ declare module 'vue' {
     ElOptionGroup: typeof import('element-plus/es')['ElOptionGroup']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElResult: typeof import('element-plus/es')['ElResult']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']

src/components/VideoPlayer.vue

@@ -10,7 +10,25 @@
       />
     </template>
 
-    <!-- WebRTC Player -->
+    <!-- Cloudflare Stream WebRTC (WHEP) Player -->
+    <template v-else-if="playerType === 'cloudflare-webrtc'">
+      <video
+        ref="videoRef"
+        class="video-element"
+        :controls="controls"
+        :autoplay="autoplay"
+        :muted="muted"
+        playsinline
+      />
+      <!-- WebRTC 连接状态 -->
+      <div v-if="cfWebrtcStatus !== 'connected'" class="webrtc-status">
+        <span v-if="cfWebrtcStatus === 'connecting'" class="status-connecting">WebRTC 连接中...</span>
+        <span v-else-if="cfWebrtcStatus === 'failed'" class="status-failed">WebRTC 连接失败</span>
+        <span v-else class="status-idle">等待连接</span>
+      </div>
+    </template>
+
+    <!-- WebRTC Player (go2rtc) -->
     <template v-else-if="playerType === 'webrtc'">
       <video
         ref="videoRef"
@@ -66,7 +84,7 @@ interface Props {
   src?: string // 视频源地址
   videoId?: string // Cloudflare Stream video ID
   customerDomain?: string // Cloudflare 自定义域名
-  playerType?: 'cloudflare' | 'hls' | 'native' | 'webrtc'
+  playerType?: 'cloudflare' | 'cloudflare-webrtc' | 'hls' | 'native' | 'webrtc'
   useIframe?: boolean // Cloudflare 是否使用 iframe
   controls?: boolean
   autoplay?: boolean
@@ -74,7 +92,7 @@ interface Props {
   loop?: boolean
   poster?: string
   preload?: 'auto' | 'metadata' | 'none'
-  // WebRTC 配置
+  // WebRTC 配置 (go2rtc)
   go2rtcUrl?: string // go2rtc 服务地址，如 http://localhost:1984
   streamName?: string // 流名称，如 camera1
 }
@@ -102,7 +120,9 @@ const videoRef = ref<HTMLVideoElement>()
 
 let hlsInstance: any = null
 let peerConnection: RTCPeerConnection | null = null
+let cfPeerConnection: RTCPeerConnection | null = null
 const webrtcStatus = ref<'idle' | 'connecting' | 'connected' | 'failed'>('idle')
+const cfWebrtcStatus = ref<'idle' | 'connecting' | 'connected' | 'failed'>('idle')
 
 // Cloudflare Stream iframe URL
 const cloudflareIframeSrc = computed(() => {
@@ -117,6 +137,13 @@ const cloudflareIframeSrc = computed(() => {
   return `https://${domain}/${props.videoId}/iframe${queryString ? `?${queryString}` : ''}`
 })
 
+// Cloudflare Stream WebRTC (WHEP) URL
+const cloudflareWebRTCUrl = computed(() => {
+  if (!props.videoId) return ''
+  const domain = props.customerDomain || 'customer-xxx.cloudflarestream.com'
+  return `https://${domain}/${props.videoId}/webRTC/play`
+})
+
 // 初始化 HLS.js
 async function initHls() {
   if (!videoRef.value || !props.src) return
@@ -187,7 +214,114 @@ function destroyHls() {
   }
 }
 
-// 初始化 WebRTC
+// 初始化 Cloudflare WebRTC (WHEP)
+async function initCloudflareWebRTC() {
+  if (!videoRef.value || !props.videoId) return
+
+  cfWebrtcStatus.value = 'connecting'
+
+  try {
+    const whepUrl = cloudflareWebRTCUrl.value
+    console.log('Cloudflare WebRTC URL:', whepUrl)
+
+    // 创建 RTCPeerConnection
+    cfPeerConnection = new RTCPeerConnection({
+      iceServers: [{ urls: 'stun:stun.cloudflare.com:3478' }, { urls: 'stun:stun.l.google.com:19302' }],
+      bundlePolicy: 'max-bundle'
+    })
+
+    // 监听远程流
+    cfPeerConnection.ontrack = (event) => {
+      console.log('Cloudflare WebRTC: received track', event.track.kind)
+      if (videoRef.value && event.streams[0]) {
+        videoRef.value.srcObject = event.streams[0]
+        cfWebrtcStatus.value = 'connected'
+        if (props.autoplay) {
+          videoRef.value.play().catch((e) => console.warn('Autoplay failed:', e))
+        }
+      }
+    }
+
+    // 监听连接状态
+    cfPeerConnection.oniceconnectionstatechange = () => {
+      if (!cfPeerConnection) return
+      const state = cfPeerConnection.iceConnectionState
+      console.log('Cloudflare WebRTC ICE state:', state)
+      if (state === 'connected' || state === 'completed') {
+        cfWebrtcStatus.value = 'connected'
+      } else if (state === 'failed' || state === 'disconnected') {
+        cfWebrtcStatus.value = 'failed'
+        emit('error', { type: 'cloudflare-webrtc', message: `ICE connection ${state}` })
+      }
+    }
+
+    // 添加音视频收发器
+    cfPeerConnection.addTransceiver('video', { direction: 'recvonly' })
+    cfPeerConnection.addTransceiver('audio', { direction: 'recvonly' })
+
+    // 创建 Offer
+    const offer = await cfPeerConnection.createOffer()
+    await cfPeerConnection.setLocalDescription(offer)
+
+    // 等待 ICE gathering 完成或超时
+    await new Promise<void>((resolve) => {
+      if (cfPeerConnection?.iceGatheringState === 'complete') {
+        resolve()
+      } else {
+        const timeout = setTimeout(resolve, 2000)
+        cfPeerConnection!.onicegatheringstatechange = () => {
+          if (cfPeerConnection?.iceGatheringState === 'complete') {
+            clearTimeout(timeout)
+            resolve()
+          }
+        }
+      }
+    })
+
+    // 发送 Offer 到 Cloudflare WHEP 端点
+    const response = await fetch(whepUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/sdp'
+      },
+      body: cfPeerConnection.localDescription?.sdp
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      throw new Error(`WHEP request failed: ${response.status} - ${errorText}`)
+    }
+
+    // 获取 Answer SDP
+    const answerSdp = await response.text()
+    console.log('Cloudflare WebRTC: received answer')
+
+    await cfPeerConnection.setRemoteDescription({
+      type: 'answer',
+      sdp: answerSdp
+    })
+
+    // 绑定视频事件
+    bindVideoEvents()
+  } catch (error) {
+    console.error('Cloudflare WebRTC 连接失败:', error)
+    cfWebrtcStatus.value = 'failed'
+    emit('error', { type: 'cloudflare-webrtc', message: String(error) })
+  }
+}
+
+function destroyCloudflareWebRTC() {
+  if (cfPeerConnection) {
+    cfPeerConnection.close()
+    cfPeerConnection = null
+  }
+  cfWebrtcStatus.value = 'idle'
+  if (videoRef.value) {
+    videoRef.value.srcObject = null
+  }
+}
+
+// 初始化 WebRTC (go2rtc)
 async function initWebRTC() {
   if (!videoRef.value || !props.go2rtcUrl || !props.streamName) return
 
@@ -325,6 +459,9 @@ function reconnect() {
   if (props.playerType === 'webrtc') {
     destroyWebRTC()
     initWebRTC()
+  } else if (props.playerType === 'cloudflare-webrtc') {
+    destroyCloudflareWebRTC()
+    initCloudflareWebRTC()
   }
 }
 
@@ -337,7 +474,8 @@ defineExpose({
   screenshot,
   fullscreen,
   reconnect,
-  webrtcStatus
+  webrtcStatus,
+  cfWebrtcStatus
 })
 
 watch(
@@ -358,11 +496,24 @@ watch([() => props.go2rtcUrl, () => props.streamName], ([newUrl, newStream]) =>
   }
 })
 
+// Cloudflare WebRTC 配置变化时重新连接
+watch(
+  () => props.videoId,
+  (newVideoId) => {
+    if (props.playerType === 'cloudflare-webrtc' && newVideoId) {
+      destroyCloudflareWebRTC()
+      initCloudflareWebRTC()
+    }
+  }
+)
+
 onMounted(() => {
   if (props.playerType === 'hls') {
     initHls()
   } else if (props.playerType === 'webrtc') {
     initWebRTC()
+  } else if (props.playerType === 'cloudflare-webrtc') {
+    initCloudflareWebRTC()
   } else if (props.playerType === 'native') {
     bindVideoEvents()
   }
@@ -371,6 +522,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   destroyHls()
   destroyWebRTC()
+  destroyCloudflareWebRTC()
 })
 </script>
 

src/views/demo/cloudflareStream.vue

@@ -17,9 +17,16 @@
             style="width: 400px"
           />
         </el-form-item>
+        <el-form-item label="播放模式">
+          <el-radio-group v-model="cfConfig.playMode">
+            <el-radio value="iframe">iframe (HLS)</el-radio>
+            <el-radio value="webrtc">WebRTC (低延迟)</el-radio>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="playCloudflare">播放</el-button>
           <el-button @click="generateCfUrl">生成地址</el-button>
+          <el-button v-if="currentPlayerType === 'cloudflare-webrtc'" @click="handleReconnect">重连</el-button>
         </el-form-item>
         <el-form-item v-if="cfGeneratedUrl" label="生成的地址">
           <el-input :value="cfGeneratedUrl" readonly style="width: 600px">
@@ -198,7 +205,8 @@ const playerRef = ref<InstanceType<typeof VideoPlayer>>()
 // Cloudflare Stream 配置
 const cfConfig = reactive({
   videoId: '3c1ae1949e76f200feef94b8f7d093ca',
-  customerDomain: 'customer-pj89kn2ke2tcuh19.cloudflarestream.com'
+  customerDomain: 'customer-pj89kn2ke2tcuh19.cloudflarestream.com',
+  playMode: 'iframe' as 'iframe' | 'webrtc'
 })
 const cfGeneratedUrl = ref('')
 
@@ -222,7 +230,7 @@ const zoomValue = ref(0)
 // 当前播放状态
 const currentSrc = ref('')
 const currentVideoId = ref('')
-const currentPlayerType = ref<'hls' | 'native' | 'cloudflare'>('hls')
+const currentPlayerType = ref<'hls' | 'native' | 'cloudflare' | 'cloudflare-webrtc'>('hls')
 const useIframe = ref(false)
 
 // 日志
@@ -249,11 +257,25 @@ function playCloudflare() {
   }
 
   currentVideoId.value = cfConfig.videoId
-  useIframe.value = true
   currentSrc.value = ''
-  currentPlayerType.value = 'cloudflare'
 
-  addLog(`播放 Cloudflare Stream: ${cfConfig.videoId} (iframe)`, 'success')
+  if (cfConfig.playMode === 'webrtc') {
+    useIframe.value = false
+    currentPlayerType.value = 'cloudflare-webrtc'
+    addLog(`播放 Cloudflare Stream: ${cfConfig.videoId} (WebRTC)`, 'success')
+  } else {
+    useIframe.value = true
+    currentPlayerType.value = 'cloudflare'
+    addLog(`播放 Cloudflare Stream: ${cfConfig.videoId} (iframe)`, 'success')
+  }
+}
+
+// 重连 WebRTC
+function handleReconnect() {
+  if (playerRef.value) {
+    playerRef.value.reconnect()
+    addLog('尝试重新连接 WebRTC...', 'info')
+  }
 }
 
 // 生成 Cloudflare URL
@@ -263,7 +285,11 @@ function generateCfUrl() {
     return
   }
   const domain = cfConfig.customerDomain || 'customer-xxx.cloudflarestream.com'
-  cfGeneratedUrl.value = `https://${domain}/${cfConfig.videoId}/iframe`
+  if (cfConfig.playMode === 'webrtc') {
+    cfGeneratedUrl.value = `https://${domain}/${cfConfig.videoId}/webRTC/play`
+  } else {
+    cfGeneratedUrl.value = `https://${domain}/${cfConfig.videoId}/iframe`
+  }
 }
 
 // 复制 URL
@@ -401,6 +427,7 @@ async function handleZoomRelease() {
 
 <style lang="scss" scoped>
 .page-container {
+  padding: 1rem;
   min-height: 100vh;
   background-color: var(--bg-page);
 }