वेबकैम का उपयोग करें HTML पृष्ठभूमि के रूप में

मैं एक कंप्यूटर जो एक वेब कैमरा है और कभी कभी हमारे नाइट क्लब में एक वेबसाइट को प्रदर्शित करता है ... हैवेबकैम का उपयोग करें HTML पृष्ठभूमि के रूप में

मैं दो विलय और html पृष्ठभूमि स्रोत वीडियो होने के साथ वेबसाइट प्रदर्शित करना चाहते हैं उसी कंप्यूटर पर वेबकैम से आउटपुट।

वेबकैम को इंटरनेट पर स्ट्रीम करने की आवश्यकता नहीं है, वेबसाइट को केवल स्थानीय रूप से वीडियो सिग्नल स्रोत करने की आवश्यकता है ... मुझे नहीं पता कि हम यह कैसे करेंगे लेकिन प्रभाव इसी तरह है, केवल हम ' वीडियो स्रोत के रूप में यूट्यूब का उपयोग नहीं कर रहे हैं - http://www.seanmccambridge.com/tubular/!

हो सकता है कि यह एचटीएमएल, सीएसएस, हो सकता है jQuery और जावा या फ्लैश (वेब कैमरा से वीडियो का उपयोग करने की) का एक संयोजन ...

स्रोत

2012-05-02 Bryan Loves PHP

क्या आपके पास यह करने के तरीके पर * कोई * विवरण है? उदाहरण के लिए, क्या आप पहले से ही वेबपृष्ठ में वेबकैम प्रदर्शित कर सकते हैं? यदि हां, तो आप यह कैसे करते हैं? –

अपने उपयोगकर्ता नाम – samccone

के लिए अपवोट यह वास्तव में स्पष्ट नहीं है कि आपका प्रश्न पृष्ठभूमि के रूप में वीडियो को कैसे कार्यान्वित करना है या वीडियो को स्ट्रीम कैसे करें। – feeela

एचटीएमएल दृष्टिकोण से हो जाएगा, यह अनिवार्य रूप से सिर्फ इस है।

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

सीएसएस के लिए, आप सिर्फ वीडियो position:absolute का उपयोग करने पर एचटीएमएल ढेर की जरूरत है। ऊपर, बाएं, और दाएं बस यह सुनिश्चित करता है कि वे शीर्ष संरेखित करें, और ब्राउज़र की चौड़ाई तक फैलाएं।

#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

बस सोच रहा है कि वेबकैम को वीडियो स्रोत के रूप में कैसे पहचानें ... –

@ ब्रायनलोव्सएचएचपी जो फ़्लैश हिस्से में होगा। – Joseph

वीएलसी वेबकैम स्ट्रीम कर सकता है, फिर आप फ्लैश वीडियो या एचटीएमएल 5 वीडियो के लिए इसे स्रोत के रूप में उपयोग कर सकते हैं। – mddw

वेबकैम का उपयोग करें HTML पृष्ठभूमि के रूप में

उत्तर

संबंधित मुद्दे