JessibucaPro Doc

开源版 升级到 Pro 版本

替换文件

只需要无脑的将pro/js下面的所有js和wasm文件替换到原本的开源版js目录下即可。

需要将原本开源版的

  • jessibuca.js（需要通过script标签引入）
  • decoder.js (初始化参数decoder参数配置)
  • decoder.wasm (胶水文件)

替换成

  • jessibuca-pro.js（web-player-pro.js） 或 jessibuca-pro-multi.js（web-player-pro-multi.js） // 主文件(需要通过script标签引入)
  • decoder-pro.js ---(初始化参数decoder参数配置)
  • decoder-pro.wasm---(胶水文件)
  • decoder-pro-simd.js ---(初始化参数decoder参数配置)
  • decoder-pro-simd.wasm---(胶水文件)
  • decoder-pro-f-simd.js ---(初始化参数decoder参数配置)
  • decoder-pro-f-simd.wasm---(胶水文件)
  • decoder-pro-audio.js---(不需要配置，播放器内部会引用)
  • decoder-pro-audio.wasm---(胶水文件)
  • decoder-pro-hard.js---(硬解码解封装数据,播放器内部会引用)
  • decoder-pro-hard-not-wasm.js---(硬解码解封装数据,播放器内部会引用)
  • decoder-pro-mt.js---(多线程解码，不需要配置，播放器内部会引用)
  • decoder-pro-mt-worker.js---(多线程解码，不需要配置，播放器内部会引用)
  • decoder-pro-mt-worker.wasm---(多线程解码，胶水文件)
  • decoder-pro-mt-worker.worker.js---(多线程解码，不需要配置，播放器内部会引用)
  • decoder-pro-simd-mt.js---(多线程解码，不需要配置，播放器内部会引用)
  • decoder-pro-simd-mt-worker.js---(多线程解码，不需要配置，播放器内部会引用)
  • decoder-pro-simd-mt-worker.wasm---(多线程解码，胶水文件)
  • decoder-pro-simd-mt-worker.worker.js---(多线程解码，不需要配置，播放器内部会引用)
  • decoder-pro-f-simd-mt.js---(多线程解码 v2版本，不需要配置，播放器内部会引用)
  • decoder-pro-f-simd-mt-worker.js---(多线程解码 v2版本，不需要配置，播放器内部会引用)
  • decoder-pro-f-simd-mt-worker.wasm---(多线程解码 v2版本，胶水文件)
  • decoder-pro-f-simd-mt-worker.worker.js---(多线程解码 v2版本，不需要配置，播放器内部会引用)
  • decoder-pro-old.js---(硬解码解封装数据,播放器内部会引用)
  • decoder-pro-old.wasm---(胶水文件)
  • decoder-pro-audio-only.js---(单独音频解码器,播放器内部会引用)
  • decoder-pro-video-only.js---(单独视频解码器,播放器内部会引用)
  • decoder-pro-video-f-simd-only.js---(单独视频解码器,播放器内部会引用)
  • decoder-pro-video-simd-only.js---(单独视频解码器,播放器内部会引用)

如果有多屏需求，可以将jessibuca-pro.js替换成jessibuca-pro-multi.js。

jessibuca-pro.js 与jessibuca-pro-multi.js只需要引用一个即可（不需要两个同时引用）。

decoder-pro-simd.js是simd解码器（适用于高分辨率解码）

decoder-pro-f-simd.js是simd解码器(v2版本)

按需配置解码器

只需要硬解码（音频+视频）

如果业务里面能够保证运行环境只需要硬解码的话（支持H264/H265硬解码，音频格式是aac/mp3的）

某些浏览器不支持H265硬解码，或者需要安装H265的解码器才能支持硬解码。

MediaSource 硬解码视频支持H264/H265，音频支持aac/mp3

webcodec 硬解码视频支持H264/H265，音频支持aac/mp3/g711a/g711u，需要https环境。

需要引用的资源文件（js文件夹里面包含的文件）

  • jessibuca-pro.js（web-player-pro.js）随便引用一个即可
  • decoder-pro-hard-not-wasm.js

配置的参数如下：

const jessibucaPro = new JessibucaPro({
    // ...
    decoder: 'your-path/decoder-pro.js', // 还是需要正常配置一个decoder-pro.js 地址的，播放器内部会根据参数情况替换成  decoder-pro-hard-not-wasm.js 的
    useMSE: true, // 是否使用MediaSource， 如果播放流的音频有g711a/g711u格式，则需要设置为false
    useWCS: true, // 是否使用webcodec
    useWASM:false, // 是否使用wasm解码
    useSIMD:false, // 是否使用wasm(simd)解码
    autoWASM:false, // 是否自动切换wasm解码
    decoderErrorAutoWasm:false, // 是否解码错误自动切换wasm解码
})

即可

如果不想走worker线程请求流，并且解封装数据，可以配置 demuxUseWorker:false 就行了。

这样就只需要一个

  • jessibuca-pro.js（web-player-pro.js）随便引用一个即可 就行了。

decoder 参数还是需要正常配置的，只不过播放器不会再启动worker线程了。

需要硬解码+软解码（音频+视频）

一般情况下这种模式是最常见的，因为硬解码不支持的格式，可以通过软解码来支持。

需要引入

  • jessibuca-pro.js（web-player-pro.js）随便引用一个即可
  • decoder-pro-hard-not-wasm.js
  • decoder-pro.js ---(初始化参数decoder参数配置)
  • decoder-pro.wasm---(胶水文件)
  • decoder-pro-simd.js ---(初始化参数decoder参数配置)
  • decoder-pro-simd.wasm---(胶水文件)
  • decoder-pro-audio.js---(不需要配置，播放器内部会引用)
  • decoder-pro-audio.wasm---(胶水文件)
  • decoder-pro-hard.js---(硬解码解封装数据,播放器内部会引用)

需要硬解码+软解码（音频+视频）多线程模式

需要检查下环境是否支持多线程模式，不支持的话，则没法使用多线程模式。

在上面引用的资源的基础上面，需要额外引入

  • decoder-pro-mt.js---(多线程解码，不需要配置，播放器内部会引用)
  • decoder-pro-mt-worker.js---(多线程解码，不需要配置，播放器内部会引用)
  • decoder-pro-mt-worker.wasm---(多线程解码，胶水文件)
  • decoder-pro-mt-worker.worker.js---(多线程解码，不需要配置，播放器内部会引用)
  • decoder-pro-simd-mt.js---(多线程解码，不需要配置，播放器内部会引用)
  • decoder-pro-simd-mt-worker.js---(多线程解码，不需要配置，播放器内部会引用)
  • decoder-pro-simd-mt-worker.wasm---(多线程解码，胶水文件)
  • decoder-pro-simd-mt-worker.worker.js---(多线程解码，不需要配置，播放器内部会引用)

需要硬解码+软解码（音频+视频）需要支持老版本的ios safari浏览器

需要额外引入

  • decoder-pro-old.js---(硬解码解封装数据,播放器内部会引用)
  • decoder-pro-old.wasm---(胶水文件)

替换方法

将原本 new Jessibuca() 的地方替换成 new JessibucaPro()

// 原本的
const jessibuca = new Jessibuca({
    // ...
})

// 替换成
const jessibucaPro = new JessibucaPro({
    // ...
})

// 替换成 多屏
const jessibucaProMulti = new JessibucaProMulti({
    // ...
})

需要将原本开源版的 destroy() 从同步方法，修改为异步方法

// 原本的
jessibuca.destroy()


// 替换成
await jessibucaPro.destroy()
// 或者
jessibucaPro.destroy().then(() => {
    // ...
})

将原本的判断 hasLoaded() 和监听load事件

// 原本的
if (jessibuca.hasLoaded()) {
    // ...
    jessibuca.play('url');
} else {
    jessibuca.on(Jessibuca.EVENTS.load, () => {
        // ...
        jessibuca.play('url');
    })
}

// 替换成
jessibuca.play('url');

将原本的

jessibuca.play('url').catch(()=>{
    //
});

替换成

// 主线程发起的请求，会触发catch事件。可以无视不管。
jessibuca.play('url').catch(()=>{
    // 不需要处理啥了。
});

// 需要额外监听，因为现在支持worker 线程发起请求，所以需要监听playFailedAndPaused事件。
jessibuca.on('playFailedAndPaused',()=>{

})

vue 里面

在组件里面的beforeDestroy里面调用destroy方法


// 原本的
beforeDestroy() {
    this.jessibuca.destroy()
}

// 替换成
async beforeDestroy() {
    await this.jessibucaPro.destroy()
}

react 里面

在组件里面的componentWillUnmount里面调用destroy方法


// 原来的
componentWillUnmount() {
    this.jessibuca.destroy()
}

// 替换成
async componentWillUnmount() {
    await this.jessibucaPro.destroy()
}

音频播放器

  • jessibuca-pro-audio-player.js ---音频播放器主文件(需要通过script标签引入)
  • decoder-pro-audio-player.js -----worker解码器(这个库无需引入)
  • decoder-pro-audio.wasm ---worker解码器胶水文件(这个库无需引入)

语音通讯

  • jessibuca-pro-talk.js（web-player-pro-talk.js）---语音通讯主文件(需要通过script标签引入)

服务器配置wasm支持

最新版本的chrome（version >= 112）貌似对于wasm 格式返回 application/otct-stream 的文件会报错，需要服务器配置支持

nginx

方法一：（推荐）

在 mime.types 文件中添加

application/wasm wasm;

方法二：

location ~* \.wasm$ {
    add_header Content-Type application/wasm;
}

IIS

在 web.config 文件中添加

<staticContent>
    <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
</staticContent>

apache

在 httpd.conf 文件中添加

AddType application/wasm .wasm