WXInlinePlayer
1.3.6
라이브 방송과 짧은 비디오의 등장으로 비디오는 더 많은 양의 정보를 전달하기 때문에 운영/제품 정보를 출력하는 매우 주류적인 방법이 되었습니다. 그러나 다양한 국내 브라우저 제조업체의 관심으로 인해 HTML5의 비디오 기능에 많은 제한을 두었습니다. 이는 다음 사항에 국한되지 않습니다.
구체적인 질문은 Tencent IMWeb 팀이 작성한 "복잡한 프레임 애니메이션의 모바일 단말기 비디오 마이닝 구현"을 참조하세요.
이러한 문제를 해결하기 위해 우리는 FLV를 소프트 디코딩하여 WXInlinePlayer를 구현했습니다. 사용된 타사 기술과 플랫폼 API는 다음과 같습니다.
동시에 우리는 FLV Demuxer의 WebAssembly 버전도 작성했습니다. lib/codec에서 관련 코드를 찾을 수 있습니다.
호환성 테스트에서는 참고용으로만 BrowserStack 서비스에서 제공하는 관련 모델을 사용합니다.
https://eroszy.github.io/WXInlinePlayer/example/index.html
Parcel/emscripten 1.38.45/cmake 및 make를 설치했는지 확인한 후 다음 명령을 실행하십시오.
npm install # 初始化工程
npm update # 更新工程有关的插件。如果网络错误，改用 cnpm update
bash build.sh최종 제품은 예제 폴더에 있습니다.
참고:
- *nix 환경에서 빌드하세요. Windows에서 OpenH264의 컴파일은 보장되지 않습니다.
- emscripten이 버전 1.38.45인지 확인하세요. 그렇지 않으면 wasm32 오류가 발생합니다.
- cmake 버전은 3.16 이상이어야 합니다.
<!DOCTYPE html >
< html >
< head >
< meta charset =" UTF-8 " />
< title > WXInlinePlayer </ title >
< style >
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
</ style >
</ head >
< body >
< canvas id =" container " width =" 800 " height =" 450 " > </ canvas >
< script src =" ./index.js " > </ script >
< script >
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( {
asmUrl : './prod.baseline.asm.combine.js' ,
wasmUrl : './prod.baseline.wasm.combine.js'
} ) ;
WXInlinePlayer . ready ( ) . then ( ( ) => {
const player = new WXInlinePlayer ( {
url : 'https://static.petera.cn/mm.flv' ,
$container : document . getElementById ( 'container' ) ,
hasVideo : true ,
hasAudio : true ,
volume : 1.0 ,
muted : false ,
autoplay : true ,
loop : true ,
isLive : false ,
chunkSize : 128 * 1024 ,
preloadTime : 5e2 ,
bufferingTime : 1e3 ,
cacheSegmentCount : 64 ,
customLoader : null
} ) ;
const { userAgent } = navigator ;
const isWeChat = / MicroMessenger / i . test ( userAgent ) ;
if ( ! isWeChat ) {
alert ( 'click to play!' ) ;
document . body . addEventListener ( 'click' , ( ) => {
player . play ( ) ;
} ) ;
}
} ) ;
}
</ script >
</ body >
</ html >프로젝트 루트 디렉터리에서 다음 명령을 입력하여 서버를 시작합니다.
npm run serve그런 다음 데모에 액세스하려면 URL을 입력하세요.
http://localhost:8888/example/index.html
현재 실행 환경이 WXInlinePlayer를 지원하는지 여부.
if ( WXInlinePlayer . isSupport ( ) ) {
console . log ( 'WXInlinePlayer support' ) ;
}WXInlinePlayer를 초기화하려면 로드된 H264 디코딩 라이브러리의 특정 주소를 전달해야 합니다. 디코딩 라이브러리를 선택하려면 디코딩 종속성을 선택하는 방법을 참조하세요.
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( {
asmUrl : './prod.baseline.asm.combine.js' ,
wasmUrl : './prod.baseline.wasm.combine.js'
} ) . catch ( e => {
console . log ( `WXInlinePlayer init error: ${ e } ` ) ;
} ) ;
}WXInlinePlayer가 준비되었으며 안전하게 초기화할 수 있습니다.
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( { /*.....*/ } ) ;
WXInlinePlayer . ready ( ) . then ( ( ) => {
console . log ( 'WXInlinePlayer ready' ) ;
} ) ;
}WXInlinePlayer 생성자 관련 초기화 매개변수에 대한 초기화 매개변수를 참조하세요.
WXInlinePlayer . ready ( ) . then ( ( ) => {
const player = new WXInlinePlayer ( { /*...*/ } ) ;
} ) ;비디오 재생용. 브라우저 제한(WeChat 및 Chrome 66 미만 버전 제외)으로 인해 상위 버전에서는 오디오 자동 재생이 비활성화되어 있으므로 이 방법을 직접 호출하는 것은 효과적이지 않을 수 있습니다. 클릭/터치시작/터치엔드/터치이동 등을 수행하십시오. 적극적으로 이벤트를 트리거합니다.
document . body . addEventListener ( 'click' , ( ) => {
player . play ( ) ;
} ) ;전체 플레이어를 중지하고 다시 시작할 수 없습니다.
player . stop ( ) ;현재 재생을 일시 중지합니다.
player . pause ( ) ;일시 중지로 인해 일시 중지된 작업을 재개합니다.
player . resume ( ) ;현재 볼륨을 가져오거나 설정합니다.
const volume = player . volume ( ) ; // get volume
player . volume ( volume ) ; // set volume음소거 상태를 가져오거나 설정합니다.
const muted = player . mute ( ) ; // get mute
player . mute ( muted ) ; // set mute플레이어를 파괴하고 재활용을 위해 모든 메모리를 해제합니다.
player . destroy ( ) ;현재 재생 시간을 가져오세요. 음수 값이 있을 수 있으므로 주의해서 처리하시기 바랍니다.
player . on ( 'timeUpdate' , ( ) => {
let currentTime = player . getCurrentTime ( ) ;
currentTime = currentTime <= 0 ? 0 : currentTime ;
} ) ;재생 가능 시간은 버퍼링 시간으로 이해될 수 있습니다.
player . on ( 'timeUpdate' , ( ) => {
const duration = player . getAvaiableDuration ( ) ;
} ) ; 현재 다음과 같은 3가지 디코딩 라이브러리 세트가 있습니다.
차이점은 다음과 같습니다.
종속 라이브러리의 크기에 민감한 광고 영상/마케팅 영상/소형 애니메이션 영상 재생 시에는 Baseline.asm/baseline.wasm을 사용하고, 의존 라이브러리 크기에 민감하지 않은 주문형 영상/라이브 영상 재생 시에는 사용을 권장합니다. 종속 라이브러리의 크기. all.asm/all.wasm.
개발 시스템에서 동일한 비디오에 대해 Taobao 및 Huajiao와 같은 WXInlinePlayer 및 FFMpeg 구현은 유사한 메모리 사용량 및 CPU 사용량을 가지며, WXInlinePlayer의 전체 성능은 FFMpeg 솔루션보다 약 5~10% 더 우수하며 H265는 디블로킹을 줄였습니다. 성능은 FFMpeg 솔루션보다 약 30% 향상되었습니다. 다음은 H265 재생 성능을 비교한 것입니다.
WXInlinePlayer의 지연 및 지연은 주로 다음 세 곳에서 발생합니다.
일반적으로 사용자의 네트워크 환경이 좋다면 WebGL을 이용한 렌더링은 병목 현상이 거의 발생하지 않으며(조작이 매우 간단함) 일반적으로 소프트 디코딩 성능이 부족하여 지속적인 정지 및 지연이 발생합니다.
불충분한 소프트 디코딩 성능으로 인한 지연을 최적화하기 위해 일반적으로 여러 위치에서 시작합니다.
현재 WXInlinePlayer는 중급 및 고급형 시스템에서 1280x720, 코드 속도 1024 및 프레임 속도 24fps 비디오를 비교적 원활하게 디코딩할 수 있습니다.
위에서 언급한 비디오 매개변수와 관련하여 FFmpeg를 통해 볼 수 있습니다.
ffmpeg -i " your.flv "여기에서는 참고용으로 주류 플랫폼의 프로필/프레임 속도/코드 속도/해상도를 제공합니다.
| 플랫폼 | 유형 | 명쾌함 | 윤곽 | 프레임 속도 | 코드율 | 해결 |
|---|---|---|---|---|---|---|
| 호랑이 이빨 | 가로 화면 | SD | 높은 | 스물넷 | 500,000 | 800x450 |
| 호랑이 이빨 | 가로 화면 | HD | 높은 | 스물넷 | 1200k | 1280x720 |
| 호랑이 이빨 | 세로 화면 | HD | 기본 | 16 | 1280k | 540x960 |
| 치슈 | 세로 화면 | SD | 높은 | 15 | 307k | 204x360 |
| 치슈 | 세로 화면 | HD | 높은 | 15 | 512k | 304x540 |
| 치슈 | 세로 화면 | 울트라 클리어 | 기준선 | 15 | 1440k | 720x1280 |
| 틱톡 | 세로 화면 | 기본 | 높은 | 30 | 1600k(추가 변경 사항, 참고용) | 720x1280 |
| 빠른 일꾼 | 세로 화면 | 기본 | 높은 | 25 | 2880k(추가 변경 사항, 참고용) | 720x1280 |
우리는 당신을 추천합니다:
WXInlinePlayer에서 일반적으로 사용되는 저지연 구성 매개변수는 다음과 같습니다. 참고용으로만 라이브 스트림/주문형 파일 구성에 따라 조정하십시오.
{
chunkSize : 128 * 1024 ,
preloadTime : 5e2 ,
bufferingTime : 1e3 ,
cacheSegmentCount : 64 ,
}동시에 성능 이벤트를 사용하여 현재 디코딩 성능을 확인한 다음 사용자에게 메시지를 표시하고 백업 솔루션(예: 직접 비디오 재생/정적 이미지/시퀀스 프레임 등)으로 다운그레이드할 수 있습니다.
player . on ( 'performance' , ( { averageDecodeCost , averageUnitDuration } ) => {
const prop = averageUnitDuration / averageDecodeCost ;
if ( prop >= 2.0 ) {
console . log ( 'good performance' ) ;
} else if ( prop < 2.0 && prop >= 1.0 ) {
console . log ( 'ok, thats fine' ) ;
} else {
console . log ( 'bad performance' ) ;
}
} ) ; FFmpeg 솔루션에는 현재 몇 가지 주요 문제가 있습니다. 첫 번째는 디코딩 라이브러리의 크기입니다. 축소 후 약 2M이고 gzip은 약 600k입니다. 이는 종속 라이브러리의 크기를 고려하는 제품에는 허용되지 않습니다. 둘째, FFmpeg의 솔루션은 스스로 최적화하기가 어렵습니다. 예를 들어 WXInlinePlayer는 2.0에서 다중 작업자 디코딩을 수행하므로 이러한 솔루션을 수정하는 데 비용이 매우 많이 듭니다.
지연 및 지연의 원인은 복잡합니다. WXInlinePlayer의 경우 일반적으로 디코딩 속도가 재생 속도를 따라잡지 못합니다. 최적화를 위해 지연 및 지연을 줄이는 방법을 참조하세요.
iOS와 Android UC 모두 WebAssembly/ASM.js를 거세했기 때문에 이를 지원하지 않습니다.
FFmpeg 또는 기타 유사한 도구를 사용하십시오. 다음은 간단한 명령 예입니다.
ffmpeg -i " your.mp4 " -vcodec libx264 -acodec aac out.flvWXInlinePlayer의 FLV 사양은 Kingsoft의 FLV 확장 사양을 따릅니다. 관련 인코딩을 수행해야 하는 경우 관련 FFmpeg 패치나 Kingsoft에서 작성한 인코더를 참조할 수 있습니다.
