2016-03-18 18 views
2

Kullanıcıların kendi fotoğraflarını çekebilmeleri için webcam.js uygulamasını bir açısal uygulamayla başarıyla kullanıyorum. Ancak, bazı kullanıcıların boş yüklendiği bir sorun yaşıyorum - hepsi beyaz veya tüm siyah fotoğraflar. Bazı kameraların diğerlerinden daha yavaş başladığını sanıyorum, bu da kullanıcıların fotoğraf makinesinin gerçekten çalışmasından önce boş olan fotoğraflarını çekmelerine izin veriyor.Kameranın getUserMedia ile açık/hazır olduğunu tespit etmek mümkün mü?

Fotoğraf makinesinin gerçekte ne zaman açık olduğunu algılayabilmeyi ve böylece Fotoğraf Çek düğmesini kullanabilmek için bekleyebilmeyi çok isterim. Normalde kameraya izin vermenin güvenlik adımından geçtikten sonra, kamera açıldığında veya kaynak yüklenirken ya da her ne ise, video elemanı yarım saniyeliğine boş kalır. Bilgisayarımda hızlı hareket edersem, video buharı yüklenmeden önce sadece fotoğraf çek düğmesini tıklayabilirim ve tüm siyah olarak gösterilen bir fotoğraf çekerim. Sanırım bazı bilgisayarlarda yarım saniyenin uzun olabileceğini, muhtemelen insanların kendilerini ekranda görmeden önce fotoğraf çekmeye çalışacaklarını tahmin ediyorum.

Ayrıca bunu daha iyi bir UX ile çözmeye çalışıyoruz, ancak kamera hazır olmadan önce insanların fotoğraf çekmesini engellemenin bir yolu olsaydı harika olurdu. Fotoğraf makinesinin ne zaman açık olduğunu bulmak için henüz bir şey bulamadım, ancak çekilmiş bir resmin baskın rengini algılama olasılığını düşündüm ve hepsi siyah ya da beyazsa kullanıcının tekrar almasını söyle böyle bir şey kullanarak: Get average color of image via Javascript. Fotoğraf çekmeyi göstermek için bekleyebilirsek, kullanıcının o döngüden geçmesini sağlamak ideal değildir.

Teşekkürler! Kullanılması video.onplaying

+0

bir resim çekmek düğmesine kadar koyarak önce baskın renk algılanamıyor? – jib

+0

Yukarıda bahsedilen yöntemle yapmak isteyeyim sanmıyorum (http://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript) çünkü zorunda görüntüyü programlı olarak yakalayın, bir tuval öğesi oluşturun ve resmin artık tek bir renk olmadığını belirlemek için bir aralıktaki rengi kontrol edin - tarayıcıda çok ağır görünüyor. Kameranın açık olup olmadığını kontrol etmek için başka bir seçenek yoksa, bunun bir çözüm olabileceğini varsayalım. –

+0

Küçük bir genişlik ve yükseklik kullanırsanız ve çok sık aralıklı değilse, o zaman büyük bir anlaşma olmamalıdır. Sadece bir kez tuvali yaratman gerekiyor. – jib

cevap

1

(Chrome için https fiddle) benim için çalıştı:

var snap =() => navigator.mediaDevices.getUserMedia({ video: true }) 
 
    .then(stream => { 
 
    video.srcObject = stream; 
 
    return new Promise(resolve => video.onplaying = resolve); 
 
    }) 
 
    .then(() => canvas.getContext('2d').drawImage(video, 0, 0, 160, 120)) 
 
    .catch(log); 
 

 
var log = msg => div.innerHTML += "<br>" + msg;
<button onclick="snap()">Snap!</button><div id="div"></div> 
 
<video id="video" width="160" height="120" autoplay></video> 
 
<canvas id="canvas" width="160" height="120"></canvas> 
 
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

+0

Bu mükemmel bir şey, aslında bende ne aradığımı düşünmekteydim, ama düğmeyi göstermek için görüntülemeyi beklemenin daha sağlam bir sürümünü kullandım ve kullanıcı bir kez çekmediğinden emin olmak için resim çekini aldığında ağırlıklı olarak siyah veya beyaz. Teşekkürler! –

İlgili konular