使用網絡攝像頭作爲HTML背景

我有有一個攝像頭，有時顯示在我們的夜總會網站的電腦...使用網絡攝像頭作爲HTML背景

我想合併兩個，並顯示與HTML背景源是視頻網站從同一臺計算機上的攝像頭輸出。

網絡攝像頭不需要流到互聯網，網站只需要在本地採集視頻信號......我不知道我們該怎麼做，但效果與此類似，不要使用Youtube作爲視頻源 - http://www.seanmccambridge.com/tubular/！

也許這將是HTML，CSS，也許jQuery和java或flash（如果要訪問網絡攝像頭視頻）的組合...

來源

2012-05-02 Bryan Loves PHP

你有*任何*細節如何做到這一點？例如，你可以在網頁上顯示攝像頭了嗎？如果是這樣，你怎麼做？ –

upvote for your username – samccone

如果您的問題是關於如何實現視頻作爲背景或如何流式傳輸視頻，這還不是很清楚。 – feeela

從HTML的角度來看，它本質上只是這個。

<body> 
    <video id="video-bg> 
    <div id="site_wrapper"> 
     <!--the html--> 
    </div> 
</body>

對於CSS，您只需要使用position:absolute將html疊加在視頻上。頂部，左側和右側只是確保它們對齊頂部，並延伸到瀏覽器的寬度。

#site_wrapper{ 
    position:relative; 
} 

#video-bg { 
    position:absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
}

從照相機飼養視頻是通過使用getUserMedia可能，轉動流分成斑點和飼料團塊進入<video>元件。更多關於它this MDN example：

navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } }, 
    function(stream) { 
     var video = document.querySelector('video'); 
     video.src = window.URL.createObjectURL(stream); 
     video.onloadedmetadata = function(e) { 
     video.play(); 
    }; 
    }, 
    function(err) { 
    console.log("The following error occured: " + err.name); 
    } 
);

網絡攝像頭並不需要流式傳輸到互聯網，網站只需要源的視頻信號本地

現在這個困擾我有點。如果您的網站在網上上，那麼「本地」一詞就意味着觀衆的機器，而不是您夜總會的機器。如果您想在後臺使用俱樂部的視頻，您需要通過網絡流式傳輸視頻，並讓頁面流式傳輸。

如果您的網站是您的夜總會的自助服務終端，那麼「本地」將是有道理的。您的信息亭會有一個網絡攝像頭掛鉤，上面的代碼將適用。

來源

2012-05-02 10:23:33 Joseph

只是想知道如何識別攝像頭作爲視頻源... –

@BryanLovesPHP將在閃存部分。 – Joseph

VLC可以流式傳輸網絡攝像頭，然後您可以將其用作Flash視頻或HTML5視頻的源代碼。 – mddw

使用網絡攝像頭作爲HTML背景

回答

相關問題