串流视讯推播即时影像.PDF

串流視訊 / 推播即時影像 實驗說明：讓樹莓派照相機持續拍攝，並即時推送給用戶端，在用戶的網頁顯 示出動態影像的串流視訊效果。 實驗程式：本單元的前端網頁包含一個開始串流鈕，按下此按鈕，它將透過 socket.io 傳送 start 事件訊息給 Node 程式，讓它開始拍照並且更新影像；若 用戶離線，Node 程式的 disconnect 事件處理程式將被觸發，進而停止拍照。 Node 專案資料夾結構如下，靜態網頁置於 www 資料夾，即時拍攝的影像檔 放在 images 路徑。每當 Node 拍攝完照片，它將透過 socket.io 傳遞 liveCam 事件訊息給前端： 伺服器端 Node 程式碼：Node 程式採用 express 提供網站伺服器服務，程式 一開始先引用必要的模組： var express = require(express); var io = require(socket.io); var exec = require(child_process).exec; // 用於執行系統命令 var app = express(); app.use(express.static(www)); // 指定靜態網頁路徑 var server = app.listen(5438, function() { console.log(伺服器在 5438 埠口開工了。 ); }); 在上面程式之後，加入底下的 socket.io 程式： var sio = io(server); var shoot = false; // 代表「是否」拍攝照片，一開始設成「否」 sio.on(connection, function(socket) { // 若收到自訂的 start 事件，則開始拍攝。 socket.on( start, function() { shoot = true; // 拍攝照片並傳入 socket （連線）物件，以便將訊息傳遞給連線的用戶端。 takePhoto(socket); }); // 若收到 disconnect （用戶離線）系統事件，則停止拍攝。 socket.on(disconnect, function() { shoot = false; }); }); 實際負責拍攝照片的是自訂函式 takePhoto()： 每次拍攝完畢，程式會確認 shoot 變數值是否為 true，若是，它將重複呼叫 takePhoto() 函式執行拍照。實際傳送的圖檔名稱後面包含一個問號、參數 r 以 及隨機數字，瀏覽器在讀取影像檔時，會忽略問號及後面的參數。 因為瀏覽器具備避免浪費頻寬的「暫存（cache）」機制，可能不會重複下載相同 路徑和檔名的內容，所以程式在檔名後面附加隨機參數，讓資源（圖檔）路徑和 之前的不同，強迫瀏覽器下載更新的圖片。隨機參數不一定要命名成 r，可以是 其他字母或字串。 用戶端程式碼：在網頁內文區域，放置一個按鈕和影像，其識別名稱分別為 startBtn 和 stream： 在網頁內文底下引用 jQuery 及 socket.io 程式庫，並加入處理即時通訊的程式： 一旦網頁收到伺服器的 liveCam 訊息，就立即在 stream 影像區域顯示串流視訊。