카메라를 캡처하고 Div에서 미리보기를 보여주십시오

StackOverflow https://stackoverflow.com//questions/24011375

문제

카메라의 미리보기를 보여주는 Windows Store 앱을 개발 한 다음 (분명히) 사용자가 사진을 찍을 수 있습니다.

다음 코드에서 전체 화면에는 CamerApReview의 표시가 표시되고 On 클릭은 그림을 촬영합니다.미리보기가 DIV에 표시되고 별도의 버튼을 사용하여 실제로 사진을 찍을 수 있습니다.나는 다양한 자습서를 읽었지 만 모두 사진을 찍기 위해 전체 화면을 사용합니다.문제를 해결할 수있는 방법이 있습니까?

Visual Studio를 사용하여 JavaScript에서 Windows Store 앱을 개발하고 있습니다. 

function takepicture() {
        var captureUI = new Windows.Media.Capture.CameraCaptureUI();
        captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (capturedItem) {
            if (capturedItem) {
                document.getElementById("message").innerHTML = "User captured a photo."
            }
            else {
                document.getElementById("message").innerHTML = "User didn't capture a photo."
            }
        });
    }
.

함수가 onload라고합니다.API-Info Href="http://msdn.microsoft.com/en-us/library/windows/apps/windows.media.capture.aspx" Rel="nofollow"> 여기에서 읽었습니다./ a>,하지만 어떻게 알 수 없었습니다.나는 뭔가를 놓치고 있니?

내 일반적인 아이디어는 다음 설정을 사용하는 것입니다. 

<body onload="showPreview();">
    <div id="cameraPreview">

    </div>
    <div>
        <button id="capture" onclick="takePicture();">Take Picture</button>
    </div>
</body>
.

도움이 되었습니까?

해결책

글쎄, 나는 그것을 시도 할 때 이것을하는 데 몇 가지 문제가있다. 그러나 나는 마침내 성공했다.다음은

을 수행하는 방법이 있습니다

html 

<div style="width:100%;height:100px">
    <video id="cameraPreview"></video>
</div>
.

카메라 미리보기가 비디오 요소에 표시됩니다. 상위 DIV의 크기를 설정하거나

를 볼 수 있습니다.

미디어 요소 초기화 

// div is the dom element that will contain the camera preview
// div should be a video element
var mediaRec = new Windows.Media.Capture.MediaCapture();
var div = document.getElementById("cameraPreview");
var settings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
.

카메라 장치 가져 오기 

var deviceList = [];
function enumerateCameras() {
    var deviceInfo = Windows.Devices.Enumeration.DeviceInformation;
    deviceInfo.findAllAsync(Windows.Devices.Enumeration.DeviceClass.videoCapture).then(function (devices) {
        // Add the devices to deviceList                                                                                                               
        if (devices.length > 0) {

            for (var i = 0; i < devices.length; i++) {
                deviceList.push(devices[i]);
            }
        } else {
            console.log("No devices found");
        }
    }, function () { console.log("error");});
}
.

초기화 후에이 작업을 호출하십시오. 또한 Devicelist는 전역 배열입니다.

장치 목록을 가져 오면 첫 번째를 가져 와서 설정에 추가하십시오 

settings.videoDeviceId = deviceList[0];
. 그런 다음 initializeasync를 사용하여 Mediarec 요소를 초기화하고 Div를 바인딩합니다. 

mediaRec.initializeAsync().then(function () {
    div.src = URL.createObjectURL(mediaRec); // Set the div data source. Most important part
    div.play(); // read the source and display it
})
.

나는 당신을 도울 수 있기를 바랍니다. (그리고 여전히 작동하기를 바랍니다. 나는 그것을 시도 할 수 없습니다.

그림을 찍으려면 당신의 일이 작동 할 수 있습니다.나는 같은 코드가 없지만 당신의 사진을 찍으면 왜 그렇지 않은지.내가 사진을 찍는 것을보고 싶은지 물어보십시오.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top