我的新書AI 職場超神助手:ChatGPT 與生成式 AI 一鍵搞定工作難題的教材投影片已製作完成
歡迎各位有需要的教師和博碩文化索取教材

JavaScript H.264 解碼器介紹 – Broadway

Broadway介紹

Broadway 是一個 JavaScript H.264 解碼器。H.264 是一個廣泛使用的視頻壓縮標準,Broadway 提供了一種在瀏覽器中,特別是不支持該格式的瀏覽器中,直接解碼 H.264 視頻的能力。

主要特點

  1. 純JavaScript:Broadway 是完全用 JavaScript 寫的,這意味著它可以在任何支持 JavaScript 的平台上運行,不需要任何外部插件或擴展。
  2. 多線程支持:Broadway 可以在主線程上運行,也可以在背景工作線程上運行,從而提高性能和響應性。
  3. 網頁集成:使用 Broadway,開發者可以輕鬆地在網頁上集成 H.264 視頻播放功能,無需依賴外部播放器或插件。

Live Demo

當首次訪問上述示範頁面時,可能會感覺視頻播放器的速度有點慢,這是因為它需要首先下載整個視頻才能開始播放。但請有耐心,一旦視頻下載完畢,您可以點擊播放器來觀看視頻。

上面的左上角播放器在主線程上運行,而其餘的播放器在背景工作線程上運行。

本機端使用範例

把Player資料夾內的檔案下載下來,放進本地端的node.js專案的Player資料夾內

檔案連結: https://github.com/mbebenita/Broadway/tree/master/Player

接著撰寫node.js程式

const express = require('express');
const http = require('http');
const path = require('path');
const socketio = require('socket.io');

let eApp = express();
let server = http.Server(eApp);
let io = socketio(server, { pingInterval: 3000, pingTimeout: 60000 });

// 設定靜態檔案的路徑
eApp.use(express.static(path.join(__dirname, '..', 'Player')));

io.on('connection', (socket) => {
    console.log('A user connected');
    socket.on('disconnect', () => {
        console.log('A user disconnected');
    });
});

let config = {
    port: 8080  // 依您的URL端口設定為8080
};
server.listen(config.port, '0.0.0.0', () => {
    let address = server.address();
    console.log(`Server running at ${address.address}:${address.port}`);
});

接著開啟電腦的http://127.0.0.1:8080/treeDemo.html,就可以在本機運行可動的範例了


17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。

如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!