January, 2014

  • Interoperability @ Microsoft

    Pointer Events Progress: Mozilla and Blink Communities Reach a Significant Engineering Milestone

    • 0 Comments

    As stated in the Blink 2014 goals, the Blink team considers Pointer Events as one of their priorities to improve the mobile Web platform experience. And it has recently shown evidence of their commitment to Pointer Events by checking in touch-action functionality into the code base and making it available through an experimental flag.

    Likewise, the Mozilla Firefox team has approved a patch submitted by Nick Lebedev from Akvelon that implements the same functionality. This is the result of months of great work in the OSS community where multiple engineers from different companies contributed their design ideas and engineering insights.

    Learn more on Pointer Events progress reading our latest blog post on our new Web site : http://aka.ms/pointereventsinfirefox

  • Interoperability @ Microsoft

    MS Open Tech is expanding into China!

    • 0 Comments

    Today I’m happy to report that Microsoft Open Technologies is expanding its presence to China with a new subsidiary – Microsoft Open Technologies (Shanghai) Company Limited (MS Open Tech Shanghai), headquartered in the Minhang District of Shanghai. Below are the full details of the new subsidiary and office. We’re thrilled to kick off 2014 with this investment in China and look forward to investing in the local market, partnering with the open source communities, and through the development of programs and software, promoting a vibrant technology ecosystem.

    Check out the news on our new blog: http://aka.ms/openinchina

  • Interoperability @ Microsoft

    Acceptance of Media Source Extensions as W3C Candidate Recommendation will accelerate adoption of dash.js

    • 0 Comments

    Microsoft Open Technologies, Inc. welcomes the news that the Media Source Extensions (MSE) specification has moved to Candidate Recommendation (CR) at the W3C.MSE Overview showing how MSE allows JavaScript to directly manipulate media buffers.

    Media Source Extensions allow JavaScript to manage media buffers directly.

    This is a critical step towards broad adoption of the dash.js project which provides cross-browser support for MPEG-DASH adaptive streaming video using MSE, a W3C specification that extends the HTMLMediaElement (video and audio) to allow JavaScript to generate media streams for playback.  This capability facilitates a variety of use cases, including adaptive streaming and time shifting live streams.

    What is dash.js and why is MSE important to it?

    At MS Open Tech we have been working on a project called dash.js for some time. Dash.js is an open source MPEG-DASH video player written in JavaScript.

    The objective of the dash.js project is to provide a robust, cross-platform player that can be freely reused in applications that require video playback. It provides MPEG-DASH playback in any browser that supports the W3C Media Source Extensions (MSE). Today, that includes Chrome and Internet Explorer 11, other browsers have indicated their intent to support MSE in the future. Consequently, here at MS Open Tech we are very pleased to see MSE move to Candidate Recommendation status.

    Our primary reason for contributing to dash.js is to make it easier for third parties to build adaptive streaming video players using MPEG-DASH, the latest ISO standard for Internet media streaming. This standard represents the future of online video, more than 75% of surveyed European broadcasters plan to adopt MPEG-DASH by the middle of this year.

     What does it mean to be a Candidate Recommendation?

    Advancement to Candidate Recommendation is an explicit call to those outside of the W3C and its Working Groups for implementation and technical feedback. The latest version of both Chrome and Internet Explorer already provide implementations of MSE but this progression to Candidate Recommendation increases the likelihood that other browsers will support it. In fact, Mozilla has already made great progress in their implementation of MSE. Similarly the WebKit project is working towards MSE support.

    For dash.js this is a very important step forwards. Since dash.js uses MSE to deliver MPEG-DASH content in browser based applications an increased level of browser support for the standard will help to ensure dash.js a truly viable MPEG-DASH player. This was clearly illustrated during a recent dash.js panel at Streaming Media West where representatives of MS Open Tech., Google and Digital Primates all identified increased adoption of MSE in browsers as being at the top of their wish list for the dash.js project.

    Invitation to dash.js

    With MSE moving to Candidate Recommendation, it appears that work is also well underway for standards-compliant streaming to become a reality across browsers who plan to adopt the MPEG-DASH standard. We are excited about these developments, and encourage you to start exploring the possibilities  using dash.js to create an MPEG-DASH player in just a few lines of JavaScript.

  • Interoperability @ Microsoft

    New release - Tx (LINQ to Logs and Traces)

    • 3 Comments

    We are proud to announce the release of Tx (LINQ to Logs and Traces), an open source project to help with the debugging of software from logs/traces, and the building of real-time monitoring and alerting systems.  

    This tool is code that has been used within Microsoft, for example, by the Windows Communication Foundation (WCF) and the ServiceBus teams. With this release, the Tx code is now available for use in your own projects.  

    Tx allows the use of Language Integrated Query (LINQ) queries on raw event sources. LINQ is a Microsoft .NET Framework component that adds native data querying capabilities using any of the supported .NET languages 

    Tx enables the use of Reactive Extensions (Rx) on real event sources and provides support for multiplexed event sequences (a stx multiplexed sequence as you might find in a typical logsingle sequence containing events of different types in order of occurrence). Using Tx, it is possible to hide the heterogeneity of event sources and thus provide a single query across multiple sources. Such queries use the same API for both real-time and past history.  

    When working on historical log/trace files. multiple queries can be performed with a single read. For example, a single pass over a file can count all “Warning” events, match “Begin” and “End” events, and calculate the average duration of each activity. This functionality is extremely useful when working with large files as it is possible to perform the same real-time queries efficiently over historical data to gain additional insights. 

    With this first release Tx (LINQ to Logs and Traces) provides:

    • Parsers that surface various trace/log formats as IObservables
    • LINQPad Driver, allowing the usage of LINQPad directly on files and real-time sessions
    • Samples illustrating how to use Reactive Extensions + LINQ to Objects on:
      • trace/log files that have no size restriction
      • real-time sessions

    This release also provides the following NuGet packages:

    • Tx.Core
      • Common components that are not specific to a specific tracing format and are commonly reused across different formats.
    • Tx.Windows provides support for:
      • Event Tracing for Windows (ETW) which allows application programmers to start and stop event tracing sessions, instrument applications and consume trace events.
      • Event Logs (.etvtx) and listening for changes in event logs
      • Performance counters from files (.blg, .csv, .tsv) and from real-time counter API
      • IIS text logs in W3C format
    • Tx.SqlServer
      • SQL Server Extended Events (XEvent)
    • Tx.All
      • A convenience package containing all the above

    Please check out the Tx project site on CodePlex for more information and the corresponding documentation.

     

    Georgi Chkodrov, Developer, Microsoft Corp.
    Ross Gardler, Senior Technical Evangelist, Microsoft Open Technologies, Inc.
  • Interoperability @ Microsoft

    MPEG-DASH Tutorial: Embedding an adaptive streaming video within your HTML5 application

    • 16 Comments

    Poor quality streaming video solutions resulted in an estimated $2.16 Billion of lost revenue in 2012 (according to the 2013 Conviva Viewer Experience Report). That’s a LOT of zeros!

    Since we at Microsoft Open technologies, Inc. (MS Open Tech) believe this is simply unacceptable, we’d like to share some ways in which developers can leverage open source code to ensure their own delivery of video is of the highest possible standard.

    For this tutorial, we have chosen to use the dash.js player to deliver MPEG-DASH video to any browser that supports the W3C Media Source Extensions (MSE).

    What is MPEG-DASH and dash.js?

    MPEG-DASH is an ISO standard for the adaptive streaming of video content, which offers significant benefits for those who wish to deliver high-quality, adaptive video streaming output. Many of these benefits directly address opportunities for improving user engagement identified in the Conviva report, such as:

    • 226% increase in video consumption given a buffer-less experience
    • Fourfold increase in likelihood of watching the video if start-up is less than two seconds
    • 25% increase in consumption for higher quality streams

    With MPEG-DASH, the video stream will automatically drop to a lower definition when the network becomes congested. This reduces the likelihood of the viewer seeing a "paused" video while the player downloads the next few seconds to play (aka buffering). As network congestion reduces, the video player will in turn return to a higher quality stream. This ability to adapt the bandwidth required also results in a faster start time for video. That means that the first few seconds can be played in a fast-to-download lower quality segment and then step up to a higher quality once sufficient content has been buffered.

    Dash.js is an open source MPEG-DASH video player written in JavaScript. Its goal is to provide a robust, cross-platform player that can be freely reused in applications that require video playback. It provides MPEG-DASH playback in any browser that supports the W3C Media Source Extensions (MSE), today that is Chrome and IE11 (other browsers have indicated their intent to support MSE).

    Creating a browser-based streaming video player

    In simple terms, the intention of the below example is to demonstrate how easy it can be to build an MPEG-DASH player into your website. If you have any problems applying this example to your own real world use case, pop over to the dash.js community mailing list, where we will be happy to help you out.

    To create a simple web page that displays a video player with the expected controls such a play, pause, rewind etc., you will need to:

    • Create an HTML page
      • Add the video tag
    • Add the dash.js player
    • Initialize the player
    • Add some CSS style
    • View the results in a browser that implements MSE

    The only part of this process that may be new to most of you is the "Initialize the player" step. This step can be completed in just a handful of lines of JavaScript code. Using dash.js, it really is that simple to embed MPEG-DASH video in your browser based application - including native applications that use HTML and JavaScript!

    Creating the HTML page

    The first step is to create a standard HTML page containing the <video> element, save this file as basicPlayer.html. You will tell the player to display its controls (by including the “control"), but won’t need to initialize any other aspects of the player in the HTML. This configuration could be managed completely in JavaScript, if desired.

    Here is the HTML you should have in basicPlayer.html:

    <!DOCTYPE html>
    <html>
      <head><title>Adaptive Streaming in HTML5</title></head>
      <body>
        <h1>Adaptive Streaming with HTML5</h1>
        <video id="videoplayer" controls></video>
      </body>
    </html>

    Since there is nothing unusual about this HTML. let’s move quickly on to the dash.js player code.

    Adding the dash.js player

    To add the dash.js reference implementation to the application, you’ll need to grab the dash.all.js file from the 1.0 release of dash.js project. This should be saved in the JavaScript folder of your application. This file is a convenience file that pulls together all the necessary dash.js code into a single file. If you have a look around the dash.js repository, you will find the individual files, test code and much more, but if all you want to do is use dash.js, then the dash.all.js file is what you need.

    If you prefer you could use the code from the master branch. The master branch contains the latest fully tested version of the code. At the time of writing this tutorial will work with the mater branch, and this should always be the case. The adventurous might want to use the development branch, which contains all the latest changes that have been accepted by the project community. This is the code that will go into the next release of dash.js. While there has been some testing on this branch, it is development code to be used at your own risk.

    Should you encounter any problems with any version of the code, please discuss them on the projects mailing list. If you uncover any bugs please report them via our issue tracker. In addition, as an open source project, we welcome appropriate code contributions, please fork the project on GitHub and issue a pull request.

    Whichever version of dash.all.js you choose to use, you will need to be load it into your application, to do this add a script tag to the head section of basicPlayer.html:

    <!-- DASH-AVC/265 reference implementation -->
    <script src="js/dash.all.js"></script>

    Next, create a function to initialize the player when the page loads. Add the following script after the line in which you load dash.all.js:

    <script>
    // setup the video element and attach it to the Dash player
    function setupVideo() {
      var url = "http://wams.edgesuite.net/media/MPTExpressionData02/BigBuckBunny_1080p24_IYUV_2ch.ism/manifest(format=mpd-time-csf)";
      var context = new Dash.di.DashContext();
      var player = new MediaPlayer(context);
                      player.startup();
                      player.attachView(document.querySelector("#videoplayer"));
                      player.attachSource(url);
    }
    </script>

    This function first creates a DashContext. This is used to configure the application for a specific runtime environment. From a technical point of view, it defines the classes that the dependency injection framework should use when constructing the application. In most cases, you will use Dash.di.DashContext.

    Next, instantiate the primary class of the dash.js framework MediaPlayer. This class contains the core methods needed such as play and pause, manages the relationship with the video element and also manages the interpretation of the Media Presentation Description (MPD) file which describes the video to be played. You will be working with this MediaPlayer from now on.

    The startup() function of the MediaPlayer is called to ensure that the player is ready to play video. Amongst other things this function ensures that all the necessary classes (as defined by the context) have been loaded. Once the player is ready, you can attach the video element to it using the attachView() function. This enables the MediaPlayer to inject the video stream into the element and also control playback as necessary. Finally, pass the URL of the MPD file to the MediaPlayer so that it knows about the video it is expected to play.

    The setupVideo() function just created will need to be executed once the page has fully loaded. Do this by using the onload event of the body element. Change your <body> element to:

    <body onload="setupVideo()">

    Finally, set the size of the video element using CSS. In an adaptive streaming environment, this is especially important because the size of the video being played may change as playback adapts to changing network conditions. In this simple demo simply force the video element to be 80% of the available browser window by adding the following CSS to the head section of the page:

    <style>
    video {
      width: 80%;
      height: 80%;
    }
    </style>

    Playing video

    That's it. You now have a fully functional JavaScript MPEG-DASH player that will work in any browser that supports MSE. Point your browser at your basicPlayback.html file, click play on the video controls and watch your video in all its adaptive streaming glory.

    From here it is a relatively small step to create, for example, a Windows Store application using dash.js. Or you could create a module for Drupal, Joomla, WordPress or some other content management system.

    Our goal with dash.js is to make it as reusable as possible. If you need any help getting it to work for you contact us through the project mailing list. We will be happy to help!

Page 1 of 1 (5 items)