カメラをキャプチャしてDIVのプレビューを表示します

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

質問

カメラのプレビューを示すWindows Storeアプリを開発するプロセスで、（明らかに）ユーザーが写真を撮ることができます。

次のコードでは、画面全体にCamerApReviewの表示が表示され、On-Clickは写真を取ります。プレビューを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 こちら/ 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はグローバルな配列です。

デバイスリストを取得すると、1番目のものを取得して設定

に追加します。 
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
})
.

私はそれがあなたを助けてくれることを願っています（そして私はそれがまだうまくいくことを願っています。私もそれを試してみることもできません、私はウィンドウATMにはありません）

写真を撮るためには、あなたのものがうまくいくかもしれません。私は同じコードを持っていませんが、あなたのものが写真を撮るならば、なぜそうではありません。あなたが私が写真を撮るために何をしたことを見たいのかを聞いてください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top