Windows 10: Announcing media capture functionality in Microsoft Edge

Here is one example which accounts for the legacy srcObject approach before all browsers support the standards-based approach:

Code: var video = document.getElementById('videoTag'); if (typeof(video.srcObject != "undefined") { video.srcObject = stream; } else { video.src = URL.createObjectURL(stream); }[/quote] Next, copy a video frame onto a canvas. Let’s assume we have set up the event listener so when you tap the video tag, we will invoke the following function:

Code: function capturePhoto() { var video = document.getElementById('videoTag'); var canvas = document.getElementById('canvasTag'); var videoWidth = video.videoWidth; var videoHeight = video.videoHeight; if (canvas.width !== videoWidth || canvas.height !== videoHeight) { canvas.width = videoWidth; canvas.height = videoHeight; } var ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); }[/quote] Finally, save the picture:

Code: function savePhoto() { var canvas = document.getElementById('canvasTag'); var imgData = canvas.msToBlob("image/jpeg"); navigator.msSaveBlob(imgData, "myPhoto.jpg"); }[/quote] You can also change code here to upload the data blob to your web server.

Don’t forget to release the webcam device after you complete the task. Some earlier browser implementations have a stop() method on the MediaStream object. That is not supported by the W3C spec. Instead, you should call the stop() method on the MediaStreamTrack object to release the capture device. For example:

Code: var video = document.getElementById('videoTag'); var videoTracks = mediaStream.getVideoTracks(); video.srcObject = null; videoTracks[0].stop();[/quote] Once you know how to use one webcam, it should not be difficult to introduce a camera switching feature to your page to handle multiple webcams. You can check out our demo at the Microsoft Edge Dev site for more.

Scenario #2: Capture a voice message from microphone
Now let’s look at a simple example using the microphone.

First, get an audio stream from a microphone and set it as the source node of a web audio graph.

Code: var audioContext = new AudioContext(); navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) { var sourceNode = audioContext.createMediaStreamSource(stream); var gainNode = audioContext.createGain(); sourceNode.connect(gainNode); … }).catch( function (error) { console.log(error.name + ": " + error.message); });[/quote] Next, extract the audio data from a web audio ScriptProcessorNode. This is too lengthy to include here, but you can check out the actual demo code at the Microsoft Edge Dev site and GitHub repository, where you can also add some simple web audio DSP filters before the ScriptProcessorNode.

Finally, save the audio data into a wav file. Once we have the audio data, we can add a wav file header and save the data blob. Again, please check out the actual demo code at the Microsoft Edge Dev site.

We’ve only talked about a couple simple examples as starting points. Once you’ve gotten the captured video stream into a video tag and then canvas, and gotten captured audio into web audio, it’s easy to see many scenarios that start to light up with just a bit more work. We’re eager for your feedback so we can further improve our implementation, and meanwhile we are looking forward to seeing what you do with these new tools!

– Shijun Sun, Senior Program Manager, Microsoft Edge [/quote]
Source: http://blogs.windows.com/msedgedev/2...icrosoft-edge/

:)

 

Printscreen/ screenshot?

There have been no announcements related to screen capture and thus there's no way to infer
if it will come to Windows Phone.

 

WMDC Won't even start....

Dana's fix did the trick for me.... huge relief! Thanks.