locked
[W8.1][HTML]Video Preview Full Screen

    Question

  • Am trying to capture video using media capture and showing its preview but am not able to get the preview in full screen even if give 100% width and height .Iam attaching the code and screen shot of the same.It would be great if some one can help me out to fix the issue.Thanks in advance
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>captureVideo</title>
    
        <link href="captureVideo.css" rel="stylesheet" />
        <script src="/js/aws-sdk-2.1.24.min.js"></script>
        <script src="captureVideo.js"></script>
    </head>
    <body>
        <div class="captureVideoFragment">
            <video id="capturedVideo" class="capturedVideo" style="width:100%" autoplay="autoplay"></video>
            <div id="captureButton" class="captureButton">
                <div id="circularButton" class="circularButton"></div>
    </body>
    </html>

     function initialization() {
            document.getElementById("statusMessage").innerHTML = "Initialization started.";
            enumerateCameras();
        }
    
    
        // Identify available cameras.
        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]);
                    }
    
                    initCaptureSettings();
                    initMediaCapture();
                    document.getElementById("statusMessage").innerHTML = "Initialization complete.";
    
                } else {
                    document.getElementById("statusMessage").innerHTML = "No camera device is found ";
                }
            }, errorHandler);
        }
    
    
        // Initialize the MediaCaptureInitialzationSettings.
        function initCaptureSettings() {
            captureInitSettings = null;
            captureInitSettings =
                new Windows.Media.Capture.MediaCaptureInitializationSettings();
            captureInitSettings.audioDeviceId = "";
            captureInitSettings.videoDeviceId = "";
            captureInitSettings.photoCaptureSource =
                Windows.Media.Capture.PhotoCaptureSource.auto;
            captureInitSettings.streamingCaptureMode =
                Windows.Media.Capture.StreamingCaptureMode.audioAndVideo;
            captureInitSettings.realTimeModeEnabled = true;
            if (deviceList.length > 0)
                captureInitSettings.videoDeviceId = deviceList[0].id;
        }
    
    
        // Create a profile.
        function createProfile() {
            profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
                   Windows.Media.MediaProperties.VideoEncodingQuality.auto);
        }
    
        function startPreview() {
            try {
                videoplayer.src = URL.createObjectURL(oMediaCapture, { oneTimeOnly: true });
                videoplayer.controls = false;
                videoplayer.style.height = "100%";
                cameraStates = "preview";
                document.getElementById("captureButton").className = "captureButton";
                document.getElementById("circularButton").className = "circularButton";
                document.getElementById("captureButton").style.display = "block";
    
            } catch (e) {
                document.getElementById("statusMessage").innerHTML = "Preview failed: " + e.message;
                cleanupCaptureResources();
                return;
            }
        }
    
        // Create and initialze the MediaCapture object.
        function initMediaCapture() {
            oMediaCapture = null;
            oMediaCapture = new Windows.Media.Capture.MediaCapture();        
            oMediaCapture.initializeAsync(captureInitSettings).then(function (result) {
                oMediaCapture.setRecordRotation(1);
                oMediaCapture.setPreviewRotation(1);
                createProfile();
                startPreview();
                var videoDeviceController = oMediaCapture.videoDeviceController;
                var iVectorView = videoDeviceController.getAvailableMediaStreamProperties(0);
                videoDeviceController.setMediaStreamPropertiesAsync(0, iVectorView[3]);
            }, errorHandler);
        }
    
    
    
    
        // Start the video capture.
        function startMediaCaptureSession() {
            Windows.Storage.KnownFolders.videosLibrary.createFileAsync("TimesNowComment.mp4", Windows.Storage.CreationCollisionOption.replaceExisting).then(function (newFile) {
                storageFile = newFile;
                oMediaCapture.startRecordToStorageFileAsync(profile, storageFile).then(function (result) {
                    document.getElementById("captureButton").className = "captureButtonRecording";
                    document.getElementById("circularButton").className = "circularButtonRecording"
                }, errorHandler);
            });
        }
    
        // Stop the video capture.
        function stopMediaCaptureSession() {
            oMediaCapture.stopRecordAsync().then(function (result) {
                document.getElementById("captureButton").style.display = "none";
                var videoplayer = document.getElementById("capturedVideo");
                videoplayer.src = URL.createObjectURL(storageFile, { oneTimeOnly: true });
                videoplayer.controls = true;
                videoplayer.style.height = "auto";
                document.getElementById("captureButton").style.display = "none";
                
            }, errorHandler);
        }
    
        function cleanupCaptureResources() {
    
            if (oMediaCapture) {
                    oMediaCapture.close();
                    oMediaCapture = null;
            }
        }
    
        function mediaCaptureSession() {
            
            if (cameraStates == "preview") {
                startMediaCaptureSession();
                cameraStates = "recording";
            } else {
                stopMediaCaptureSession()                                                                                                                                                                                                                                                                                                                                                            
                cameraStates = "preview";
            }
            
        }
    
        function onRetakeButtonClicked() {
            createProfile();
            startPreview();
        }


    Wednesday, April 29, 2015 2:07 PM

All replies