Posted on by

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，就可以在本機運行可動的範例了