Video Capture with UPLOAD for Windows 10+ Mobile

793 views Asked by At

I've been researching Video Capture with UPLOAD for Windows 10 Mobile and it doesn't appear possible at the moment. I was using the following:

<input type="file" accept="video/*">

This allows you to select the mobile webcam as a source, but you can only take photos. On Android and iOS the camera opens ready to record video, which you can upload as part of a "multipart/form-data" POST request.

On the web, there are lots of examples of displaying the webcam feed in a video element and capturing individual frames from it, but none of capturing the complete video for upload. There is no example on the web of actually opening the video camera from a web page on Windows Phone (I'm using Edge Browser on Windows 10 Mobile Insider Preview).

I was also using the following code which allows you to take a still image from a webcam stream (taken from MicrosoftEdge/Demos/photocapture):

var initializeVideoStream = function(stream) {
    mediaStream = stream;

    var video = document.getElementById('videoTag');
    if (typeof (video.srcObject) !== 'undefined') {
         video.srcObject = mediaStream;
    }
    else {
        video.src = URL.createObjectURL(mediaStream);
    }
    ...
}

navigator.mediaDevices.getUserMedia({
        video: {
            width: 640,
            height: 360,
            deviceId: { exact: webcamList[currentCam] }
        }
    }).then(initializeVideoStream).catch(getUserMediaError);

The initializeVideoStream gets called with a MediaStream object, however, there appears to be no way of piping this to a Blob or another stream that will allow you to save it and eventually post it to a server.

The HTML5 MediaRecorder API looks promising, however, not many vendors have implemented it yet.

I also found this hack Recording Audio & Video with HTML5 (co-starring Meteor), however, as the Edge Browser does not support webp format this is a no go.

Some other resources that I found on the web include (but none cover video upload):

http://dev.modern.ie/testdrive/demos/photocapture/

http://ryanjoy.com/2014/04/file-upload-in-ie11-on-windows-phone-8-1/

https://blogs.windows.com/buildingapps/2012/11/08/internet-explorer-10-brings-html5-to-windows-phone-8-in-a-big-way/

HTML5 on MSDN

HTMLInputElement on MSDN

1

There are 1 answers

1
Joe Healy On

"accept" attributes are definitely not supported at this point.

The Edge status shows it as "Under Consideration" with just 65 votes at http://dev.modern.ie/platform/status/httpclienthints/?filter=f3f0000bf&search=accept .

If you're interested in implementation of the HTTP Client Hints ( aka "accept" ) on Edge be sure and vote it up at the URL above.

Some other areas to supply feedback on Microsoft Edge.

Hope that helps. Healy in Tampa.