快捷導(dǎo)航

Django調(diào)用百度AI接口實(shí)現(xiàn)人臉注冊(cè)登錄代碼實(shí)例

更新時(shí)間：2020年04月23日 08:41:14 作者：小陸同學(xué)

這篇文章主要介紹了Django調(diào)用百度AI接口實(shí)現(xiàn)人臉注冊(cè)登錄,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

面部識(shí)別----考勤打卡、注冊(cè)登錄、面部支付等等...感覺(jué)很高大上，又很方便，下面用python中的框架--django完成一個(gè)注冊(cè)登錄的功能，調(diào)用百度AI的接口，面部識(shí)別在網(wǎng)上也有好多教程，可以自己建模，訓(xùn)練模型，但是這都需要大量的數(shù)據(jù)去提高模型的準(zhǔn)確度，我們直接用了百度AI的接口，十分的快捷、高效、準(zhǔn)確，下來(lái)碼一下代碼啦?。?/p>

首先需要在百度AI官網(wǎng)注冊(cè)一個(gè)應(yīng)用，免費(fèi)，并提供強(qiáng)大的人臉庫(kù)。

　　1.注冊(cè)表單

<div class="tab-content">
                    <div class="tab-content-inner active" data-content="signup">
                      <!-- <form action="{% url 'regist' %}" method="POST"> -->
                        <div class="row form-group">
                          <div class="col-md-12">
                            <input type="text" class="form-control" id="username" placeholder="用戶名">
                          </div>
                        </div>
                        <div class="row form-group">
                          <div class="col-md-12">
                            <input type="text" class="form-control" id="mobile" placeholder="手機(jī)號(hào)">
                          </div>
                        </div>
                        <div class="row form-group">
                          <div class="col-md-12">
                            <input type="password" class="form-control" id="password" placeholder="密碼">
                          </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-12">
                              <!-- <input type="text" class="form-control" id="mobile_code" placeholder="驗(yàn)證碼">
                              <input type="button" value=" 獲取驗(yàn)證碼" id="zphone"> -->
                            </div>
                        </div>
                        <div class="row form-group">
                          <div class="col-md-12">
                            <label for="password2"><font color='green'>新用戶點(diǎn)擊注冊(cè)會(huì)有面部特征收集哦！</font></label>
                          </div>
                        </div>

                        <div class="row form-group">
                          <div class="col-md-12">
                            <input type="submit" class="btn btn-primary" value="注冊(cè)" id="regist">
                          </div>
                        </div>
                      <!-- </form>   -->
                    </div>

　　2.注冊(cè)時(shí)調(diào)用攝像頭，ajax封裝給后端的數(shù)據(jù)

<!-- jQuery -->
  <script src="../static/assets/js/jquery.min.js"></script>
  <!-- jQuery Easing -->
  <script src="../static/assets/js/jquery.easing.1.3.js"></script>
  <!-- Bootstrap -->
  <script src="../static/assets/js/bootstrap.min.js"></script>
  <!-- Waypoints -->
  <script src="../static/assets/js/jquery.waypoints.min.js"></script>
  <!-- Carousel -->
  <script src="../static/assets/js/owl.carousel.min.js"></script>
  <!-- countTo -->
  <script src="../static/assets/js/jquery.countTo.js"></script>
  <!-- Magnific Popup -->
  <script src="../static/assets/js/jquery.magnific-popup.min.js"></script>
  <script src="../static/assets/js/magnific-popup-options.js"></script>
  <!-- Main -->
  <script src="../static/assets/js/main.js"></script>



<script>
    !(function () {
      // 老的瀏覽器可能根本沒(méi)有實(shí)現(xiàn) mediaDevices，所以我們可以先設(shè)置一個(gè)空的對(duì)象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
          // 首先，如果有g(shù)etUserMedia的話，就獲得它
          var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

          // 一些瀏覽器根本沒(méi)實(shí)現(xiàn)它 - 那么就返回一個(gè)error到promise的reject來(lái)保持一個(gè)統(tǒng)一的接口
          if (!getUserMedia) {
            return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
          }

          // 否則，為老的navigator.getUserMedia方法包裹一個(gè)Promise
          return new Promise(function (resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        }
      }
      const constraints = {
        video: true,
        audio: false
      };
      videoPlaying = false;
      v = document.getElementById('v');
      promise = navigator.mediaDevices.getUserMedia(constraints);
      promise.then(stream => {
        // 舊的瀏覽器可能沒(méi)有srcObject
        if ("srcObject" in v) {
          v.srcObject = stream;
        } else {
          // 防止再新的瀏覽器里使用它，應(yīng)為它已經(jīng)不再支持了
          v.src = window.URL.createObjectURL(stream);
        }
        v.onloadedmetadata = function (e) {
          v.play();
          videoPlaying = true;
        };
      }).catch(err => {
        console.error(err.name + ": " + err.message);
      })
      document.getElementById('regist').addEventListener('click', function () {
        if (videoPlaying) {
          mycanvas = document.getElementById('canvas');
          mycanvas.width = v.videoWidth;
          mycanvas.height = v.videoHeight;
          mycanvas.getContext('2d').drawImage(v, 0, 0);
          // 圖片數(shù)據(jù)轉(zhuǎn)換成數(shù)組
          data = mycanvas.toDataURL('image/webp'); 
          document.getElementById('photo').setAttribute('src', data);
          // ajax提交數(shù)據(jù)到后臺(tái)
          $.ajax({
            type:"POST",
            url:'http://127.0.0.1:8000/regist/',
            data:{username:$("#username").val(),mobile:$('#mobile').val(),password:$('#password').val(),mobile_code:$('#mobile_code').val(),imagecontent:data},
            dataType:"json",
            success:function(data){
              alert(data.result)
              $('#resText').text(data['result']);
              if(data.code == 200){
                window.location.
              }else{
                alert(data.result);
              }
            }
          })
        }
      }, false);

　　3.將已經(jīng)注冊(cè)的應(yīng)用中的各種id和key貼上來(lái)

# 導(dǎo)入百度AI
from django.apps import AppConfig
from aip import AipFace
import json
# django內(nèi)置事務(wù)
from django.db import transaction
# 導(dǎo)入狀態(tài)碼
from jyapp.ErrorCode import * # 官網(wǎng)給出的狀態(tài)碼，通過(guò)pandas讀出保存到

# 百度AI基本信息
class AppConfig(AppConfig):
  name = ''
  APP_ID = ''
  API_KEY = ''
  SECRECT_KEY = ''
  client = AipFace(APP_ID,API_KEY,SECRECT_KEY)
  client.setConnectionTimeoutInMillis(1000*5)
  client.setSocketTimeoutInMillis(1000*5)

　　4.注冊(cè)接口，按照接口文檔傳入必須的參數(shù)，手機(jī)驗(yàn)證碼功能已在本文中注釋掉，需要時(shí)自行百度。

# 注冊(cè)
class Regist(View):
  def get(self,request):
    return render(request,'moban_index.html')
  def post(self,request):
    # 獲取前端數(shù)據(jù)
    imagecontent = request.POST.get('imagecontent')
    username = request.POST.get('username')
    mobile = request.POST.get('mobile')
    password = request.POST.get('password')
    # mobile_code = request.POST.get('mobile_code')
    # print(imagecontent,username,mobile,password,mobile_code)
    # mobile_code_right = request.session.get('message_code')
    if not all([imagecontent,username,mobile,password]):
      return JsonResponse({'result':'注冊(cè)信息不能為空'})
    # if mobile_code != mobile_code_right:
    #   return JsonResponse({'result':'請(qǐng)輸入正確的驗(yàn)證碼'})
    else:
      # 驗(yàn)證該用戶是否存在
      user = models.User.objects.filter(mobile=mobile)
      if user:
        return JsonResponse({'result':'該用戶已存在，請(qǐng)直接登錄'})
      else:
        try:
          # 引入事務(wù)
          with transaction.atomic():  
            # 分割字符串
            base_data = imagecontent.split(',')[1]
            # base64解碼
            base64_decode = base64.b64decode(base_data)
            # 圖片寫入本地
            with open('static/image/'+mobile+'.jpeg', 'wb') as f:
              f.write(base64_decode)
            # 添加到mysql數(shù)據(jù)庫(kù)
            models.User.objects.create(
              imagecontent = 'static/image/'+mobile+'.jpeg',  # 可以根據(jù)需求是否保存注冊(cè)照片到數(shù)據(jù)庫(kù)，也可以通過(guò)百度AI人臉庫(kù)查看
              username = username,
              mobile = mobile,
              password = password,
            )
            imageType = 'BASE64'
            groupId = 'usergroup'  # 自定義
            userId = mobile
            # 加入可選參數(shù)
            options = {}
            options['user_info'] = username
            options['quality_control'] = 'NORMAL'
            options['liveness_control'] = 'LOW'
            result = AppConfig.client.addUser(base_data,imageType,groupId,userId,options)
            print(result)
            error_code = result['error_code']
            if isinstance(error_code,int) and error_code == 0:
              request.session['mobile'] = mobile
              return JsonResponse({'code':200,'result':'注冊(cè)成功'})
              # return JsonResponse({'result':'注冊(cè)成功'})
            else:
              error = ErrorCode().getErrorInfo(error_code)
              return JsonResponse({'result':'{}'.format(error)})
        except:
          return JsonResponse({'result':'注冊(cè)失敗'})

　　5.登錄.html

<div class="tab-content-inner" data-content="login">
                      <!-- <form action="{% url 'login' %}" method="POST"> -->
                        <div class="row form-group">
                          <div class="col-md-12">
                            <input type="text" class="form-control" id="mobile1" placeholder="請(qǐng)輸入手機(jī)號(hào)">
                          </div>
                        </div>
                        <div class="row form-group">
                          <div class="col-md-12">
                            <input type="password" class="form-control" id="password1" placeholder="請(qǐng)輸入密碼">
                          </div>
                        </div>

                        <div class="row form-group">
                          <div class="col-md-12">
                            <input type="submit" class="btn btn-primary" value="密碼登陸" id="login">
                            <input type="submit" class="btn btn-primary" value="人臉登陸" id="login_face">
                          </div>
                        </div>
                      <!-- </form>   -->
                    </div>

　　6.ajax封裝登錄信息

document.getElementById('login_face').addEventListener('click', function () {
        if (videoPlaying) {
          mycanvas = document.getElementById('canvas');
          mycanvas.width = v.videoWidth;
          mycanvas.height = v.videoHeight;
          mycanvas.getContext('2d').drawImage(v, 0, 0);
          data = mycanvas.toDataURL('image/webp');
          document.getElementById('photo').setAttribute('src', data);

          $.ajax({
            type:"POST",
            url:'http://127.0.0.1:8000/login_face/',
            data:{mobile:$('#mobile1').val(),imagecontent:data},
            dataType:"json",
            success:function(data){
              $('#resText').text(data['result']);
              document.getElementById('photo').setAttribute('src','static/'+data['point72src']);
              console.log(data['point72src'])
              if(data.code == 200){
                alert(data.result)
                window.location.
              }else{
                alert(data.result);
              }
            }
          })
        }
      }, false);

　　7.人臉快速登錄

class Login_face(View):
  def get(self,request):
    return render(request,'moban_index.html')
  def post(self,request):
    imagecontent = request.POST.get('imagecontent')
    mobile = request.POST.get('mobile')
    if not all([imagecontent,mobile]):
      return JsonResponse({'code':100,'result':'登錄信息不能為空'})
    else:
      user = models.User.objects.filter(mobile=mobile)
      if not user:
        return JsonResponse({'code':113,'result':'用戶不存在'})
      else:
        base_data = imagecontent.split(',')[1]
        imageType = 'BASE64'
        groupIdList = 'usergroup'
        # 加入可選參數(shù)
        options = {}
        options['max_user_num'] = 1
        options['quality_control'] = 'NORMAL'
        options['liveness_control'] = 'LOW'
        # options['user_id'] = mobile
        result = AppConfig.client.search(base_data,imageType,groupIdList,options)
        print(result)
        error_code = result['error_code']
        try:
          user_id = result['result']['user_list'][0]['user_id']
          score = result['result']['user_list'][0]['score']
          if isinstance(error_code,int) and error_code == 0 and user_id == mobile and score >= 90: 
            request.session['mobile'] = mobile
            return JsonResponse({'code':200,'result':'快速登錄成功'})
          else:
            error = ErrorCode().getErrorInfo(error_code)
            return JsonResponse({'result':'{}'.format(error)})
        except:
          error = ErrorCode().getErrorInfo(error_code)
          return JsonResponse({'result':'{}'.format(error)})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: