Unreal Webcam Fun


Posted by wayne201299 on 2023-10-03

DEMO

瀏覽器中影片的錄製、濾鏡

實作

  1. 這次實作需要先取得存取電腦攝影鏡頭的權限,之前的操作都是在本地端的瀏覽器上,這次必須要上到本地server來開發,首先透過node.js的npm 指令安裝browser-sync
     npm install
     npm start
    
  2. 取得client端裝置的聲音或影片輸入,像是麥克風或攝像頭

     function getVideo() {
         navigator.mediaDevices
             .getUserMedia({ video: true, audio: false })
             .then((localMediaStream) => {
                 console.log(localMediaStream);
                 video.src = window.URL.createObjectURL(localMediaStream);
                 video.play();
             })
             .catch((err) => {
                 console.error(`OH NO!!!`, err);
             });
     }
    
     getVideo();
    

  3. 監聽影片的canplay事件,並將影片嵌入到canvas上,設定每16毫秒渲染一次

     video.addEventListener("canplay", paintToCanvas);
    
     function paintToCanvas() {
         const width = video.videoWidth;
         const height = video.videoHeight;
         canvas.width = width;
         canvas.height = height;
    
         return setInterval(() => {
             ctx.drawImage(video, 0, 0, width, height);
             // take pixels out
             let pixels = ctx.getImageData(0, 0, width, height);
             pixels = greenScreen(pixels);
             // put them back
             ctx.putImageData(pixels, 0, 0);
         }, 16);
     }
    
  4. 增加紅色濾鏡,透過重組影片中每個pixel的顏色來達到效果

     function redEffect(pixels) {
         for (let i = 0; i < pixels.data.length; i += 4) {
             pixels.data[i + 0] = pixels.data[i + 0] + 100; // red
             pixels.data[i + 1] = pixels.data[i + 1] - 50; // green
             pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // blue
         }
    
         return pixels;
     }
    
  5. 增加RGB濾鏡

     function rgbSplit(pixels) {
         for (let i = 0; i < pixels.data.length; i += 4) {
             pixels.data[i - 150] = pixels.data[i + 0]; // red
             pixels.data[i + 500] = pixels.data[i + 1]; // green
             pixels.data[i - 550] = pixels.data[i + 2]; // blue
         }
    
         return pixels;
     }
    
  6. 依選擇的RGB配色調整濾鏡

     function greenScreen(pixels) {
         const levels = {};
         document.querySelectorAll(".rgb input").forEach((input) => {
             levels[input.name] = input.value;
         });
    
         for (i = 0; i < pixels.data.length; i = i + 4) {
             red = pixels.data[i + 0];
             green = pixels.data[i + 1];
             blue = pixels.data[i + 2];
             alpha = pixels.data[i + 3];
    
             if (
                 red >= levels.rmin &&
                 green >= levels.gmin &&
                 blue >= levels.bmin &&
                 red <= levels.rmax &&
                 green <= levels.gmax &&
                 blue <= levels.bmax
             ) {
                 // take it out!
                 pixels.data[i + 3] = 0;
             }
         }
    
         return pixels;
     }
    

browser-sync

BrowserSync(瀏覽器同步)是一個用於網頁開發的開源工具,它提供了許多強大的功能,以幫助開發人員更輕鬆地進行前端開發和測試。以下是 BrowserSync 的一些主要功能和用途:

  • 自動重新加載: BrowserSync 可以自動重新加載網頁,每當你保存代碼變更時,它會自動刷新瀏覽器,以顯示最新的內容,這對於開發過程中的快速反饋非常有用。
  • 多瀏覽器測試: 你可以在不同的瀏覽器和設備上同步測試你的網站,這有助於確保你的網站在各種瀏覽器中正確運行。
  • 同步滾動和點擊: BrowserSync 可以同步多個設備的滾動、點擊和表單輸入,以確保你的網站在各種設備上有一致的表現。
  • 本地服務器: BrowserSync 可以作為一個本地開發服務器運行,並提供諸如路由、代理和SPA(單頁應用)支持等功能。這使你能夠更輕鬆地模擬後端 API。
  • 代理: 你可以設定代理以將請求代理到開發網站或應用的後端服務,這對於開發需要後端數據的應用非常有用。
  • 自訂設定: BrowserSync 允許你通過配置文件自定義設定,以滿足特定項目的需求。
  • 網絡測速: 它提供了一個網絡測速工具,可用於評估你的網站性能,這有助於優化網站的加載速度。

總之,BrowserSync 是一個非常有用的前端開發工具,它可以提高開發速度,確保網站在各種瀏覽器和設備上的正確運行,並提供了許多有用的功能,使開發人員能夠更有效地進行前端開發和測試。

navigator

navigator 是 JavaScript 中的一個全局對象,它提供了有關用戶代理(User Agent)和瀏覽器的信息。通過 navigator 對象,你可以獲取有關瀏覽器的詳細信息,以便根據不同的瀏覽器和設備來調整你的網頁應用程序。以下是 navigator 對象的一些常見用途和功能:

  • 檢測瀏覽器類型和版本: 你可以使用 navigator.userAgent 屬性來獲取用戶代理字符串,然後通過解析此字符串來確定所使用的瀏覽器類型和版本。
  • 檢測瀏覽器功能: navigator 對象提供了一些屬性和方法,用於檢測瀏覽器的功能,例如 navigator.cookieEnabled 用於檢查是否啟用了 cookies。
    -地理位置信息: 你可以使用 navigator.geolocation 對象來獲取用戶的地理位置信息,前提是用戶同意分享該信息。
  • 瀏覽器語言和區域設置: navigator.language 和 navigator.languages 屬性可用於獲取瀏覽器的首選語言和區域設置。
  • 瀏覽器存儲支持檢測: 你可以使用 navigator.cookieEnabled、navigator.localStorage 和 navigator.sessionStorage 等屬性來檢測瀏覽器對 cookie、本地存儲和會話存儲的支持情況。
  • 瀏覽器特定的功能: 一些瀏覽器提供了特定的擴展,你可以使用 navigator 對象來檢測是否支持這些功能,例如 WebRTC、Service Workers 等。

總之,navigator 對象是 JavaScript 中用於獲取瀏覽器相關信息的重要工具,它使開發人員能夠根據不同的瀏覽器和設備進行適當的調整和優化,以確保網頁應用程序的正確運行。

總結

  • 理解RGB對於影片中每個pixel的影響

#javascript







Related Posts

[TensorFlow Certification Day6] 第二張上課證照入手

[TensorFlow Certification Day6] 第二張上課證照入手

【 SendEmail.py 筆記 - 01 】原始程式碼解析

【 SendEmail.py 筆記 - 01 】原始程式碼解析

JavaScript - 認識閉包

JavaScript - 認識閉包


Comments