Từ góc độ HTML, đó là về cơ bản chỉ này.
<body>
<video id="video-bg>
<div id="site_wrapper">
<!--the html-->
</div>
</body>
Đối với CSS, bạn chỉ cần chồng html qua video bằng cách sử dụng position:absolute. Trên cùng, bên trái và bên phải chỉ đảm bảo rằng chúng căn chỉnh trên cùng và kéo dài đến chiều rộng của trình duyệt.
#site_wrapper{
position:relative;
}
#video-bg {
position:absolute;
top: 0;
left: 0;
right: 0;
}
Feeding video từ camera có thể bằng cách sử dụng getUserMedia, lần lượt các dòng vào một blob và nuôi blob vào yếu tố <video>. Thông tin thêm về nó trên 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);
}
);
Các webcam không cần stream với internet, trang web chỉ cần nguồn tín hiệu video cục bộ
Bây giờ điều này làm tôi bực mình một chút. Nếu trang web của bạn nằm trên mạng trực tuyến thì từ "địa phương" có nghĩa là máy của người xem chứ không phải máy của hộp đêm của bạn. Nếu bạn muốn video của câu lạc bộ của bạn ở chế độ nền, bạn cần truyền phát video qua mạng và làm cho trang đó phát trực tuyến.
Nếu trang web của bạn là kiosk trong hộp đêm, thì "địa phương" sẽ có ý nghĩa. Kiosk của bạn sẽ có một webcam được nối và mã ở trên sẽ được áp dụng.
Bạn có * bất kỳ * chi tiết nào về cách thực hiện việc này không? Ví dụ: bạn có thể hiển thị webcam trong một trang web không? Nếu vậy, làm thế nào để bạn làm điều đó? –
upvote cho tên người dùng của bạn – samccone
Nó không thực sự rõ ràng nếu câu hỏi của bạn là làm thế nào để thực hiện video làm nền hoặc làm thế nào để dòng video. – feeela