getUserMedia (Kamera og Mikrofon) - JavaScript

Stream video og lyd fra brugerens kamera (webcam) og mikrofon med JavaScript getUserMedia

Introduktion

I JavaScript kan man bruge navigator.getUserMedia til at få adgang til brugerens webcam og mikrofon.

Det kan for eksempel bruges i en chat så folk kan se hinanden og snakke sammen eller i et multiplayer spil så man kan snakke sammen mens man spiller eller til at tage billeder til sin profil.

getUserMedia API'et en del af WebRTC (som også omhandler Peer-to-Peer API og MediaStream API) som på et tidspunkt skulle gøre det muligt at se og snakke med hinanden direkte fra browser til browser uden brug af server og browser-plugins.

navigator.getUserMedia er meget ny så forvent ikke det virker så godt endnu.

Specifikationerne kan ses på webrtc.org og w3.org.

Demo

Browseren understøtter ikke <canvas>



WEBCAM DEMO
(PÅ EN SIDE FOR SIG SELV)
AUDIO DEMO
(PÅ EN SIDE FOR SIG SELV)

Demoer på andre hjemmesider : Vision, Photo booth.

Browsertest

Browserunderstøttelse af getUserMedia

Browser Audio Video Måde
Firefox logo
Firefox 20.0.1 1
ja ja navigator.mozGetUserMedia() 6

{video : true, audio : true}

.mozSrcObject = stream

Gennem HTTP server og lokalt 7
Opera logo
Opera 12.15
nej ja navigator.getUserMedia()

{video : true} og "video"

.src = stream

Gennem HTTP server og lokalt 7
Safari logo
Safari 5.1.7
nej nej
Chrome logo
Chrome 25.0.1364.172 m 2
ja ja navigator.webkitGetUserMedia()

{video : true, audio : true}

.src = window.webkitURL.createObjectURL(stream)

Gennem HTTP server, ikke lokalt 8
Internet Explorer logo
Internet Explorer 10.0.9200.16540
nej nej
Alle tests er udført på Windows 7 (64-bit)


1 Sæt about:config?filter=media.navigator.enabled til true.

2 Chrome skal muligvis startes med --enable-media-stream fra kommandoprompten eller genvejsfilen før webkitGetUserMedia virker.
egenskaber for Google Chrome --enable-media-stream
Eller ved at skrive chrome://flags i adressefeltet og aktiver Enable MediaStream og derefter genstarte browseren.
Hvis du oplever at webcam streamet ikke virker så kan det i Chrome være fordi mikrofonen er deaktiveret. Så hvis det ikke virker så prøv og aktiver mikrofonen og prøve igen også selvom du ikke skal streame mikrofonen.
Måske skal Web Audio-input aktiveres i chrome://flags før audio virker.



7 Koden virker både hvis filen tilgås gennem HTTP server og direkte fra drev.

8 Koden virker kun hvis filen tilgås gennem HTTP server. Ikke direkte fra drev.
For eksempel virker "http://localhost/test.html".
Det virker ikke hvis man tilgår filen direkte (for eksempel "file:///C:/Users/Administrator/Desktop/test.html"). Da vil window.webkitURL.createObjectURL(stream) returner "undefined" og fiver fejlen {code: 1, PERMISSION_DENIED: 1}.
Chrome kan startes med --allow-file-access-from-files fra kommandoprompten eller genvejsfilen hvis man ønsker det skal virke uden brug af en HTTP server.


Info om lyd optagelse

Det er i skrivende stund (April 2013) kun Firefox 20.0.1 og Chrome 25.0.1364.172 m som understøtter lyd streaming fra mikrofon, men har jeg endnu ikke været i stand til at kunne optage lyden, kun lytte.

Nightly 19.0a1 understøtter lyd streaming men ikke .record().
"NetworkError: 404 Not Found - http://localhost/%5Bobject%20MediaStream%5D"
[objec...Stream]
HTTP load failed with status 404. Load of media resource http://localhost/%5Bobject%20MediaStream%5D failed.

Chrome 25.0.1320.2 Canary understøtter lyd streaming men ikke .record() som giver fejlen "TypeError: Object # has no method 'record'".

Opera understøtter slet ikke lyd streaming.

window.webkitURL.createObjectURL(stream) returner en streng i stil med : "blob:http%3A//localhost/9dcf5500-f25c-4697-8b30-3675c6e296ed" som bruges i src attributten. Det sker også ved video streaming hvor det virker. Men ved lyd streaming virker det bare ikke endnu så vi venter på browserne.

Browserunderstøttelse fra caniuse.com :

Kun ét program af gangen

Jeg har på min computer lagt mærke til at man kun man få adgang til webcammet fra ét program af gangen.

Det vil sige hvis du bruger webcammet i Chrome og samtidig forsøger at bruge webcammet i Opera så vil det ikke virke i Opera før du lukker for webcammet i Chrome.

Det samme gælder hvis man for eksempel bruge det medfølgende software til webcammet til at vise streamet fra kameraet så kan man ikke se det i browserne samtidig.

Man kan dog godt have flere faneblade/vinduer åbne i samme browser som bruger webcammet.

Så hvis du undre dig over det ikke virker når det burde så check at du ikke streamer webcammet i andre programmer og luk eventuelt de andre programmet for at se om der er nogen forskel.



Jeg ved endnu ikke hvordan man skriver kode som kan teste om streamet er i brug i forvejen.
I Opera tæller .currentTime kun hvis der streames. Hvis streamet er optaget forbliver værdien "0".
I Chrome er .readyState = "4" og networkState = "1" hvis der streames og .readyState = "0" og networkState = "0" hvis streamet er optaget.

Webcam og billedstørrelse

Mit webcam er så vidt jeg ved på 640 x 480 pixels da det er det største man kan vælge i det software som fulgte med til mit webcam.

Opera-Labs-Camera-12.00-1232 og...
Opera 12.00 beta Build 1387 og...
Chrome 20.0.1131.0 Canary laver <video> størrelsen om til 640 x 480 som standard hvis der ikke er sat nogen størrelse.

Chrome 18.0.1025.168 m og...
Chrome 19 Canary laver <video> størrelsen om til 352 x 288 som standard hvis der ikke er sat nogen størrelse af en eller anden grund.

Nightly 19.0a1 laver <video> størrelsen om til 640 x 480 som standard hvis der ikke er sat nogen størrelse.

Spørg brugeren om tilladelse

Første gang brugeren besøger en side som bruger navigator.getUserMedia er det meningen at brugeren skal spørges om tilladelse til at hjemmesiden må får adgang til brugeren webcam og/eller mikrofon.

Chrome 19 Canary spurgte dog slet ikke brugeren om tilladelse hvilket må siges at være noget af et sikkerhedsproblem.



Sådan ser det ud når man bruger navigator.mozGetUserMedia i forskellige browsere.

I Firefox 28.0.
Firefox getUserMedia screenshot vil du dele dit kamera med

Opera 20.0.
opera getUserMedia der er anmodet om kamera

Chrome 30.0.
chrome getUserMedia ønsker at bruge dit kamera

I tilfælde af at man har mere end ét kamera kan der være mulighed for at vælge hvilket kamera man vil bruge.
På en mobiltelefon kunne der for eksempel være 2 kameraer. Et på forsiden som viser brugeren og et på bagsiden.
chrome getUserMedia ønsker at bruge dit kamera
chrome getUserMedia ønsker at bruge dit kamera

Ændre tilladelse

Når man har givet tilladelse eller afvist adgang til webcam/mikrofon så ønske man måske senere at ændre denne indstilling.

I Opera kan man klikke til venstre for adressefeltet (Hvor der står "Web" eller "Lokal") for at se den aktuelle indstilling og ændre den.

Opera Labs Camera 12.00 build 1232.
opera getUserMedia access
Opera 12.00 beta Build 1387.
opera getUserMedia access settings camera always allow allow once deny
Hvis man vælger "Always allow" eller "Allow once" så vises der et kamera ikon til til venstre for adressefeltet.
Hvis man vælger "Deny" så vises kamera ikonet ikke.
opera getUserMedia camera ikon
Hvis man i Opera vil slette indstillingen for tilladelse til kameraet kan man vælge :
Opsætning→Indstillinger→Avanceret→Indhold→Administrer webstedsindstillinger...→[Vælg siden på listen]→slet

Chrome 20.0.1131.0 Canary og tidligere ser ikke ud til at gemme indstillingen men kan formodentligt ændres i kommende versioner ved at klikke på jordklode-ikonet til venstre i adressefeltet.

Informer om at der streames fra brugerens computer

Det er meningen at browseren på en eller anden måde skal informere brugeren om at webcam/mikrofon er i brug i browseren.

For eksempel kunne en bruger have glemt at webcammet og/eller mikrofonen streames på nettet fordi browseren er minimeret eller brugeren har åbnet et ny faneblad og glemt at der er et faneblad i baggrunden som streamer.

I Opera 12.00 beta Build 1387 vises et kamera ikon på det faneblad som bruger kameraet når man vælger et andet faneblad.
Kamera ikonet vil dog ikke kunne ses når browseren er minimeret.
opera getUserMedia kamera ikon
I Chrome 21 vises et kamera eller mikrofon ikon på proceslinjen i Windows når webcam og/eller mikrofon streames.
Da ikonet er på proceslinjen kan det også ses når browseren er minimeret.
chrome getUserMedia kamera ikon proceslinje
chrome getUserMedia mikrofon ikon proceslinje

Ved klik på kamera eller mikrofon ikonet kan man se hvilke faneblade der streamer webcam og/eller mikrofon og ved at vælge en title på listen kommer browseren op med fanebladet der streamer.
chrome getUserMedia kamera ikon proceslinje liste

I Chrome 25.0.1364.172 m der en rød animerede prik der fade fra den røde prik til hjemmesidens ikon.
chrome getUserMedia rød animerede prik i faneblad

Simpelt kode eksempel

Parameter nummer 3 i navigator.getUserMedia() er valgfri og kaldes hvis det ikke lykkedes at få et stream. Altså hvis der gik noget galt eller brugeren afviste adgang til webcam/mikrofon.
Der sendes noget data til den funktion man skriver som parameter 3 som man kan få en fejlkode ud af for at få at vide hvad der gik galt.

Kode eksempel

Her er et kode eksempel på hvordan man kunne streame webcammet i en <video> afspiller.

<video> afspilleren skal startes før webcammet streamer.
Det kan gøres med autoplay attributten.
Eller ved at bruge loadedmetadata eventen og .play().
Hvis afspilningen ikke startes vises der i Chrome et stilbillede fra webcammet. Opera viser ikke noget.

Objekt-måde og streng-måde

Når man bruger navigator.getUserMedia([?], ok_funktion, fejl_funktion); så kan man erstatte [?] med {video : true} eller "video".

{video : true} er den nye objekt-måde at skrive det på og virker i de nyere browser versioner og er den måde man bør bruge.

"video" var den gamle streng-måde at skrive det på og virker i de ældste browser versioner men man bør bruge objekt-måde.

Der kan være nogle browser versioner der forstår begge måder at skrive det på (Opera), men den gamle streng-måde fjernes nok i fremtidige browser versioner, så brug {video : true} i stedet for "video".

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.