### 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 ``` -------------------------------- ### 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 (
) } ``` -------------------------------- ### 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 Document
``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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) ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.