Jessibuca

http://jessibuca.monibuca.com/
Admin
Jessibuca is a pure HTML5 low-latency live stream player that leverages...
Tokens:14,510
Snippets:235
Trust Score:6.5
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install node-static for Electron

Source: http://jessibuca.monibuca.com/document.html

Install the 'node-static' package to create a static file server within an Electron application.

```bash
npm i node-static
```

--------------------------------

### Using Jessibuca after vue-cli-plugin Installation

Source: http://jessibuca.monibuca.com/document.html

Example of how to instantiate Jessibuca globally after installing the vue-cli plugin. The plugin automatically injects the script tag.

```javascript
const instance = new window.Jessibuca({})

```

--------------------------------

### Installing vue-cli-plugin-jessibuca

Source: http://jessibuca.monibuca.com/document.html

Commands to install the vue-cli plugin for Jessibuca using npm or yarn. This plugin helps in automatically including Jessibuca via script tags.

```bash
npm install vue-cli-plugin-jessibuca -D
# use yarn
yarn add vue-cli-plugin-jessibuca -D

```

--------------------------------

### Configure Player for Autoplay with Sound

Source: http://jessibuca.monibuca.com/document.html

To ensure the player starts with sound when autoplay is enabled, configure the player with `isNotMute: true`.

--------------------------------

### Binding Jessibuca Instance to Vue Prototype

Source: http://jessibuca.monibuca.com/document.html

Example of mounting the Jessibuca instance to the Vue prototype for global access. This avoids triggering invalid event listeners.

```javascript
// 可以挂载在Vue上面
Vue.prototype.$player = new Jessibuca({

})

```

--------------------------------

### Enable Debugging with Detailed Level for Jessibuca Pro

Source: http://jessibuca.monibuca.com/document.html

Initialize Jessibuca Pro with `debug: true` and `debugLevel: 'debug'` for comprehensive logging. This provides more granular information to aid in diagnosing issues.

```javascript
const jessibuca = new JessibucaPro({
    // 其他参数
    debug: true,
    debugLevel: 'debug'
})
```

--------------------------------

### Create Static File Server in Electron

Source: http://jessibuca.monibuca.com/document.html

Set up an HTTP server using 'node-static' to serve files for Jessibuca within an Electron app. This bypasses the 'file://' protocol limitation for workers.

```javascript
const {app, BrowserWindow} = require('electron')
const static = require('node-static');
const http = require('http');
// 将程序目录下的js目录设为webroot目录
const file = new (static.Server)(__dirname + "/js");

app.whenReady().then(() => {
    http.createServer(function (req, res) {
        file.serve(req, res);
        // 在本机上监听8080端口提供服务
    }).listen(8888, "127.0.0.1");
    createWindow()
})
```

--------------------------------

### Configure Chrome Shortcut for HEVC Hardware Decoding

Source: http://jessibuca.monibuca.com/document.html

If Chrome lacks a shortcut, create one and add the '--enable-features=PlatformHEVCDecoderSupport' parameter to its target path to enable HEVC hardware decoding on startup.

```bash
--enable-features=PlatformHEVCDecoderSupport
```

--------------------------------

### Configure JessibucaPro Decoder Path

Source: http://jessibuca.monibuca.com/document.html

When encountering 'initDecoderWorkerTimeout' errors, ensure the 'decoder' parameter in JessibucaPro is set to the correct network path for 'decoder-pro.js', not a local project path.

```javascript
const jessibuca = new JessibucaPro({
    decoder: '/static/jessibuca/decoder-pro.js',
})
```

--------------------------------

### Configure Jessibuca Pro for Naked Flow

Source: http://jessibuca.monibuca.com/document.html

To play raw streams that lack a protocol suffix, set `isNakedFlow: true` in the Jessibuca Pro player configuration. This is essential for handling non-standard stream formats.

```javascript
isNakedFlow:true
```

--------------------------------

### Enable Debugging for Jessibuca Open Source

Source: http://jessibuca.monibuca.com/document.html

Set `debug: true` during player initialization to enable detailed logging for troubleshooting. This is useful for capturing console output when errors occur.

```javascript
const jessibuca = new Jessibuca({
    // 其他参数
    debug: true
})
```

--------------------------------

### Recommended Vue Component Structure for Jessibuca

Source: http://jessibuca.monibuca.com/document.html

Vue component template and script demonstrating how to correctly initialize and destroy a Jessibuca player instance using refs. Avoid binding dynamic classes or styles to the container.

```vue
<template>
    <div class="wrap">
        <!--  不要绑定任何的 :class :style 样式  -->
        <div ref="container"></div>
    </div>
</template>
<script>
    export default {
        name: 'App',
        mounted() {
            // 通过 ref 获取到 dom 节点
            const dom = this.$refs['container']
            // 通过 dom 节点获取到 player 实例
            const player = new window.Jessibuca({
                container: dom,
            })
            this.player = player;
        },
        async unmounted() {
            await this.player.destroy();
        }
    }
</script>

```

--------------------------------

### Nginx Configuration for Jessibuca

Source: http://jessibuca.monibuca.com/document.html

Configure Nginx to serve Jessibuca files from a specified directory. Ensure the 'root' directive points to your HTML files and 'listen' specifies the port.

```nginx
user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    keepalive_timeout  65;

    include /etc/nginx/conf.d/*.conf;   # 默认会加载 conf.d 下的所有配置文件

    # 你可以在这里直接加一个 server 块👇
    server {
        listen 8080;                      # 监听端口
        server_name localhost;            # 域名（可改成你的 IP 或域名）

        root /home/www/myapp/pro;         # 你的 HTML 文件所在目录
        index index.html;                 # 默认首页文件

        location / {
            try_files $uri $uri/ =404;    # 如果文件不存在则返回404
        }
    }
}
```

--------------------------------

### Configure Jessibuca to Play FLV without Extension

Source: http://jessibuca.monibuca.com/document.html

When the playback URL does not have a file extension (e.g., `.flv`), set `isFlv: true` in the player configuration to ensure it's parsed as FLV format.

```javascript
isFlv:true
```

--------------------------------

### Configuring Allowed Ports for WebGL Contexts

Source: http://jessibuca.monibuca.com/document.html

When encountering 'Too many active WebGL contexts' or related rendering errors, consider reducing the number of screens, prioritizing MSE decoding with video rendering, or using the Pro version. If using restricted ports like 10080, you can either change the website's listening port or explicitly allow the port using a command-line flag (though the latter is not recommended).

```bash
# Example of explicitly allowing a port (not recommended)
# --explicitly-allowed-ports=10080
```

--------------------------------

### HTTP Configuration for Jessibuca

Source: http://jessibuca.monibuca.com/document.html

Configuration object for enabling MSE and WASM support over HTTP.

```json
{
    useMSE:true,
    autoWasm:true
}

```

--------------------------------

### Binding Jessibuca Instance to Vue $options

Source: http://jessibuca.monibuca.com/document.html

Alternative method for mounting the Jessibuca instance to Vue's $options. This also helps avoid invalid event listeners.

```javascript
// 也可以挂载在 $options 上面
this.$options.jessibuca = new Jessibuca({

})

```

--------------------------------

### Enable Experimental Web Platform Features

Source: http://jessibuca.monibuca.com/document.html

For Chrome/Edge versions 86 and later, WebCodecs API for hardware decoding is an experimental feature. It requires manual enabling via chrome://flags or a command-line flag.

```bash
chrome://flags/#enable-experimental-web-platform-features
```

```bash
--enable-blink-features=WebCodecs
```

--------------------------------

### Enable Autoplay with Sound on Page Load

Source: http://jessibuca.monibuca.com/document.html

Use `performance.navigation.type` to detect page load conditions and `jessibuca.cancelMute()` to enable sound. This is useful for scenarios where the page is loaded via navigation or script execution.

```javascript
jessibuca.on('start', () => {
    /**
     * 0：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载，相当于常数performance.navigation.TYPE_NAVIGATE。
     * 1：网页通过“重新加载”按钮或者location.reload()方法加载，相当于常数performance.navigation.TYPE_RELOAD。
     * 2：网页通过“前进”或“后退”按钮加载，相当于常数performance.navigation.TYPE_BACK_FORWARD。
     * 255：任何其他来源的加载，相当于常数performance.navigation.TYPE_RESERVED。
     */
    if (performance.navigation.type === 0) {
        jessibuca.cancelMute();
    }
})
```

--------------------------------

### Check Chrome GPU Status for Video Acceleration

Source: http://jessibuca.monibuca.com/document.html

After configuring Chrome, visit chrome://gpu and search for 'Video Acceleration' to verify if hardware decoding has been successfully enabled.

```bash
chrome://gpu
```

--------------------------------

### Recommended React Component Structure for Jessibuca

Source: http://jessibuca.monibuca.com/document.html

React component using `useRef` and `useEffect` to initialize and manage the Jessibuca player instance. Ensures proper cleanup by initializing within `useEffect`.

```javascript
import React, {useEffect, useRef} from 'react'

export default function App() {
    const container = useRef(null)
    useEffect(() => {
        const player = new window.Jessibuca({
            container: container.current,
        })
    }, [])
    return (
        <div className="wrap">
            <div ref={container}></div>
        </div>
    )
}

```

--------------------------------

### HTTPS Configuration for Jessibuca

Source: http://jessibuca.monibuca.com/document.html

Configuration object for enabling WCS and WASM support over HTTPS.

```json
{
    useWCS:true,
    autoWasm:true
}

```

--------------------------------

### Enable Sound on User Click Interaction

Source: http://jessibuca.monibuca.com/document.html

Attach an event listener to a container element to call `jessibuca.cancelMute()` when the user clicks. This ensures sound is enabled only after a user interaction.

```javascript
$container.addEventListener('click', function () {
    jessibuca.cancelMute()
}, false)
```

--------------------------------

### HTML Structure for Jessibuca in Electron

Source: http://jessibuca.monibuca.com/document.html

Include Jessibuca.js in your HTML file. Ensure the Content Security Policy meta tags are commented out if they interfere with script loading.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--    注意：这个需要注释掉 -->
    <!--    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">-->
    <!--    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">-->
    <title>Document</title>
    <script type="text/javascript" src="http://localhost:8080/jessibuca.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    //
    var jessibuca = new Jessibuca({
        container: document.getElementById('container'),
    })

    jessibuca.play('http://xxx.xxx.xxx.xxx:8080/xxx.flv')
</script>

</body>

</html>
```

--------------------------------

### Check Edge GPU Status for Video Acceleration

Source: http://jessibuca.monibuca.com/document.html

For Edge browsers, navigate to edge://gpu to check the status of video acceleration and confirm HEVC hardware decoding is active.

```bash
edge://gpu/
```

--------------------------------

### Enable Hardware Accelerated Video Decode in Chrome Flags

Source: http://jessibuca.monibuca.com/document.html

To enable hardware decoding in Chrome, navigate to chrome://flags and enable the 'Hardware-accelerated video decode' option.

```bash
chrome://flags
```

--------------------------------

### Configure ANGLE Graphics Backend in Edge

Source: http://jessibuca.monibuca.com/document.html

In Edge, navigate to edge://flags and set the 'Choose ANGLE graphics backend' option to 'D3D11' to potentially improve HEVC hardware decoding performance. Restart the browser after changing the setting.

```bash
edge://flags/
```

--------------------------------

### Initializing Wasm with Larger Memory Allocation

Source: http://jessibuca.monibuca.com/document.html

If a 'memory access out of bounds' error in WebAssembly is due to insufficient memory for decoding large video streams, you can attempt to allocate more memory during Wasm initialization.

```javascript
// Example of initializing Wasm with larger memory (conceptual)
const memory = new WebAssembly.Memory({ initial: 256 }); // Adjust initial pages as needed
const instance = await WebAssembly.instantiate(wasmBytes, {
  env: {
    memory: memory
  }
});
```

--------------------------------

### Configure WebView for Inline Playback (iOS)

Source: http://jessibuca.monibuca.com/document.html

Set the WebView's `allowsInlineMediaPlayback` property to `YES` to prevent forced fullscreen playback and allow inline video playback.

```objective-c
allowsInlineMediaPlayback = YES
```

--------------------------------

### 服务器出口带宽计算公式

Source: http://jessibuca.monibuca.com/pro.html

用于估算视频流服务所需的总出口带宽，建议根据网络质量预留20%-50%的冗余系数。

```text
所需带宽 = 单路视频码率 × 并发观看人数 × (1 + 冗余系数)
```

--------------------------------

### Add HEVC Decoder Support to Electron Launch

Source: http://jessibuca.monibuca.com/document.html

For Electron 20 (Chromium 104) and later, HEVC hardware decoding is integrated for Mac and Windows. Enable it by appending a command-line switch during app startup.

```javascript
app.commandLine.appendSwitch('enable-features', 'PlatformHEVCDecoderSupport')
```

--------------------------------

### Increasing Wasm Memory or Reducing Resolution

Source: http://jessibuca.monibuca.com/document.html

The 'RuntimeError: abort(OOM)' error signifies that the WebAssembly module has run out of memory. Solutions include increasing the memory allocated to Wasm or reducing the resolution of the video streams being processed.

```bash
# To increase Wasm memory, consult the Wasm runtime or build system configuration.
# To reduce video resolution, adjust the stream source or player settings.
```

--------------------------------

### CSS for H5 Fullscreen Video

Source: http://jessibuca.monibuca.com/document.html

CSS styles to make the video container occupy the full viewport during H5 fullscreen. Ensure no parent elements interfere with `position: fixed`.

```css
{
    position: fixed ;
    z-index: 9999 ;
    left: 0 ;
    top: 0 ;
    right: 0 ;
    bottom: 0 ;
    width: 100vw !important ;
    height: 100vh !important ;
    background: #000 ;
}
```

--------------------------------

### Reload Nginx Configuration

Source: http://jessibuca.monibuca.com/document.html

After modifying the Nginx configuration file, reload Nginx to apply the changes.

```bash
sudo nginx -s reload
```

--------------------------------

### Verifying decoder.wasm Download for Fetch Errors

Source: http://jessibuca.monibuca.com/document.html

A 'failed to execute 'fetch' on 'workerGlobalScope' : failed to parse url from decoder.wasm' error typically means the `decoder.wasm` file failed to download. This often occurs if `decoder:cdn url` is configured but the `decoder.wasm` URL within `decoder.js` hasn't been updated accordingly.

```javascript
// Ensure the URL for decoder.wasm in decoder.js matches the CDN configuration.
// Example: If decoder.js is loaded from CDN, ensure decoder.wasm is also accessible from the same or a specified CDN path.
```

--------------------------------

### Ensuring decoder.js and decoder.wasm Match

Source: http://jessibuca.monibuca.com/document.html

This error indicates a mismatch between decoder.js and decoder.wasm. Ensure you replace both files completely and simultaneously. Clearing browser cache is also recommended after updating these files.

```javascript
// Ensure decoder.js and decoder.wasm are from the same version.
// Clear browser cache (F12 -> Network Tab -> Disable cache) and refresh.
```

--------------------------------

### Checking for DevTools Impact on Page Crashes

Source: http://jessibuca.monibuca.com/document.html

If your page crashes, first check if `devTools` are enabled. DevTools can consume significant memory and potentially lead to browser instability or crashes.

```javascript
// Check if devTools are enabled. If so, try disabling them to see if the crash persists.
// console.log('DevTools might be consuming significant memory.');
```

--------------------------------

### Enable Fullscreen in iframe

Source: http://jessibuca.monibuca.com/document.html

Add the `allowfullscreen` attribute to the iframe tag to enable fullscreen functionality for embedded content.

```html
<iframe allowfullscreen src=""></iframe>
```

--------------------------------

### Checking Chrome/Edge Crash Logs

Source: http://jessibuca.monibuca.com/document.html

After a crash, you can check `chrome://crashes/` (or the equivalent for Edge) to view detailed crash logs. This can provide valuable information for diagnosing issues like STATUS_ACCESS_VIOLATION.

```bash
# Access crash logs via chrome://crashes/ or edge://crashes/
```

--------------------------------

### Chrome Sandbox Memory Limit Calculation

Source: http://jessibuca.monibuca.com/document.html

This C++ code snippet illustrates how Chrome determines the memory limit for its sandbox based on physical memory and sandbox type. Generally, for a 16GB RAM computer, the sandbox limit is 8GB. Multiple tabs from the same domain typically share a single sandbox process.

```cpp
int64_t physical_memory = base::SysInfo::AmountOfPhysicalMemory();if (sandbox_type == SandboxType::kGpu && physical_memory > 64 * GB) {
memory_limit = 64 * GB;
} else if (sandbox_type == SandboxType::kGpu && physical_memory > 32 * GB) {
memory_limit = 32 * GB;
} else if (physical_memory > 16 * GB) {
memory_limit = 16 * GB;
} else if (physical_memory > 8 * GB) {
memory_limit = 8 * GB;
}

```

--------------------------------

### Enable Media Autoplay in iOS WebView

Source: http://jessibuca.monibuca.com/document.html

For autoplay to work in an iOS WebView, set the `mediaPlaybackRequiresUserAction` property to `NO`.

```objective-c
mediaPlaybackRequiresUserAction = NO
```

--------------------------------

### Enable Media Autoplay in Android WebView

Source: http://jessibuca.monibuca.com/document.html

To allow media autoplay in an Android WebView, set the `setMediaPlaybackRequiresUserGesture` property to `false`.

```java
webView.getSettings().setMediaPlaybackRequiresUserGesture(false)
```
Tokens:
Raw