React-obsługa kamer wbudowanych/usb

0

Witam,

pisze apkę mobilną przy wykorzystaniu React.js i Node.js
Chciałbym wprowadzić do aplikacji obsługę kilku kamer(np. jednej usb i jednej wbudowanej w laptop, albo kilku kamer usb). W związku z tym chciałbym zapytać co byście mi polecili do obsługi wielu kamer(żebym mógł swobodnie między nimi się przerzucać), stream'owania video i pobierania id kamer abym mógł przypisywać dostęp konkretnym użytkownikom do danej kamery. Chciałbym też żeby nie było problemów, aby kilku użytkowników na raz mogło korzystać z różnych kamer.
Zastanawiałem się nad użyciem WebRTC + socket.io, albo pakietu react-webcam(npm). Rozglądałem się jeszcze za innymi rozwiązaniami, ale nic innego nie zwróciło mojej uwagi.
Pomyślałem, że zamiast testować wszystko samemu, aby przekonać się po kilku godzinach roboty, że dana technologia nie nada się do powyższych zastosowań, to zapytam Was. Więc byłbym wdzięczny gdyby ktoś mnie skierował od razu w dobrym kierunku ;)
Można powiedzieć, że to mój drugi projekt z web-developerki(wcześniej napisałem mały projekt JS+PHP+MySQL), więc jestem początkujący :p

Z góry dziękuję za rady ;)

2

Do identyfikacja urządzeń i korzystania z nich przydadzą się MediaDevices, co jest prostszą częścią https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices
Warto się też zapoznać z działaniem WebRTC https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling

Jeśli masz to za sobą, to być może zdajesz sobie sprawę, że transmisja one-to-one z WebRTC jest w miarę prosta. Problem będzie leżał w stworzeniu systemu pozwalającego na streaming many-to-many. Warto przyjrzeć się jak działają gotowce typu Kurento, Jitsi.

Wybór bibliotek ma znaczenie drugorzędne. Owszem, można to bez problemu oprogramować samemu w JS, bazując na Reakcie i socket.io.

0

Ok, to zacznę od zapoznania się z WebRTC i MediaDevices. Zobaczymy co będzie dalej.
Mam tylko nadzieję, że nie ugryzłem więcej niż jestem w stanie przełknąć ;D

0

Witam ponownie ;)

Mam pytanie powiązane z moim projektem, więc nie będę zakładał nowego tematu.
Otóż od trzech dni walczę z socket.io i simple-peer, które z jakiegoś powodu miały problem z przesyłem sygnału z kamerki(serwera), do klienta.. a przynajmniej tak myślałem.
Przypadkowo natknąłem się w Internecie na jakieś informacje o problemach webRTC z nowymi wersjami przeglądarek. Więc odpaliłem starszą wersję Firefoxa(83.0) i okazuje się, że wszystko idealnie działa.
Niestety nie doszedłem do dokładnej przyczyny dlaczego chrome ma problemy z obsługą webRTC. Czasem uda się połączyć z kamerką, ale to rzadko.

Pobieranie informacji o kamerach przez enumerateDevices() i wyświetlanie obrazu lokalnie przez mediaDevices.getUserMedia(), działają bez problemu.

Ktoś wie dlaczego Chrome albo nowe wersje przeglądarek powodują takie problemy?

0

Jaki dokładnie Error się pojawia?

0

Nie mam żadnych błędów. Po prostu nic się nie wyświetla ;D
Po ustawieniu połączenia przez simple-peer, ma mi renderować(jak nie będzie połączenia, to nie wywoła tego komponentu):

    return (
        <div>
            <p>KAMERA</p>
            <video playsInline autoPlay ref={reff} />
        </div>
    );

Pojawia się tylko paragraf KAMERA i puste pole

Na Firefoxie działa bez problemów.
Jak udostępniam obraz z Chrome'a, a wyświetlam na Firefoxie, to też działa. W drugą stronę już nie działa.
Wypisałem informacje o strumieniu przekazanego obrazu:
ddddddddd.png

Wszędzie powtarza się ten błąd:
Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.o (<anonymous>83)]

@Edit chociaż ten błąd też się pojawia jak po prostu przez getUserMedia wyświetlam obraz kamerki. Więc to nie raczej o to chodzi.

2

Ale ten błąd wskazuje na strict mode, nie renderowanie. Bo renderowany jest, ale go nie widać, prawda? Spróbuj dodać atrybut controls albo dodaj style czy jakiś gotowy odtwarzacz.

<video controls muted  />
0

@SkrzydlatyWąż: ale mnie teraz uratowałeś. Okazuje się, że to rozwiązało problem i video wyświetla się bez problemu. Dziwi mnie ta róznica między firefoxem, a chrome'm.. dzień przez to zmarnowałem ;p

1 użytkowników online, w tym zalogowanych: 0, gości: 1