AngularJS에서 사진을 찍기 위해 HTML5 카메라를 사용하는 그래픽 및 텍스트 세부 사항에 대한 자세한 소개

1. 프로젝트 배경

회사에서 웹사이트를 개발하면서 유저의 아바타를 수정할 때 카메라로 사진을 찍어 아바타를 수정할 수 있는 기능을 추가한다고 하더군요. 저희 웹사이트는 Html5를 기반으로 개발되었기 때문에 H5를 직접 사용하여 사진을 찍습니다. 처음에는 이 기능이 매우 간단하다고 생각했는데, 막상 해보면 그리 간단하지 않다는 것을 깨달았습니다.

다음은 AngularJs에서 사진을 찍고 스크린샷을 업로드하기 위해 카메라를 성공적으로 호출한 예입니다.

2. 카메라 호출 방법

$scope.photoErr = false;
$scope.photoBtnDiable = true;
var mediaStream = null,track = null;

navigator.getMedia = (navigator.getUserMedia ||
                      navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
                      navigator.msGetUserMedia);
        if (navigator.getMedia) {
            navigator.getMedia(
           {
               video: true
           },
           // successCallback
           function (stream) {
               var s = window.URL.createObjectURL(stream);
               var video = document.getElementById('video');
               video.src = window.URL.createObjectURL(stream);
               mediaStream = stream;
               track = stream.getTracks()[0];
               $scope.photoBtnDiable = false;               $scope.$apply();
           },
           // errorCallback
           function (err) {
               $scope.errorPhoto();
               console.log("The following error occured:" + err);
           });
              } else {
            $scope.errorPhoto();
        }

코드 분석:

navigator는 브라우저 정보를 포함하는 브라우저 개체입니다. $scope는 AndularJs 구문입니다. 첫 번째 단계는 브라우저의 다양한 카메라 열기 기능을 호출하기 위해 navigator.getMedia를 선언하는 것입니다. 현재는 일반 브라우저인 Google Chrome, Firefox 및 IE 브라우저에 해당하는 getUserMedia, webkitGetUserMedia, mozGetUserMedia 및 msGetUserMedia의 네 가지 메소드만 있습니다. . 호출할 함수를 자동으로 결정합니다. 두 번째 단계는 사용할 멀티미디어 유형, 획득 성공 시 반환되는 스트림 데이터 처리 함수, 실패 시 반환되는 오류 메시지 처리 함수 등 세 가지 매개변수가 포함된 브라우저를 호출하여 여는 것입니다. 그 중 사용시 영상 설정은 물론 마이크 설정도 가능합니다. 설정 방법은

{
      video: true，
      audio: true
}

통화가 성공하고 카메라를 켠 후 영상 스트림 데이터가 반환됩니다. 스트림 데이터를 비디오 태그로 설정하고 이를 인터페이스 이미지에 실시간으로 표시할 수 있습니다. mediaStream은 획득한 스트림 데이터를 기록하는 데 사용되며, track은 Chrome 브라우저에서 카메라 상태를 추적하는 데 사용됩니다. 두 변수 모두 카메라를 끄는 데 사용할 수 있습니다.

3. 사진 찍기

rree

사진을 찍을 때 캔버스 태그를 사용하고, 사진 촬영에 필요한 크기를 설정하고, 현재 이미지를 저장해야 합니다. drawImage 함수를 통해 video를 canvas 태그에 추가하면 마지막으로 이미지 데이터가 base64 데이터로 변환되어 반환되고 카메라가 꺼지므로 카메라 기능이 완성됩니다. 여기서 $uibModalInstance 객체는 우리 프로젝트에서 팝업 레이어를 여는 객체로, 팝업 레이어 표시를 제어하는 ​​데 사용됩니다.

4. 카메라 끄는 방법

$scope.snap = function () {
        var canvas = document.createElement('canvas');
            canvas.width = "400";
            canvas.height = "304";

            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, 400, 304);
            $scope.closeCamera();
            $uibModalInstance.close(canvas.toDataURL("image/png"));
};

앞서 말씀드린 것처럼 mediaStream과 track 변수를 통해서만 카메라를 끌 수 있습니다. Chrome 브라우저. Chrome 버전 45 이상에서 카메라를 끄는 방법이기도 합니다.

5. AndularJs에 통합

사실 위에서 언급한 모든 것은 AndularJs에서 구현됩니다. 물론 여기서는 사진 촬영과 사진 데이터 반환만 다른 곳에서 구현하고 싶습니다. 이것도 사용한다면 이 부분을 분리해야 합니다. 여기서는 AngularJs의 서비스 메커니즘을 사용하여 이 부분을 별도의 서비스로 만들고 프로젝트에 주입한 다음 다른 곳에서 호출할 수 있습니다.

서비스 등록:

$scope.closeCamera = function () {
            if (mediaStream != null) {
                if (mediaStream.stop) {
                    mediaStream.stop();
                }
                $scope.videosrc = "";
            }
            if (track != null) {
                if (track.stop) {
                    track.stop();
                }
            }
        }

호출 방법:

app().registerService("h5TakePhotoService", function ($q, $uibModal) {

        this.photo = function () {
            var deferred = $q.defer();
            require([config.server + "/com/controllers/photo.js"], function () {
                $uibModal.open({
                    templateUrl: config.server + "/com/views/modal_take_photo.html",
                    controller: "photoModalController",
                    windowClass: "modal-photo"
                }).result.then(function (e) {
                    deferred.resolve(e);
                });
            });
            return deferred.promise;
        }

    });

h5TakePhotoService는 컨트롤러에 주입된 사진 서비스 객체이며, 최종적으로 반환된 이미지 데이터를 처리하고 데이터를 다음과 같이 설정합니다. 인터페이스에 표시됩니다.

6. 호환성 문제

크롬 브라우저에서 주로 발생합니다. 로컬 테스트 중에는 크롬 브라우저를 정상적으로 사용할 수 있으나, 서버 배포 후에는 정상적으로 사용할 수 없습니다. 오류 메시지는 [object NavigatorUserMediaError]인데, 이는 Chrome 브라우저가 카메라 사용 시 보안 소스 접근만 지원하기 때문에 https 접근을 통해서만 정상적으로 사용할 수 있기 때문입니다.

마지막으로 테스트 중에는 http://www.php.cn/을 통해서만 액세스할 수 있고 file://url을 통해서만 액세스할 수 있다는 점을 말씀드리고 싶습니다. 이에 액세스하기 위한 코드는 Visual Studio, Java 웹, PHP에서 완료되었습니다.

위 내용은 AngularJS에서 HTML5 카메라를 사용하여 촬영한 이미지와 텍스트에 대한 자세한 소개입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!