membutuhkan
Pengembangan Aplikasi Hibrid, shell asli + webApp, memanggil fungsi kamera asli di komponen web dan menampilkan konten kamera di area yang ditentukan pada halaman web. Pada saat yang sama, Anda dapat mengambil gambar secara manual dan melakukan pengenalan wajah, dan menampilkan hasil pengenalan pada halaman web.
tumpukan teknologi
vue, Html5, tag video, Android, IOS, Baidu AI
menganalisa
1. Gunakan navigator.mediaDevices.getUserMedia untuk memanggil fungsi kamera asli sistem
2. Tag video menampilkan konten kamera
3. Dapatkan gambar menggunakan tag kanvas
4. Unggah gambar ke server dan identifikasi gambar melalui Baidu AI
5. Web menampilkan hasil pengenalan
kode inti
1. Panggil fungsi kamera asli sistem dan gunakan tag video untuk menampilkan html:
<video id=webcam :style=videoStyle :width=videoWidth :height=videoHeight pramuat loop > </video>
JavaScript:
initVideo() { biarkan itu = ini; ini.video = document.getElementById(webcam); setTimeout(() => { if ( navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ) { //Panggil perangkat media pengguna dan akses kamera this.getUserMedia( { video: { lebar: { ideal: that.videoWidth, max: that.videoWidth }, tinggi: { ideal: that.videoHeight, max: that.videoHeight }, agedMode: user, //FrameRate kamera depan: { ideal: 30, min: 10 } } }, this.videoSuccess, this.videoError ); else { this.$toast.center(Kamera gagal dibuka, harap periksa pengaturan izin!); }, 300); }, getUserMedia(kendala, keberhasilan, kesalahan) { if (navigator.mediaDevices.getUserMedia) {/ //Navigator.mediaDevices API standar terbaru .getUserMedia(kendala) .then(success) .catch(error); } else if (navigator.webkitGetUserMedia) {//browser inti webkit navigator.webkitGetUserMedia(kendala, keberhasilan, kesalahan } else if (navigator.mozGetUserMedia) { //firfox browser navigator.mozGetUserMedia(kendala, keberhasilan, kesalahan } else if (navigator.getUserMedia) {//Navigator API lama . getUserMedia(kendala, keberhasilan, kesalahan); videoSuccess(stream) { this.mediaStreamTrack = streaming; this.video.srcObject = streaming; this.video.play() }, videoError(error) { console.error(error); pada Gagal, silakan periksa pengaturan izin! },2. Kanvas memperoleh gambar kamera
JavaScript:
this.canvas = document.createElement(canvas); .... biarkan konteks = this.canvas.getContext(2d); konteks.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight); imgSrc = ini.kanvas.toDataURL(gambar/png);
3. Hubungi Baidu AI untuk mengidentifikasi gambar
JavaScript:
biarkan itu = ini; biarkan base64Data = ini.kanvas.toDataURL(); biarkan gumpalan = ini.dataURItoBlob(base64Data); // var file = new FormData(); , itu.uuid); util.ajax .post(XXXXXXXXXX, file, { header: { Tipe Konten: multibagian/formulir-data } }) .then(function(response) { if ((response.status = 200)) { .....pengenalan berhasil, tampilkan hasilnya} else { ....pengenalan gagal} }) .catch(function(error) { console.error(error); //Konversi base64 menjadi Blob dataURItoBlob(base64Data) { var byteString; (base64Data.split(,)[0].indexOf(base64) >= 0) byteString = atob(base64Data.split(,)[1]); lain byteString = unescape(base64Data.split(,)[1]); var mimeString = base64Data .split(,)[0] .split(:)[1] .split(;)[0]; var ia = new Uint8Array(byteString.length); untuk (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); : pantomimString });Adaptasi ponsel
1. Karena manajemen izin Android telah berubah sejak Android 6, shell asli Android perlu diproses sebagai berikut:
myWebView.setWebChromeClient(WebChromeClient() baru { @TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override public void onPermissionRequest(permintaan PermissionRequest akhir) { request.grant(request.getResources()); }});2. Sistem IOS, tersedia setelah Safari11
3. Kesalahan OverconstrainedError. Beberapa ponsel Android akan melaporkan kesalahan OverconstrainedError Alasannya adalah pengaturan parameter kamera tidak masuk akal dan pengaturan yang ditentukan tidak dapat ditemukan.