HTML5 휴대폰 카메라를 사용하여 AngularJS_AngularJS에서 사진 찍기

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. 사진을 찍으세요

$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"));
};

사진 촬영 시 캔버스 태그를 사용해야 합니다. 캔버스 태그를 생성하고, 사진 촬영에 필요한 크기를 설정하고, drawImage 함수를 통해 현재 영상 이미지를 캔버스 태그에 저장하고, 최종적으로 이미지 데이터를 변환해야 합니다. base64 데이터로 반환하고 카메라를 끄면 사진 촬영 기능이 완료됩니다. 여기서 $uibModalInstance 객체는 우리 프로젝트에서 팝업 레이어를 여는 객체로, 팝업 레이어 표시를 제어하는 ​​데 사용됩니다.

4. 카메라 끄는 방법

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

앞서 언급했듯이 카메라를 끄는 방법은 mediaStream 및 track 변수를 통해서입니다. 그러나 track은 Chrome 브라우저에서만 카메라를 끌 수 있습니다. 이는 Chrome 버전 45에서도 카메라를 끄는 방법입니다. 이상.

5. AndularJ에 통합

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

서비스 등록:

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;
}

});

전화 방법:

$scope.takePhoto = function () {
h5TakePhotoService.photo().then(function (res) {
if (res != null && res != "") {
$scope.myImage = res;
}
});
}

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

6. 호환성 문제

주로 Chrome 브라우저에 존재하는데, 로컬에서 테스트할 경우 Chrome 브라우저에서는 정상적으로 사용이 가능하지만, 서버에 배포한 후에는 정상적으로 사용이 되지 않습니다. 카메라 사용시에는 크롬 브라우저를 사용할 수 없습니다. 안전한 소스 접근만 지원하므로 https를 통해 접속해야만 정상적으로 사용이 가능합니다.

마지막으로 테스트 중에는 http://url을 통해서만 접근할 수 있고, file://url을 통해서는 접근할 수 없다는 점을 말씀드리고 싶습니다. 즉, 접근하려면 코드를 배포해야 합니다. Visual Studio, java web, php에서 접근 가능합니다.

위 내용은 편집자가 소개한 HTML5 휴대폰 카메라를 사용하여 AngularJS에서 사진을 찍는 지식입니다. 모두에게 도움이 되었으면 좋겠습니다!