Fang Billeder fra Webcam/Mobil med PHP

23/09/2023

★★★★★Rating: 4 (14805 votes)

I dagens digitale verden er interaktion med brugere via kameraer blevet en essentiel del af mange webapplikationer. Uanset om det er til profilbilleder, identitetsbekræftelse eller blot sjove filtre, giver muligheden for at fange billeder direkte fra en brugers webcam eller mobilkamera en rigere og mere engagerende oplevelse. Selvom selve billedoptagelsen foregår på klientsiden i browseren, er PHP din trofaste partner, når billederne skal gemmes og håndteres på serveren.

How to capture a picture on a webcam using JS library? — In this example, we will create index.php file and show you layout of your webcam with “Take Snapshot” button, when you will click on that button js library will capture image on base64 string. after that when click on submit button then picture will store in directory.

Denne artikel vil dykke ned i, hvordan du kan implementere denne funktionalitet i dine egne PHP-projekter. Vi vil udforske de nødvendige JavaScript-biblioteker, der muliggør live-videostreaming og snapshot-optagelse, samt de PHP-scripts, der er ansvarlige for at modtage, behandle og gemme de fangede billeder sikkert på din server. Gør dig klar til at tilføje en dynamisk dimension til dine webapplikationer!

Forstå Kernen: Klient-side og Server-side

Processen med at fange og gemme billeder fra et kamera kan opdeles i to hoveddele: klientsiden og server-siden. På klientsiden, altså i brugerens browser, er det JavaScript, der tager føringen. JavaScript interagerer direkte med brugerens kamera (efter tilladelse) og fanger billeddataene. Disse data sendes derefter til serveren, hvor PHP tager over. PHP modtager billeddataene, behandler dem og gemmer dem typisk som en fil på serveren eller i en database.

De fleste moderne browsere understøtter WebRTC (Web Real-Time Communication) API'en, som gør det muligt at få adgang til mediedata, herunder kameraer og mikrofoner, direkte fra JavaScript. Men for at forenkle processen og sikre bred kompatibilitet, er det ofte mere praktisk at bruge et dedikeret JavaScript-bibliotek. Disse biblioteker abstraherer kompleksiteten ved WebRTC og giver en brugervenlig grænseflade til kamerafunktionalitet.

Valg af JavaScript-bibliotek: Webcam.js og Alternativer

Der findes flere JavaScript-biblioteker, der kan hjælpe dig med at fange billeder fra et webcam eller mobilkamera. Et af de mest populære og ligetil er Webcam.js. Dette letvægtsbibliotek er kendt for sin brugervenlighed og evne til at fungere problemfrit på tværs af forskellige browsere og enheder, herunder mobiltelefoner.

How to capture webcam pictures? — So all it is necessary to capture Webcam pictures is to connect Webcam data streams to file uploading forms. The first thing you need is your PHP editor or IDE, a Webcam, MySQL and a cup of coffee. The PHP editor is of course for coding your PHP scripts, Webcam to take the image, MySQL for saving it in a database and Coffee is for your refreshment.

Webcam.js giver dig mulighed for at:

Vise en live videostream fra kameraet på din webside.
Fange et stillbillede (snapshot) fra videostreamen.
Modtage det fangede billede som en Base64-kodet streng, som nemt kan sendes til serveren.

Udover Webcam.js findes der også andre løsninger som Dynamsoft Camera SDK og JpegCamera. Dynamsoft Camera SDK er ofte et mere robust valg, der tilbyder avancerede funktioner som synkron og asynkron upload, samt muligheden for at vedhæfte ekstra datafelter med billedet. JpegCamera er en anden mulighed, der fokuserer på at levere JPEG-billeder.

For de fleste grundlæggende anvendelser, hvor du blot skal fange et billede og gemme det, er Webcam.js et fremragende udgangspunkt på grund af dets enkelhed og effektivitet.

Implementering med Webcam.js: Trin for Trin

Lad os se på, hvordan du kan implementere kamerabilledfangst med Webcam.js og PHP. Processen involverer typisk to filer: en HTML/JavaScript-fil (f.eks. index.php) til klientsiden og en PHP-fil (f.eks. storeImage.php) til server-siden.

How to capture image from webcam & mobile camera in PHP? — If you want to take a picture of user from webcam or mobile camera then you can use javascript webcam library for capture image form camera and save it in php. In this tutorial, i will show you how to implement webcam capture and store image on server in php application.

1. Klientside (index.php)

Først skal du inkludere de nødvendige biblioteker og oprette HTML-strukturen. Du skal bruge jQuery (da Webcam.js ofte bruges sammen med det) og selve Webcam.js-biblioteket. En simpel Bootstrap-styling er også inkluderet for et pænt layout.

<!DOCTYPE html><html><head><title>Fang Webcam Billede med PHP og jQuery</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" /><style type="text/css"> #results { padding:20px; border:1px solid; background:#ccc; } </style></head><body><div class="container"><h2 class="text-center">Fang Billede fra Kamera</h2><form method="POST" action="storeImage.php"><div class="row"><div class="col-md-6"><div id="my_camera"></div><br/><input type=button value="Tag Snapshot" onClick="take_snapshot()"><input type="hidden" name="image" class="image-tag"></div><div class="col-md-6"><div id="results">Dit fangede billede vises her...</div></div><div class="col-md-12 text-center"><br/><button class="btn btn-success">Send</button></div></div></form></div><script language="JavaScript"> Webcam.set({ width: 490, height: 390, image_format: 'jpeg', jpeg_quality: 90 }); Webcam.attach( '#my_camera' ); function take_snapshot() { Webcam.snap( function(data_uri) { $(".image-tag").val(data_uri); document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>'; } ); } </script></body></html>

I ovenstående kode ser vi:

Inkludering af jQuery og Webcam.js.
En <div id="my_camera">, hvor live-videostreamen fra kameraet vil blive vist.
En knap "Tag Snapshot", som udløser JavaScript-funktionen take_snapshot().
En skjult input-felt <input type="hidden" name="image" class="image-tag">. Dette er afgørende, da det er her, den Base64-kodede billeddata gemmes, før formularen sendes til serveren.
En <div id="results">, hvor en forhåndsvisning af det fangede billede vises.
JavaScript-konfigurationen, hvor Webcam.set() definerer dimensioner og billedformat, og Webcam.attach() forbinder kameraet til #my_camera div'en.
Funktionen take_snapshot(), som bruger Webcam.snap() til at fange billedet. Når billedet er fanget, modtages det som en data_uri (en Base64-streng). Denne streng indsættes i det skjulte input-felt og bruges til at vise en forhåndsvisning.

Når brugeren klikker på "Send"-knappen, vil hele formularen, inklusive den Base64-kodede billeddata i det skjulte felt, blive sendt til storeImage.php.

2. Server-side (storeImage.php)

På serversiden er PHP ansvarlig for at modtage den Base64-kodede billeddata, afkode den og gemme den som en fil. Du skal oprette en mappe (f.eks. upload/) i din rodsti, hvor billederne skal gemmes. Sørg for, at denne mappe har de rette skrivetilladelser (f.eks. chmod 777 upload/ på Linux-systemer, men vær opmærksom på sikkerhedsrisici ved for brede tilladelser i et produktionsmiljø).

<?php $img = $_POST['image']; $folderPath = "upload/"; $image_parts = explode(";base64,", $img); $image_type_aux = explode("image/", $image_parts[0]); $image_type = $image_type_aux[1]; $image_base64 = base64_decode($image_parts[1]); $fileName = uniqid() . '.png'; $file = $folderPath . $fileName; file_put_contents($file, $image_base64); print_r($fileName); ?>

Lad os gennemgå PHP-koden:

$img = $_POST['image'];: Henter den Base64-kodede billeddata, der blev sendt fra formularens skjulte input-felt.
$folderPath = "upload/";: Definerer stien til den mappe, hvor billederne skal gemmes.
explode(";base64,", $img): Den Base64-kodede streng indeholder ofte et præfiks som data:image/jpeg;base64,. Denne linje splitter strengen ved ;base64, for at adskille præfikset fra de faktiske billeddata.
explode("image/", $image_parts[0]) og $image_type = $image_type_aux[1];: Disse linjer udtrækker billedtypen (f.eks. 'jpeg', 'png') fra præfikset, selvom vi i dette eksempel hardkoder til .png.
$image_base64 = base64_decode($image_parts[1]);: Dette er det vigtigste trin. Her afkodes den Base64-kodede billeddata tilbage til binære billeddata.
$fileName = uniqid() . '.png';: Genererer et unikt filnavn for billedet for at undgå navnekonflikter. Det er god praksis at bruge en funktion som uniqid().
$file = $folderPath . $fileName;: Konstruerer den fulde sti til den nye billedfil.
file_put_contents($file, $image_base64);: Gemmer de afkodede binære billeddata som en fil på den specificerede sti.
print_r($fileName);: Udskriver navnet på den gemte fil, hvilket kan være nyttigt til debugging eller som feedback til klientsiden.

Sammenligning af JavaScript-biblioteker

For at give et bedre overblik over dine valg, her er en simpel sammenligning mellem Webcam.js og Dynamsoft Camera SDK:

Funktion	Webcam.js	Dynamsoft Camera SDK
Anvendelse	Simpel billedfangst	Avanceret dokument- og billedfangst
Kompleksitet	Lav, meget letvægts	Moderat til høj, mere funktionsrig
Licens	MIT (gratis)	Kommerciel (kræver licens)
Live Stream	Ja	Ja
Snapshot	Ja (Base64)	Ja (forskellige formater, direkte upload)
Upload Metoder	Manuel Base64 POST	Synkron/Asynkron HTTP upload
Ekstra Funktioner	Minimal	Dokumentscanning, stregkode-læsning, avancerede billedbehandlingsmuligheder
Typisk Brug	Profilbilleder, simpel foto-upload	ID-bekræftelse, arkiveringssystemer, medicinske applikationer

Valget af bibliotek afhænger stærkt af dit projekts krav. For hurtig og nem implementering af grundlæggende billedfangst er Webcam.js ofte det bedste valg. For mere komplekse scenarier med behov for robuste funktioner og professionel support, kan Dynamsoft Camera SDK være en overvejelse værd.

What is required library for webcam & mobile camera? — Required library for webcam --> In above code we included jquery.min.js and webcam.js javascript library which is needed to capture an image from webcam and mobile camera. We also have included bootstrap.min.css and bootstrap.min.js because we are using bootstrap framework for web designing.

Vigtige Overvejelser og Fejlfinding

Når du arbejder med webcam-funktionalitet, er der et par vigtige punkter at huske på:

HTTPS er Nødvendigt: De fleste moderne browsere, især Chrome, kræver en sikker forbindelse (HTTPS) for at give adgang til kameraet. Hvis du udvikler lokalt, kan du ofte teste med Firefox, som kan være mere lempelig, men til produktion er HTTPS et krav.
Brugertilladelse: Browseren vil altid bede brugeren om tilladelse, før den giver adgang til kameraet. Din applikation skal være forberedt på, at brugeren kan afvise tilladelsen.
Mappetilladelser: Som nævnt er det afgørende, at din upload/-mappe har de korrekte skrivetilladelser, så PHP kan gemme filerne. En almindelig fejl er manglende tilladelser, der resulterer i, at billederne ikke gemmes.
Fejlhåndtering: I en rigtig applikation bør du implementere robust fejlhåndtering på både klient- og server-siden. Hvad sker der, hvis upload mislykkes? Hvad hvis kameraet ikke er tilgængeligt?
Sikkerhed: Når du gemmer filer uploadet af brugere, er det vigtigt at overveje sikkerhed. Valider altid filtyper, og overvej at gemme billeder uden for webroden for at forhindre direkte adgang og potentielle sårbarheder. Undgå også at stole udelukkende på filendelsen for at bestemme filtypen; brug funktioner som mime_content_type() eller getimagesize() i PHP til at verificere, at det faktisk er et billede.
Performance: Base64-kodede billeder kan være store. Overvej optimering af billedstørrelse og kvalitet, især for mobilbrugere, for at sikre en hurtig og responsiv oplevelse.

Ofte Stillede Spørgsmål (FAQ)

Her er nogle almindelige spørgsmål, der ofte opstår, når man arbejder med kamerafangst i webapplikationer:

Q: Hvorfor virker mit kamera ikke i Chrome, men virker i Firefox?
A: Dette skyldes sandsynligvis, at Chrome (og andre moderne browsere) kræver en sikker HTTPS-forbindelse for at få adgang til kameraet. Firefox er ofte mere tolerant over for HTTP-forbindelser under lokal udvikling. Sørg for at deployere din applikation på en HTTPS-server.

Q: Kan jeg gemme billedet direkte i en database i stedet for som en fil?
A: Ja, det er muligt. Du kan gemme den Base64-kodede streng direkte i et tekstfelt (BLOB eller LONGTEXT) i din database. Dog er det ofte mere effektivt at gemme billederne som filer på serveren og kun gemme filstien i databasen. Dette er især sandt for store billeder, da det kan belaste databasen unødvendigt.

Q: Hvad er den bedste praksis for at gemme uploadede billeder sikkert?
A: Brug unikke filnavne (som uniqid()). Gem billederne i en mappe uden for din webrodsmappe, hvis muligt, for at forhindre direkte adgang via URL'er. Implementer streng validering af filtypen for at sikre, at kun billeder uploades, og kontroller filstørrelsen. Overvej også at scanne uploadede filer for malware, selvom dette er et mere avanceret skridt.

How to upload video & webcam in PHP? — Add JavaScript and HTML code to play video stream and grab a snapshot. Use HTTP upload method to send the image data to server side. Receive the image data from client side and save the image file on server disk in PHP. 1. Create an HTML page to display the video and webcam screen. We name it ImageUpload.html here.

Q: Hvad hvis brugeren ikke giver tilladelse til kameraadgang?
A: JavaScript-biblioteket vil typisk give en fejl-callback eller event, hvis tilladelse nægtes eller kameraet ikke er tilgængeligt. Du bør håndtere dette i din JavaScript-kode og give passende feedback til brugeren, f.eks. en meddelelse om, at kameraadgang er nødvendig.

Q: Er det muligt at fange video i stedet for kun stillbilleder?
A: Ja, WebRTC API'en understøtter videostreaming, og nogle af de mere avancerede biblioteker (som Dynamsoft Camera SDK) kan håndtere videooptagelse. Til mere kompleks videointegration kan du også overveje andre JavaScript-biblioteker, der er specifikt designet til video, men det er uden for denne artikels scope.

Konklusion

At integrere webcam- og mobilkamerafunktionalitet i din PHP-applikation er en relativt ligetil proces, takket være kraftfulde JavaScript-biblioteker som Webcam.js. Ved at kombinere klientsidens evne til at fange billeddata med PHP's server-side kapaciteter til at behandle og gemme disse data, kan du skabe en lang række interaktive og engagerende webapplikationer. Husk altid at fokusere på brugervenlighed, sikkerhed og ydeevne for at levere den bedst mulige oplevelse for dine brugere.

Hvis du vil læse andre artikler, der ligner Fang Billeder fra Webcam/Mobil med PHP, kan du besøge kategorien Teknologi.