Add SRT/FLV/RTMP support and update documentation
Introduced Python scripts for SRT subtitle checking and fixing, and added comprehensive documentation covering advanced features such as protocol detection, subtitle/audio/quality management, keyboard shortcuts, and touch gestures. Updated local settings to allow new build and Python commands, added TypeScript definitions for FLV, and implemented RTMP/FLV protocol support in the player. Removed CHANGELOG.md and made various improvements to styles and example app.
This commit is contained in:
hibna
@@ -32,6 +32,11 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.controls-layer > .center-play-overlay,
|
||||
.controls-layer > .loading-spinner-overlay {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.controls-layer.hidden.playing {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
+121
-42
@@ -4,6 +4,8 @@ import type { SubtitleTrack, AudioTrack, VideoQuality } from '../types'
|
||||
import { validateVideoURL, getCORSErrorMessage, isCORSError } from '../utils/corsHelper'
|
||||
import { setHlsAudioTrack, setHlsQualityLevel } from '../utils/hlsControl'
|
||||
import { setupHlsInstance } from '../utils/hlsSetup'
|
||||
import { setupRtmpInstance } from '../utils/rtmpSetup'
|
||||
import { detectVideoProtocol } from '../utils/videoProtocol'
|
||||
import { createSubtitleBlobURL } from '../utils/subtitles'
|
||||
import './VideoElement.css'
|
||||
|
||||
@@ -25,6 +27,7 @@ interface VideoElementProps {
|
||||
onSeeked?: () => void
|
||||
onAudioTracksLoaded?: (tracks: AudioTrack[]) => void
|
||||
onQualityLevelsLoaded?: (qualities: VideoQuality[]) => void
|
||||
onSubtitleTracksLoaded?: (tracks: SubtitleTrack[]) => void
|
||||
}
|
||||
|
||||
export const VideoElement: React.FC<VideoElementProps> = ({
|
||||
@@ -45,11 +48,13 @@ export const VideoElement: React.FC<VideoElementProps> = ({
|
||||
onSeeked,
|
||||
onAudioTracksLoaded,
|
||||
onQualityLevelsLoaded,
|
||||
onSubtitleTracksLoaded,
|
||||
}) => {
|
||||
const { videoRef, setVideoState, toggleFullscreen, settings, setQuality, setSubtitle } = usePlayerContext()
|
||||
const lastClickTimeRef = React.useRef<number>(0)
|
||||
const [availableAudioTracks, setAvailableAudioTracks] = useState<AudioTrack[]>([])
|
||||
const [availableQualities, setAvailableQualities] = useState<VideoQuality[]>([])
|
||||
const [hlsSubtitles, setHlsSubtitles] = useState<SubtitleTrack[]>([])
|
||||
const [processedSubtitles, setProcessedSubtitles] = useState<SubtitleTrack[]>([])
|
||||
const subtitleBlobUrlsRef = React.useRef<string[]>([])
|
||||
|
||||
@@ -210,7 +215,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
|
||||
}
|
||||
}, [setVideoState])
|
||||
|
||||
// Process subtitles - convert SRT to VTT blob URLs
|
||||
// Process subtitles - convert SRT to VTT blob URLs and merge with HLS subtitles
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
|
||||
@@ -218,14 +223,17 @@ export const VideoElement: React.FC<VideoElementProps> = ({
|
||||
subtitleBlobUrlsRef.current.forEach((url) => URL.revokeObjectURL(url))
|
||||
subtitleBlobUrlsRef.current = []
|
||||
|
||||
if (subtitles.length === 0) {
|
||||
// Merge manual subtitles and HLS subtitles
|
||||
const allSubtitles = [...subtitles, ...hlsSubtitles]
|
||||
|
||||
if (allSubtitles.length === 0) {
|
||||
setProcessedSubtitles([])
|
||||
return
|
||||
}
|
||||
|
||||
const processSubtitles = async () => {
|
||||
const processed = await Promise.all(
|
||||
subtitles.map(async (subtitle) => {
|
||||
allSubtitles.map(async (subtitle) => {
|
||||
try {
|
||||
// Check if it's an SRT file
|
||||
if (subtitle.src.endsWith('.srt')) {
|
||||
@@ -273,7 +281,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
|
||||
subtitleBlobUrlsRef.current.forEach((url) => URL.revokeObjectURL(url))
|
||||
subtitleBlobUrlsRef.current = []
|
||||
}
|
||||
}, [subtitles])
|
||||
}, [subtitles, hlsSubtitles])
|
||||
|
||||
useEffect(() => {
|
||||
const video = videoRef.current
|
||||
@@ -297,7 +305,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
|
||||
}
|
||||
}, [processedSubtitles, settings.subtitle, setSubtitle, videoRef])
|
||||
|
||||
// Detect HLS source and load hls.js if needed
|
||||
// Detect video protocol and setup appropriate player
|
||||
useEffect(() => {
|
||||
const video = videoRef.current
|
||||
if (!video) return
|
||||
@@ -306,6 +314,8 @@ export const VideoElement: React.FC<VideoElementProps> = ({
|
||||
onAudioTracksLoaded?.([])
|
||||
setAvailableQualities([])
|
||||
onQualityLevelsLoaded?.([])
|
||||
setHlsSubtitles([])
|
||||
onSubtitleTracksLoaded?.([])
|
||||
|
||||
// Validate video URL first
|
||||
const validation = validateVideoURL(src)
|
||||
@@ -316,57 +326,117 @@ export const VideoElement: React.FC<VideoElementProps> = ({
|
||||
return
|
||||
}
|
||||
|
||||
const isHLS = src.includes('.m3u8')
|
||||
// Detect video protocol
|
||||
const detection = detectVideoProtocol(src)
|
||||
let cleanupFn: (() => void) | null = null
|
||||
|
||||
const setupHls = async () => {
|
||||
if (isHLS && video.canPlayType('application/vnd.apple.mpegurl') === '') {
|
||||
try {
|
||||
cleanupFn = await setupHlsInstance({
|
||||
video,
|
||||
src,
|
||||
autoplay,
|
||||
onAudioTracksLoaded: (tracks) => {
|
||||
setAvailableAudioTracks(tracks)
|
||||
onAudioTracksLoaded?.(tracks)
|
||||
},
|
||||
onQualityLevelsLoaded: (qualities) => {
|
||||
setAvailableQualities(qualities)
|
||||
onQualityLevelsLoaded?.(qualities)
|
||||
},
|
||||
onError: handleError,
|
||||
})
|
||||
} catch (err) {
|
||||
let error: Error
|
||||
if (err instanceof Error && isCORSError(err)) {
|
||||
const corsMessage = getCORSErrorMessage(src)
|
||||
error = new Error(corsMessage)
|
||||
} else {
|
||||
error = err instanceof Error ? err : new Error('Failed to load HLS')
|
||||
console.log('[VideoElement] Source:', src)
|
||||
console.log('[VideoElement] Detected protocol:', detection.protocol)
|
||||
console.log('[VideoElement] Is live stream?', detection.isLive)
|
||||
console.log('[VideoElement] Needs special player?', detection.needsSpecialPlayer)
|
||||
|
||||
const setupPlayer = async () => {
|
||||
try {
|
||||
switch (detection.protocol) {
|
||||
case 'hls': {
|
||||
// HLS streaming setup
|
||||
const canPlayHLS = video.canPlayType('application/vnd.apple.mpegurl')
|
||||
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
|
||||
const shouldUseHlsJs = canPlayHLS === '' || !isSafari
|
||||
|
||||
console.log('[VideoElement] Native HLS support?', canPlayHLS)
|
||||
console.log('[VideoElement] Is Safari?', isSafari)
|
||||
console.log('[VideoElement] Will use HLS.js?', shouldUseHlsJs)
|
||||
|
||||
if (shouldUseHlsJs) {
|
||||
console.log('[VideoElement] Setting up HLS.js...')
|
||||
cleanupFn = await setupHlsInstance({
|
||||
video,
|
||||
src,
|
||||
autoplay,
|
||||
onAudioTracksLoaded: (tracks) => {
|
||||
setAvailableAudioTracks(tracks)
|
||||
onAudioTracksLoaded?.(tracks)
|
||||
},
|
||||
onQualityLevelsLoaded: (qualities) => {
|
||||
setAvailableQualities(qualities)
|
||||
onQualityLevelsLoaded?.(qualities)
|
||||
},
|
||||
onSubtitleTracksLoaded: (tracks) => {
|
||||
setHlsSubtitles(tracks)
|
||||
onSubtitleTracksLoaded?.(tracks)
|
||||
},
|
||||
onError: handleError,
|
||||
})
|
||||
} else {
|
||||
console.log('[VideoElement] Using native HLS playback')
|
||||
video.src = src
|
||||
if (autoplay) {
|
||||
void video.play().catch(() => undefined)
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
case 'rtmp': {
|
||||
// RTMP/FLV streaming setup
|
||||
console.log('[VideoElement] Setting up RTMP/FLV player...')
|
||||
cleanupFn = await setupRtmpInstance({
|
||||
video,
|
||||
src,
|
||||
autoplay,
|
||||
onError: handleError,
|
||||
onLoadedMetadata,
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
case 'dash': {
|
||||
// DASH streaming - not yet implemented
|
||||
const error = new Error('DASH streaming is not yet supported')
|
||||
console.error('[VideoElement]', error.message)
|
||||
setVideoState((prev) => ({ ...prev, error, loading: false }))
|
||||
onError?.(error)
|
||||
break
|
||||
}
|
||||
|
||||
case 'native':
|
||||
default: {
|
||||
// Native HTML5 video (MP4, WebM, etc.)
|
||||
console.log('[VideoElement] Using native video.src')
|
||||
video.src = src
|
||||
if (autoplay) {
|
||||
void video.play().catch(() => undefined)
|
||||
}
|
||||
break
|
||||
}
|
||||
setVideoState((prev) => ({
|
||||
...prev,
|
||||
error,
|
||||
loading: false,
|
||||
}))
|
||||
onError?.(error)
|
||||
}
|
||||
} else {
|
||||
video.src = src
|
||||
if (autoplay) {
|
||||
void video.play().catch(() => undefined)
|
||||
} catch (err) {
|
||||
let error: Error
|
||||
if (err instanceof Error && isCORSError(err)) {
|
||||
const corsMessage = getCORSErrorMessage(src)
|
||||
error = new Error(corsMessage)
|
||||
} else {
|
||||
error = err instanceof Error ? err : new Error(`Failed to load ${detection.protocol.toUpperCase()} video`)
|
||||
}
|
||||
console.error('[VideoElement] Setup error:', error)
|
||||
setVideoState((prev) => ({
|
||||
...prev,
|
||||
error,
|
||||
loading: false,
|
||||
}))
|
||||
onError?.(error)
|
||||
}
|
||||
}
|
||||
|
||||
setupHls()
|
||||
setupPlayer()
|
||||
|
||||
// Cleanup function
|
||||
return () => {
|
||||
if (cleanupFn) {
|
||||
cleanupFn()
|
||||
}
|
||||
// Also check for any lingering HLS instance
|
||||
// Also check for any lingering player instances
|
||||
if ((video as any).__hlsInstance) {
|
||||
const hls = (video as any).__hlsInstance
|
||||
if (hls && typeof hls.destroy === 'function') {
|
||||
@@ -374,6 +444,13 @@ export const VideoElement: React.FC<VideoElementProps> = ({
|
||||
}
|
||||
delete (video as any).__hlsInstance
|
||||
}
|
||||
if ((video as any).__rtmpInstance) {
|
||||
const rtmp = (video as any).__rtmpInstance
|
||||
if (rtmp && typeof rtmp.destroy === 'function') {
|
||||
rtmp.destroy()
|
||||
}
|
||||
delete (video as any).__rtmpInstance
|
||||
}
|
||||
}
|
||||
}, [
|
||||
src,
|
||||
@@ -384,6 +461,8 @@ export const VideoElement: React.FC<VideoElementProps> = ({
|
||||
onError,
|
||||
onAudioTracksLoaded,
|
||||
onQualityLevelsLoaded,
|
||||
onSubtitleTracksLoaded,
|
||||
onLoadedMetadata,
|
||||
])
|
||||
|
||||
// Handle audio track changes
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useCallback } from 'react'
|
||||
import { PlayerProvider, usePlayerContext } from '../contexts/PlayerContext'
|
||||
import { VideoElement } from './VideoElement'
|
||||
import { ControlsLayer } from './ControlsLayer'
|
||||
import type { VideoPlayerProps, AudioTrack, VideoQuality } from '../types'
|
||||
import type { VideoPlayerProps, AudioTrack, VideoQuality, SubtitleTrack } from '../types'
|
||||
import '../styles/variables.css'
|
||||
import './VideoPlayer.css'
|
||||
|
||||
@@ -31,6 +31,8 @@ const VideoPlayerContent: React.FC<
|
||||
onAudioTracksLoadedInternal: (tracks: AudioTrack[]) => void
|
||||
qualities: VideoQuality[]
|
||||
onQualityLevelsLoadedInternal: (qualities: VideoQuality[]) => void
|
||||
hlsSubtitles: SubtitleTrack[]
|
||||
onSubtitleTracksLoadedInternal: (tracks: SubtitleTrack[]) => void
|
||||
}
|
||||
> = ({
|
||||
src,
|
||||
@@ -57,10 +59,15 @@ const VideoPlayerContent: React.FC<
|
||||
onAudioTracksLoadedInternal,
|
||||
qualities,
|
||||
onQualityLevelsLoadedInternal,
|
||||
hlsSubtitles,
|
||||
onSubtitleTracksLoadedInternal,
|
||||
}) => {
|
||||
const { containerRef, uiState } = usePlayerContext()
|
||||
const controlsHiddenClass = !uiState.controlsVisible ? 'controls-hidden' : ''
|
||||
|
||||
// Merge manual subtitles and HLS-detected subtitles
|
||||
const allSubtitles = [...subtitles, ...hlsSubtitles]
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className={`video-player ${controlsHiddenClass} ${className}`} style={style}>
|
||||
<VideoElement
|
||||
@@ -81,12 +88,13 @@ const VideoPlayerContent: React.FC<
|
||||
onSeeked={onSeeked}
|
||||
onAudioTracksLoaded={onAudioTracksLoadedInternal}
|
||||
onQualityLevelsLoaded={onQualityLevelsLoadedInternal}
|
||||
onSubtitleTracksLoaded={onSubtitleTracksLoadedInternal}
|
||||
/>
|
||||
{controls && (
|
||||
<ControlsLayer
|
||||
keyboardShortcuts={keyboardShortcuts}
|
||||
pictureInPicture={pictureInPicture}
|
||||
subtitles={subtitles}
|
||||
subtitles={allSubtitles}
|
||||
audioTracks={audioTracks}
|
||||
qualities={qualities}
|
||||
/>
|
||||
@@ -121,6 +129,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
|
||||
}) => {
|
||||
const [audioTracks, setAudioTracks] = useState<AudioTrack[]>([])
|
||||
const [qualities, setQualities] = useState<VideoQuality[]>([])
|
||||
const [hlsSubtitles, setHlsSubtitles] = useState<SubtitleTrack[]>([])
|
||||
|
||||
// Apply theme CSS variables
|
||||
useEffect(() => {
|
||||
@@ -141,6 +150,10 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
|
||||
setQualities(levels)
|
||||
}, [])
|
||||
|
||||
const handleSubtitleTracksLoaded = useCallback((tracks: SubtitleTrack[]) => {
|
||||
setHlsSubtitles(tracks)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<PlayerProvider initialMuted={muted} language={language}>
|
||||
<VideoPlayerContent
|
||||
@@ -168,6 +181,8 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
|
||||
onAudioTracksLoadedInternal={handleAudioTracksLoaded}
|
||||
qualities={qualities}
|
||||
onQualityLevelsLoadedInternal={handleQualityLevelsLoaded}
|
||||
hlsSubtitles={hlsSubtitles}
|
||||
onSubtitleTracksLoadedInternal={handleSubtitleTracksLoaded}
|
||||
/>
|
||||
</PlayerProvider>
|
||||
)
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
}
|
||||
|
||||
.center-play-button {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: var(--player-radius-full);
|
||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
|
||||
var(--player-primary);
|
||||
@@ -21,7 +21,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(239, 68, 68, 0.28);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(239, 68, 68, 0.2);
|
||||
transition: background-color var(--player-transition-fast) ease,
|
||||
color var(--player-transition-fast) ease, transform var(--player-transition-fast) ease,
|
||||
box-shadow var(--player-transition-normal) ease;
|
||||
@@ -30,8 +30,8 @@
|
||||
|
||||
.center-play-button:hover {
|
||||
background-color: var(--player-primary-hover);
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 14px 32px rgba(239, 68, 68, 0.32);
|
||||
transform: scale(1.08);
|
||||
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4), 0 10px 20px rgba(239, 68, 68, 0.25);
|
||||
}
|
||||
|
||||
.center-play-button:active {
|
||||
@@ -45,19 +45,19 @@
|
||||
}
|
||||
|
||||
.center-play-button svg {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-left: 4px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.center-play-button {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.center-play-button svg {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
height: 3px;
|
||||
background-color: var(--player-progress-bg);
|
||||
border-radius: var(--player-radius-full);
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
transition: height var(--player-transition-fast) ease;
|
||||
}
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
inset: 0;
|
||||
width: 0;
|
||||
background-color: var(--player-progress-buffered);
|
||||
border-radius: var(--player-radius-full);
|
||||
transition: width 0.12s ease;
|
||||
}
|
||||
|
||||
@@ -35,6 +36,7 @@
|
||||
inset: 0;
|
||||
width: 0;
|
||||
background-color: var(--player-primary);
|
||||
border-radius: var(--player-radius-full);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
@@ -46,14 +48,16 @@
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--player-primary);
|
||||
transform: scale(0);
|
||||
transition: transform var(--player-transition-fast) ease;
|
||||
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
|
||||
transform: scale(1);
|
||||
transition: transform var(--player-transition-fast) ease, box-shadow var(--player-transition-fast) ease;
|
||||
margin-right: -6px;
|
||||
}
|
||||
|
||||
.progress-bar:hover .progress-handle,
|
||||
.progress-bar.seeking .progress-handle {
|
||||
transform: scale(1);
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.progress-tooltip {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
height: 4px;
|
||||
background-color: var(--player-progress-bg);
|
||||
border-radius: var(--player-radius-full);
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
opacity: 0;
|
||||
transition: width var(--player-transition-normal) ease,
|
||||
opacity var(--player-transition-normal) ease;
|
||||
@@ -51,6 +51,14 @@
|
||||
background-color: var(--player-primary);
|
||||
border: none;
|
||||
margin-top: -4px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.volume-slider:hover::-webkit-slider-thumb {
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.volume-slider::-moz-range-track {
|
||||
@@ -64,11 +72,21 @@
|
||||
border-radius: 50%;
|
||||
background-color: var(--player-primary);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.volume-slider:hover::-moz-range-thumb {
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.volume-slider-fill {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
background: var(--player-primary);
|
||||
border-radius: var(--player-radius-full);
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.28);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: var(--player-z-loading);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Type declarations for optional flv.js module
|
||||
* Since flv.js is an optional dependency that may not be installed,
|
||||
* we declare it as a module that can be dynamically imported
|
||||
*/
|
||||
declare module 'flv.js' {
|
||||
const content: any
|
||||
export default content
|
||||
}
|
||||
@@ -1,5 +1,7 @@
|
||||
import type { CSSProperties, MutableRefObject } from 'react'
|
||||
|
||||
export type VideoProtocol = 'native' | 'hls' | 'rtmp' | 'dash'
|
||||
|
||||
export interface SubtitleTrack {
|
||||
src: string
|
||||
lang: string
|
||||
|
||||
+58
-6
@@ -3,7 +3,7 @@
|
||||
* Handles loading hls.js from npm or CDN
|
||||
*/
|
||||
|
||||
import type { AudioTrack, VideoQuality } from '../types'
|
||||
import type { AudioTrack, VideoQuality, SubtitleTrack } from '../types'
|
||||
import { getTranslations, detectBrowserLanguage } from '../i18n'
|
||||
|
||||
// Re-export control functions for backward compatibility
|
||||
@@ -47,15 +47,20 @@ const loadHlsFromCDN = (): Promise<any> => {
|
||||
*/
|
||||
export const loadHls = async (): Promise<any> => {
|
||||
try {
|
||||
console.log('[HLS Loader] Attempting to load from npm package...')
|
||||
// Try loading from npm package first
|
||||
const hlsModule = await import('hls.js')
|
||||
console.log('[HLS Loader] Successfully loaded from npm package')
|
||||
return hlsModule.default
|
||||
} catch {
|
||||
} catch (npmError) {
|
||||
console.warn('[HLS Loader] Failed to load from npm, trying CDN...', npmError)
|
||||
try {
|
||||
// Fallback to CDN
|
||||
const Hls = await loadHlsFromCDN()
|
||||
console.log('[HLS Loader] Successfully loaded from CDN')
|
||||
return Hls
|
||||
} catch {
|
||||
} catch (cdnError) {
|
||||
console.error('[HLS Loader] Failed to load from CDN:', cdnError)
|
||||
throw new Error('Unable to load HLS.js library. HLS streaming is not available.')
|
||||
}
|
||||
}
|
||||
@@ -82,14 +87,18 @@ export const hasNativeHlsSupport = (): boolean => {
|
||||
export const getHlsAudioTracks = (hls: any): AudioTrack[] => {
|
||||
try {
|
||||
if (!hls) {
|
||||
console.warn('[HLS Loader] getHlsAudioTracks: No HLS instance provided')
|
||||
return []
|
||||
}
|
||||
|
||||
// Check if audioTracks property exists
|
||||
if (!hls.audioTracks || !Array.isArray(hls.audioTracks)) {
|
||||
console.warn('[HLS Loader] getHlsAudioTracks: No audioTracks array found on HLS instance')
|
||||
return []
|
||||
}
|
||||
|
||||
console.log('[HLS Loader] getHlsAudioTracks: Raw audioTracks from HLS:', hls.audioTracks)
|
||||
|
||||
const audioTracks: AudioTrack[] = hls.audioTracks.map((track: any, index: number) => {
|
||||
const audioTrack = {
|
||||
name: track.name || track.label || `Audio ${index + 1}`,
|
||||
@@ -102,7 +111,38 @@ export const getHlsAudioTracks = (hls: any): AudioTrack[] => {
|
||||
return audioTrack
|
||||
})
|
||||
|
||||
console.log('[HLS Loader] getHlsAudioTracks: Processed tracks:', audioTracks)
|
||||
return audioTracks
|
||||
} catch (error) {
|
||||
console.error('[HLS Loader] getHlsAudioTracks: Error extracting audio tracks:', error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract subtitle tracks from HLS instance
|
||||
*/
|
||||
export const getHlsSubtitleTracks = (hls: any): SubtitleTrack[] => {
|
||||
try {
|
||||
if (!hls) {
|
||||
return []
|
||||
}
|
||||
|
||||
// Check if subtitleTracks property exists
|
||||
if (!hls.subtitleTracks || !Array.isArray(hls.subtitleTracks)) {
|
||||
return []
|
||||
}
|
||||
|
||||
const subtitleTracks: SubtitleTrack[] = hls.subtitleTracks.map((track: any, index: number) => {
|
||||
return {
|
||||
label: track.name || track.label || `Subtitle ${index + 1}`,
|
||||
lang: track.lang || track.language || 'unknown',
|
||||
src: track.url || '',
|
||||
default: track.default || false,
|
||||
}
|
||||
})
|
||||
|
||||
return subtitleTracks
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
@@ -113,10 +153,18 @@ export const getHlsAudioTracks = (hls: any): AudioTrack[] => {
|
||||
*/
|
||||
export const getHlsQualities = (hls: any): VideoQuality[] => {
|
||||
try {
|
||||
if (!hls || !Array.isArray(hls.levels)) {
|
||||
if (!hls) {
|
||||
console.warn('[HLS Loader] getHlsQualities: No HLS instance provided')
|
||||
return []
|
||||
}
|
||||
|
||||
if (!Array.isArray(hls.levels)) {
|
||||
console.warn('[HLS Loader] getHlsQualities: No levels array found on HLS instance')
|
||||
return []
|
||||
}
|
||||
|
||||
console.log('[HLS Loader] getHlsQualities: Raw levels from HLS:', hls.levels)
|
||||
|
||||
const qualities: VideoQuality[] = hls.levels.map((level: any, index: number) => {
|
||||
const resolution = typeof level.attrs?.RESOLUTION === 'string' ? level.attrs.RESOLUTION : undefined
|
||||
const [widthFromResolution, heightFromResolution] = resolution
|
||||
@@ -149,14 +197,18 @@ export const getHlsQualities = (hls: any): VideoQuality[] => {
|
||||
}
|
||||
})
|
||||
|
||||
return qualities.sort((a, b) => {
|
||||
const sortedQualities = qualities.sort((a, b) => {
|
||||
const heightDifference = (b.height || 0) - (a.height || 0)
|
||||
if (heightDifference !== 0) {
|
||||
return heightDifference
|
||||
}
|
||||
return (b.bitrate || 0) - (a.bitrate || 0)
|
||||
})
|
||||
} catch {
|
||||
|
||||
console.log('[HLS Loader] getHlsQualities: Processed qualities:', sortedQualities)
|
||||
return sortedQualities
|
||||
} catch (error) {
|
||||
console.error('[HLS Loader] getHlsQualities: Error extracting qualities:', error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
+58
-4
@@ -2,7 +2,7 @@
|
||||
* HLS setup and configuration utilities
|
||||
*/
|
||||
|
||||
import type { AudioTrack, VideoQuality } from '../types'
|
||||
import type { AudioTrack, VideoQuality, SubtitleTrack } from '../types'
|
||||
|
||||
interface HlsSetupOptions {
|
||||
video: HTMLVideoElement
|
||||
@@ -10,6 +10,7 @@ interface HlsSetupOptions {
|
||||
autoplay: boolean
|
||||
onAudioTracksLoaded?: (tracks: AudioTrack[]) => void
|
||||
onQualityLevelsLoaded?: (qualities: VideoQuality[]) => void
|
||||
onSubtitleTracksLoaded?: (tracks: SubtitleTrack[]) => void
|
||||
onError?: (error: Error) => void
|
||||
}
|
||||
|
||||
@@ -19,47 +20,100 @@ export const setupHlsInstance = async ({
|
||||
autoplay,
|
||||
onAudioTracksLoaded,
|
||||
onQualityLevelsLoaded,
|
||||
onSubtitleTracksLoaded,
|
||||
onError,
|
||||
}: HlsSetupOptions): Promise<() => void> => {
|
||||
const { loadHls, isHlsSupported, getHlsAudioTracks, getHlsQualities } = await import('./hlsLoader')
|
||||
const { loadHls, isHlsSupported, getHlsAudioTracks, getHlsQualities, getHlsSubtitleTracks } = await import('./hlsLoader')
|
||||
const Hls = await loadHls()
|
||||
|
||||
if (!isHlsSupported(Hls)) {
|
||||
throw new Error('HLS.js is not supported in this browser')
|
||||
}
|
||||
|
||||
console.log('[HLS Setup] Creating HLS instance for:', src)
|
||||
|
||||
const hls = new Hls({
|
||||
enableWorker: true,
|
||||
lowLatencyMode: false,
|
||||
debug: false,
|
||||
})
|
||||
|
||||
hls.loadSource(src)
|
||||
hls.attachMedia(video)
|
||||
|
||||
let manifestParsedHandled = false
|
||||
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
setTimeout(() => {
|
||||
console.log('[HLS Setup] MANIFEST_PARSED event fired')
|
||||
|
||||
if (manifestParsedHandled) {
|
||||
console.warn('[HLS Setup] MANIFEST_PARSED already handled, skipping')
|
||||
return
|
||||
}
|
||||
manifestParsedHandled = true
|
||||
|
||||
// Wait for tracks to be fully populated
|
||||
const loadTracks = () => {
|
||||
const tracks = getHlsAudioTracks(hls)
|
||||
const qualities = getHlsQualities(hls)
|
||||
const subtitles = getHlsSubtitleTracks(hls)
|
||||
|
||||
console.log('[HLS Setup] Detected tracks:', {
|
||||
audioTracks: tracks.length,
|
||||
qualities: qualities.length,
|
||||
subtitles: subtitles.length
|
||||
})
|
||||
|
||||
if (tracks.length > 0) {
|
||||
console.log('[HLS Setup] Loading audio tracks:', tracks)
|
||||
onAudioTracksLoaded?.(tracks)
|
||||
}
|
||||
|
||||
if (subtitles.length > 0) {
|
||||
console.log('[HLS Setup] Loading subtitle tracks:', subtitles)
|
||||
onSubtitleTracksLoaded?.(subtitles)
|
||||
}
|
||||
|
||||
console.log('[HLS Setup] Loading quality levels:', qualities)
|
||||
onQualityLevelsLoaded?.(qualities)
|
||||
}, 100)
|
||||
}
|
||||
|
||||
// Try immediately first
|
||||
loadTracks()
|
||||
|
||||
// Also retry after a delay for Chrome compatibility
|
||||
setTimeout(loadTracks, 200)
|
||||
|
||||
if (autoplay) {
|
||||
void video.play().catch(() => undefined)
|
||||
}
|
||||
})
|
||||
|
||||
// Listen for LEVEL_LOADED to ensure qualities are populated
|
||||
hls.on(Hls.Events.LEVEL_LOADED, () => {
|
||||
const qualities = getHlsQualities(hls)
|
||||
if (qualities.length > 0) {
|
||||
console.log('[HLS Setup] LEVEL_LOADED - Qualities available:', qualities.length)
|
||||
onQualityLevelsLoaded?.(qualities)
|
||||
}
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, () => {
|
||||
const tracks = getHlsAudioTracks(hls)
|
||||
console.log('[HLS Setup] AUDIO_TRACKS_UPDATED event:', tracks.length, 'tracks')
|
||||
if (tracks.length > 0) {
|
||||
onAudioTracksLoaded?.(tracks)
|
||||
}
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, () => {
|
||||
const subtitles = getHlsSubtitleTracks(hls)
|
||||
console.log('[HLS Setup] SUBTITLE_TRACKS_UPDATED event:', subtitles.length, 'tracks')
|
||||
if (subtitles.length > 0) {
|
||||
onSubtitleTracksLoaded?.(subtitles)
|
||||
}
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.ERROR, (_event: any, data: any) => {
|
||||
if (data.fatal) {
|
||||
switch (data.type) {
|
||||
|
||||
+87
-1
@@ -1,4 +1,4 @@
|
||||
import type { AudioTrack } from '../types'
|
||||
import type { AudioTrack, SubtitleTrack } from '../types'
|
||||
|
||||
/**
|
||||
* Parses M3U8 manifest to extract audio tracks
|
||||
@@ -73,6 +73,75 @@ const parseAudioMediaTag = (line: string): AudioTrack | null => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses M3U8 manifest to extract subtitle tracks
|
||||
*/
|
||||
export const parseM3U8SubtitleTracks = (manifestContent: string): SubtitleTrack[] => {
|
||||
const subtitleTracks: SubtitleTrack[] = []
|
||||
const lines = manifestContent.split('\n')
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('#EXT-X-MEDIA:TYPE=SUBTITLES')) {
|
||||
const track = parseSubtitleMediaTag(line)
|
||||
if (track) {
|
||||
subtitleTracks.push(track)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return subtitleTracks
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses a single #EXT-X-MEDIA:TYPE=SUBTITLES line
|
||||
* Example: #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",DEFAULT=YES,AUTOSELECT=YES,FORCED=NO,LANGUAGE="en",URI="subtitles_en.m3u8"
|
||||
*/
|
||||
const parseSubtitleMediaTag = (line: string): SubtitleTrack | null => {
|
||||
try {
|
||||
const attributes: Record<string, string> = {}
|
||||
|
||||
// Extract all key-value pairs
|
||||
const regex = /(\w+(?:-\w+)*)=("(?:[^"\\]|\\.)*"|[^,]+)/g
|
||||
let match
|
||||
|
||||
while ((match = regex.exec(line)) !== null) {
|
||||
const key = match[1]
|
||||
let value = match[2]
|
||||
|
||||
// Remove quotes if present
|
||||
if (value.startsWith('"') && value.endsWith('"')) {
|
||||
value = value.slice(1, -1)
|
||||
}
|
||||
|
||||
attributes[key] = value
|
||||
}
|
||||
|
||||
// Only process if it's a SUBTITLES type
|
||||
if (attributes['TYPE'] !== 'SUBTITLES') {
|
||||
return null
|
||||
}
|
||||
|
||||
// Extract required fields
|
||||
const name = attributes['NAME']
|
||||
const language = attributes['LANGUAGE'] || attributes['LANG'] || 'unknown'
|
||||
const uri = attributes['URI']
|
||||
const defaultTrack = attributes['DEFAULT'] === 'YES'
|
||||
|
||||
if (!name || !uri) {
|
||||
return null
|
||||
}
|
||||
|
||||
return {
|
||||
label: name,
|
||||
lang: language,
|
||||
src: uri,
|
||||
default: defaultTrack,
|
||||
}
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches and parses M3U8 manifest from URL
|
||||
*/
|
||||
@@ -89,3 +158,20 @@ export const fetchAndParseM3U8 = async (url: string): Promise<AudioTrack[]> => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches and parses M3U8 subtitle tracks from URL
|
||||
*/
|
||||
export const fetchAndParseM3U8Subtitles = async (url: string): Promise<SubtitleTrack[]> => {
|
||||
try {
|
||||
const response = await fetch(url)
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch M3U8: ${response.statusText}`)
|
||||
}
|
||||
|
||||
const manifestContent = await response.text()
|
||||
return parseM3U8SubtitleTracks(manifestContent)
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
/**
|
||||
* RTMP/FLV player dynamic loader
|
||||
* Loads flv.js library with NPM fallback to CDN strategy
|
||||
* Mirrors the HLS loader pattern for consistency
|
||||
*/
|
||||
|
||||
const FLVJS_CDN_URL = 'https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js'
|
||||
|
||||
/**
|
||||
* Dynamically loads flv.js from CDN
|
||||
* @returns Promise that resolves to the flv.js library
|
||||
*/
|
||||
const loadFlvjsFromCDN = async (): Promise<any> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if ((window as any).flvjs) {
|
||||
resolve((window as any).flvjs)
|
||||
return
|
||||
}
|
||||
|
||||
const script = document.createElement('script')
|
||||
script.src = FLVJS_CDN_URL
|
||||
script.async = true
|
||||
|
||||
script.onload = () => {
|
||||
if ((window as any).flvjs) {
|
||||
resolve((window as any).flvjs)
|
||||
} else {
|
||||
reject(new Error('flv.js loaded but not available on window'))
|
||||
}
|
||||
}
|
||||
|
||||
script.onerror = () => {
|
||||
reject(new Error(`Failed to load flv.js from CDN: ${FLVJS_CDN_URL}`))
|
||||
}
|
||||
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads flv.js library
|
||||
* Tries NPM package first, falls back to CDN if unavailable
|
||||
* @returns Promise that resolves to the flv.js library
|
||||
*/
|
||||
export const loadFlvjs = async (): Promise<any> => {
|
||||
try {
|
||||
// Try loading from NPM package first
|
||||
const flvModule = await import('flv.js')
|
||||
return flvModule.default || flvModule
|
||||
} catch (npmError) {
|
||||
console.warn('flv.js NPM package not available, loading from CDN...', npmError)
|
||||
|
||||
try {
|
||||
// Fallback to CDN
|
||||
const flvjs = await loadFlvjsFromCDN()
|
||||
return flvjs
|
||||
} catch (cdnError) {
|
||||
console.error('Failed to load flv.js from both NPM and CDN', cdnError)
|
||||
throw new Error(
|
||||
'Failed to load flv.js library. Please ensure flv.js is available or check your network connection.'
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if flv.js is supported in the current browser
|
||||
* @param flvjs - The flv.js library instance
|
||||
* @returns True if supported
|
||||
*/
|
||||
export const isFlvjsSupported = (flvjs: any): boolean => {
|
||||
if (!flvjs) {
|
||||
return false
|
||||
}
|
||||
|
||||
// flv.js requires Media Source Extensions (MSE)
|
||||
return flvjs.isSupported ? flvjs.isSupported() : false
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets browser support information for flv.js
|
||||
* @param flvjs - The flv.js library instance
|
||||
* @returns Support information object
|
||||
*/
|
||||
export const getFlvjsSupportInfo = (flvjs: any): {
|
||||
mseSupported: boolean
|
||||
networkStreamIOSupported: boolean
|
||||
httpsSupported: boolean
|
||||
} => {
|
||||
if (!flvjs || !flvjs.getFeatureList) {
|
||||
return {
|
||||
mseSupported: false,
|
||||
networkStreamIOSupported: false,
|
||||
httpsSupported: false,
|
||||
}
|
||||
}
|
||||
|
||||
const features = flvjs.getFeatureList()
|
||||
return {
|
||||
mseSupported: features.mseSupported || false,
|
||||
networkStreamIOSupported: features.networkStreamIOSupported || false,
|
||||
httpsSupported: features.httpsSupported || false,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates default flv.js configuration for RTMP/FLV streams
|
||||
* @param isLive - Whether the stream is live
|
||||
* @returns flv.js configuration object
|
||||
*/
|
||||
export const createDefaultFlvConfig = (isLive: boolean = true) => {
|
||||
return {
|
||||
enableWorker: true, // Enable worker for better performance
|
||||
enableStashBuffer: !isLive, // Disable stash buffer for live streams (low latency)
|
||||
stashInitialSize: isLive ? 128 : undefined, // Smaller initial size for live
|
||||
isLive: isLive,
|
||||
lazyLoad: false,
|
||||
lazyLoadMaxDuration: 3 * 60, // 3 minutes for VOD
|
||||
lazyLoadRecoverDuration: 30, // 30 seconds
|
||||
deferLoadAfterSourceOpen: false,
|
||||
autoCleanupSourceBuffer: true,
|
||||
autoCleanupMaxBackwardDuration: 3 * 60, // 3 minutes
|
||||
autoCleanupMinBackwardDuration: 2 * 60, // 2 minutes
|
||||
fixAudioTimestampGap: true,
|
||||
accurateSeek: !isLive, // Disable accurate seek for live streams
|
||||
seekType: isLive ? 'range' : 'param',
|
||||
seekParamStart: 'start',
|
||||
rangeLoadZeroStart: false,
|
||||
reuseRedirectedURL: true,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Extracts quality information from flv.js statistics (if available)
|
||||
* Note: Unlike HLS, FLV/RTMP streams typically don't have multiple quality levels
|
||||
* This is primarily for metadata display
|
||||
* @param player - The flv.js player instance
|
||||
* @returns Basic quality information
|
||||
*/
|
||||
export const extractFlvQualityInfo = (player: any): {
|
||||
width?: number
|
||||
height?: number
|
||||
videoCodec?: string
|
||||
audioCodec?: string
|
||||
fps?: number
|
||||
videoBitrate?: number
|
||||
audioBitrate?: number
|
||||
} | null => {
|
||||
if (!player || !player.statisticsInfo) {
|
||||
return null
|
||||
}
|
||||
|
||||
try {
|
||||
const stats = player.statisticsInfo
|
||||
return {
|
||||
width: stats.videoWidth,
|
||||
height: stats.videoHeight,
|
||||
videoCodec: stats.videoCodec,
|
||||
audioCodec: stats.audioCodec,
|
||||
fps: stats.fps,
|
||||
videoBitrate: stats.videoBitrate,
|
||||
audioBitrate: stats.audioBitrate,
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Failed to extract flv.js quality info:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
/**
|
||||
* RTMP/FLV player setup utility
|
||||
* Initializes and configures flv.js player for RTMP/FLV streams
|
||||
* Mirrors the HLS setup pattern for consistency
|
||||
*/
|
||||
|
||||
import { loadFlvjs, isFlvjsSupported, createDefaultFlvConfig } from './rtmpLoader'
|
||||
import { isLiveStream } from './videoProtocol'
|
||||
|
||||
export interface RtmpSetupOptions {
|
||||
video: HTMLVideoElement
|
||||
src: string
|
||||
autoplay?: boolean
|
||||
onError?: (error: Error) => void
|
||||
onLoadedMetadata?: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up flv.js player instance for RTMP/FLV streaming
|
||||
* @param options - Setup options
|
||||
* @returns Cleanup function to destroy the player
|
||||
*/
|
||||
export const setupRtmpInstance = async ({
|
||||
video,
|
||||
src,
|
||||
autoplay = false,
|
||||
onError,
|
||||
onLoadedMetadata,
|
||||
}: RtmpSetupOptions): Promise<() => void> => {
|
||||
try {
|
||||
// Load flv.js library
|
||||
const flvjs = await loadFlvjs()
|
||||
|
||||
// Check if flv.js is supported
|
||||
if (!isFlvjsSupported(flvjs)) {
|
||||
const error = new Error(
|
||||
'flv.js is not supported in this browser. Media Source Extensions (MSE) is required.'
|
||||
)
|
||||
if (onError) {
|
||||
onError(error)
|
||||
}
|
||||
throw error
|
||||
}
|
||||
|
||||
// Detect if stream is live
|
||||
const isLive = isLiveStream(src)
|
||||
|
||||
// Determine media type
|
||||
let type = 'flv'
|
||||
if (src.startsWith('rtmp://') || src.startsWith('rtmps://')) {
|
||||
// For RTMP URLs, flv.js expects HTTP-FLV endpoint
|
||||
// This is a limitation - direct RTMP playback requires server-side conversion
|
||||
console.warn(
|
||||
'Direct RTMP playback requires an HTTP-FLV proxy. Please ensure your RTMP stream is available via HTTP-FLV.'
|
||||
)
|
||||
type = 'flv'
|
||||
} else if (src.includes('.flv')) {
|
||||
type = 'flv'
|
||||
}
|
||||
|
||||
// Create flv.js player configuration
|
||||
const config = createDefaultFlvConfig(isLive)
|
||||
|
||||
// Create player instance
|
||||
const player = flvjs.createPlayer(
|
||||
{
|
||||
type: type,
|
||||
url: src,
|
||||
isLive: isLive,
|
||||
hasAudio: true,
|
||||
hasVideo: true,
|
||||
},
|
||||
config
|
||||
)
|
||||
|
||||
// Attach to video element
|
||||
player.attachMediaElement(video)
|
||||
|
||||
// Load the stream
|
||||
player.load()
|
||||
|
||||
// Store player instance on video element for later access
|
||||
;(video as any).__rtmpInstance = player
|
||||
|
||||
// Event handlers
|
||||
player.on(flvjs.Events.ERROR, (errorType: string, errorDetail: string, errorInfo: any) => {
|
||||
console.error('flv.js error:', { errorType, errorDetail, errorInfo })
|
||||
|
||||
const error = new Error(`FLV Player Error: ${errorType} - ${errorDetail}`)
|
||||
|
||||
// Handle specific error types
|
||||
if (errorType === flvjs.ErrorTypes.NETWORK_ERROR) {
|
||||
console.error('Network error occurred:', errorDetail)
|
||||
|
||||
// Attempt recovery for recoverable network errors
|
||||
if (
|
||||
errorDetail === flvjs.ErrorDetails.NETWORK_EXCEPTION ||
|
||||
errorDetail === flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID
|
||||
) {
|
||||
console.log('Attempting to recover from network error...')
|
||||
try {
|
||||
player.unload()
|
||||
player.load()
|
||||
return
|
||||
} catch (recoveryError) {
|
||||
console.error('Failed to recover from network error:', recoveryError)
|
||||
}
|
||||
}
|
||||
} else if (errorType === flvjs.ErrorTypes.MEDIA_ERROR) {
|
||||
console.error('Media error occurred:', errorDetail)
|
||||
|
||||
// Some media errors are recoverable
|
||||
if (errorDetail === flvjs.ErrorDetails.MEDIA_MSE_ERROR) {
|
||||
console.log('Attempting to recover from media error...')
|
||||
try {
|
||||
player.unload()
|
||||
player.load()
|
||||
return
|
||||
} catch (recoveryError) {
|
||||
console.error('Failed to recover from media error:', recoveryError)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Call error callback
|
||||
if (onError) {
|
||||
onError(error)
|
||||
}
|
||||
})
|
||||
|
||||
player.on(flvjs.Events.LOADING_COMPLETE, () => {
|
||||
console.log('flv.js: Loading complete')
|
||||
})
|
||||
|
||||
player.on(flvjs.Events.RECOVERED_EARLY_EOF, () => {
|
||||
console.log('flv.js: Recovered from early EOF')
|
||||
})
|
||||
|
||||
player.on(flvjs.Events.METADATA_ARRIVED, (metadata: any) => {
|
||||
console.log('flv.js: Metadata arrived', metadata)
|
||||
|
||||
// Trigger onLoadedMetadata callback
|
||||
if (onLoadedMetadata) {
|
||||
onLoadedMetadata()
|
||||
}
|
||||
})
|
||||
|
||||
player.on(flvjs.Events.STATISTICS_INFO, (stats: any) => {
|
||||
// Statistics info for debugging/monitoring
|
||||
// Can be used to display stream quality, bitrate, etc.
|
||||
if (stats) {
|
||||
;(video as any).__rtmpStats = stats
|
||||
}
|
||||
})
|
||||
|
||||
// Auto-play if requested
|
||||
if (autoplay) {
|
||||
try {
|
||||
await video.play()
|
||||
} catch (playError) {
|
||||
console.warn('Autoplay failed:', playError)
|
||||
// Autoplay might be blocked by browser, ignore error
|
||||
}
|
||||
}
|
||||
|
||||
// Return cleanup function
|
||||
return () => {
|
||||
try {
|
||||
console.log('Cleaning up flv.js player...')
|
||||
|
||||
// Remove event listeners
|
||||
player.off(flvjs.Events.ERROR)
|
||||
player.off(flvjs.Events.LOADING_COMPLETE)
|
||||
player.off(flvjs.Events.RECOVERED_EARLY_EOF)
|
||||
player.off(flvjs.Events.METADATA_ARRIVED)
|
||||
player.off(flvjs.Events.STATISTICS_INFO)
|
||||
|
||||
// Pause and unload
|
||||
video.pause()
|
||||
player.unload()
|
||||
|
||||
// Detach from video element
|
||||
player.detachMediaElement()
|
||||
|
||||
// Destroy player instance
|
||||
player.destroy()
|
||||
|
||||
// Clean up stored references
|
||||
delete (video as any).__rtmpInstance
|
||||
delete (video as any).__rtmpStats
|
||||
} catch (cleanupError) {
|
||||
console.error('Error during flv.js cleanup:', cleanupError)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to setup flv.js player:', error)
|
||||
|
||||
const setupError =
|
||||
error instanceof Error ? error : new Error('Failed to setup RTMP/FLV player')
|
||||
|
||||
if (onError) {
|
||||
onError(setupError)
|
||||
}
|
||||
|
||||
throw setupError
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the current flv.js player instance from a video element
|
||||
* @param video - The video element
|
||||
* @returns The flv.js player instance or null
|
||||
*/
|
||||
export const getRtmpInstance = (video: HTMLVideoElement | null): any | null => {
|
||||
if (!video) {
|
||||
return null
|
||||
}
|
||||
return (video as any).__rtmpInstance || null
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the current flv.js statistics from a video element
|
||||
* @param video - The video element
|
||||
* @returns The statistics object or null
|
||||
*/
|
||||
export const getRtmpStats = (video: HTMLVideoElement | null): any | null => {
|
||||
if (!video) {
|
||||
return null
|
||||
}
|
||||
return (video as any).__rtmpStats || null
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if a video element has an active RTMP player instance
|
||||
* @param video - The video element
|
||||
* @returns True if has active instance
|
||||
*/
|
||||
export const hasRtmpInstance = (video: HTMLVideoElement | null): boolean => {
|
||||
return getRtmpInstance(video) !== null
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
/**
|
||||
* Video protocol detection utility
|
||||
* Detects the streaming protocol from a video URL
|
||||
*/
|
||||
|
||||
export type VideoProtocol = 'native' | 'hls' | 'rtmp' | 'dash'
|
||||
|
||||
export interface ProtocolDetectionResult {
|
||||
protocol: VideoProtocol
|
||||
isLive: boolean
|
||||
needsSpecialPlayer: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Detects the video protocol from the source URL
|
||||
* @param src - The video source URL
|
||||
* @returns Protocol detection result
|
||||
*/
|
||||
export const detectVideoProtocol = (src: string): ProtocolDetectionResult => {
|
||||
if (!src) {
|
||||
return {
|
||||
protocol: 'native',
|
||||
isLive: false,
|
||||
needsSpecialPlayer: false,
|
||||
}
|
||||
}
|
||||
|
||||
const lowerSrc = src.toLowerCase()
|
||||
|
||||
// RTMP protocol detection
|
||||
// Supports: rtmp://, rtmps://, rtmpt://, rtmpe://
|
||||
if (
|
||||
lowerSrc.startsWith('rtmp://') ||
|
||||
lowerSrc.startsWith('rtmps://') ||
|
||||
lowerSrc.startsWith('rtmpt://') ||
|
||||
lowerSrc.startsWith('rtmpe://')
|
||||
) {
|
||||
return {
|
||||
protocol: 'rtmp',
|
||||
isLive: true, // RTMP is typically used for live streaming
|
||||
needsSpecialPlayer: true,
|
||||
}
|
||||
}
|
||||
|
||||
// HLS protocol detection
|
||||
// Check for .m3u8 extension or HLS URL patterns
|
||||
if (lowerSrc.includes('.m3u8')) {
|
||||
return {
|
||||
protocol: 'hls',
|
||||
isLive: lowerSrc.includes('/live/') || lowerSrc.includes('live.m3u8'),
|
||||
needsSpecialPlayer: true,
|
||||
}
|
||||
}
|
||||
|
||||
// DASH protocol detection
|
||||
// Check for .mpd extension
|
||||
if (lowerSrc.includes('.mpd')) {
|
||||
return {
|
||||
protocol: 'dash',
|
||||
isLive: lowerSrc.includes('/live/') || lowerSrc.includes('live.mpd'),
|
||||
needsSpecialPlayer: true,
|
||||
}
|
||||
}
|
||||
|
||||
// HTTP-FLV detection (alternative to RTMP)
|
||||
if (lowerSrc.includes('.flv') || lowerSrc.includes('flv?')) {
|
||||
return {
|
||||
protocol: 'rtmp', // Use RTMP player for FLV files
|
||||
isLive: lowerSrc.includes('/live/') || lowerSrc.includes('live.flv'),
|
||||
needsSpecialPlayer: true,
|
||||
}
|
||||
}
|
||||
|
||||
// Native HTML5 video formats (MP4, WebM, OGG, etc.)
|
||||
return {
|
||||
protocol: 'native',
|
||||
isLive: false,
|
||||
needsSpecialPlayer: false,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the URL is an RTMP stream
|
||||
* @param src - The video source URL
|
||||
* @returns True if RTMP stream
|
||||
*/
|
||||
export const isRtmpStream = (src: string): boolean => {
|
||||
const detection = detectVideoProtocol(src)
|
||||
return detection.protocol === 'rtmp'
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the URL is an HLS stream
|
||||
* @param src - The video source URL
|
||||
* @returns True if HLS stream
|
||||
*/
|
||||
export const isHlsStream = (src: string): boolean => {
|
||||
const detection = detectVideoProtocol(src)
|
||||
return detection.protocol === 'hls'
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the stream is live
|
||||
* @param src - The video source URL
|
||||
* @returns True if live stream
|
||||
*/
|
||||
export const isLiveStream = (src: string): boolean => {
|
||||
const detection = detectVideoProtocol(src)
|
||||
return detection.isLive
|
||||
}
|
||||
Reference in New Issue
Block a user