前言

????本播放器內(nèi)部采用jessibuca插件接口，支持錄像、截圖、音視頻播放等功能。播放器播放基于ws流，分屏操作支持1分屏、4分屏、6分屏、9分屏方式。

????jessibuca工作原理是通過Emscripten將音視頻解碼庫編譯成Js（WebAssembly，簡稱wasm)運行于瀏覽器之中，RTSP視頻流通過ffmpeg的Wasm版軟解碼成Video所?持的MP4后播放。此方案由于Wasm不?持硬件解碼，對多路同時播放來說，終端電腦的CPU和內(nèi)存占?會?較?，性能也堪憂。

一、播放器介紹

1.1 界面

1.2 使用

1）安裝Node.js
????可以在Node.js官網(wǎng)（https://nodejs.org）下載Node.js安裝程序，或者通過本博客最后的下載鏈接里有node-v14.12.0-x64.msi的安裝包，然后按照向?qū)нM(jìn)行安裝。安裝完成后，你可以打開終端（Windows系統(tǒng)可以通過“運行”命令打開cmd）并輸入“node -v”命令來測試是否已經(jīng)成功安裝Node.js。如果成功安裝，會輸出Node.js的版本號。

2）在cmd下執(zhí)行node app.js

????該操作執(zhí)行后，將啟動應(yīng)用程序，并綁定到端口3000上，可以直接在瀏覽器上輸入：http://localhost:3000/ 訪問播放器靜態(tài)頁面。

app.js代碼如下：

const http = require('http');
const fs = require('fs');
const path = require('path');const hostname = '127.0.0.1';
const port = 3000;const server = http.createServer((req, res) => {console.log('Request for ${req.url} received.');let filePath = '.' + req.url;if (filePath == './') {filePath = './index.html';}const extname = String(path.extname(filePath)).toLowerCase();const mimeTypes = {'.html': 'text/html','.js': 'text/javascript','.css': 'text/css','.json': 'application/json','.png': 'image/png','.jpg': 'image/jpg','.gif': 'image/gif','.svg': 'image/svg+xml','.wav': 'audio/wav','.mp4': 'video/mp4','.woff': 'application/font-woff','.ttf': 'application/font-ttf','.eot': 'application/vnd.ms-fontobject','.otf': 'application/font-otf','.wasm': 'application/wasm'};const contentType = mimeTypes[extname] || 'application/octet-stream';fs.readFile(filePath, (err, content) => {if (err) {if (err.code == 'ENOENT') {res.writeHead(404, { 'Content-Type': 'text/html' });res.end(`<h1>404 Not Found</h1><p>The requested URL ${req.url} was not found on this server.</p>`);} else {res.writeHead(500, { 'Content-Type': 'text/html' });res.end(`<h1>500 Internal Server Error</h1><p>Sorry, we couldn't process your request. Please try again later.</p>`);}} else {res.writeHead(200, { 'Content-Type': contentType });res.end(content, 'utf-8');}});
});server.listen(port, hostname, () => {console.log('Server running at http://${hostname}:${port}/');
});server.on('request', (req, res) => {if (req.method === 'GET' && req.url === '/hello') {res.writeHead(200, { 'Content-Type': 'text/plain' });res.end('Hello, world!\n');}
});

3）在瀏覽器上輸入：http://localhost:3000/ 訪問與操作播放器靜態(tài)頁面
使用步驟：
1>指定窗口 (1~9)
2>輸入WS流
3>點擊播放等其他操作

????本頁面所有功能都自測正常，可放心使用！！！

二、工程代碼下載

下載鏈接: 無插件網(wǎng)頁播放器