Somi-dashjs

A small library that Video tag use MediaSource Extension to Load video stream.

中文文档

online demo https://somiframe.github.io/vue-video/

About issue

If you have some problem in using Somi-dashjs or create a dash video?

Please comment on the git issue to let me know:)

Installation

    npm install somi-dashjs

How to create a onDemand dash video?

You need to install the MP4Box

And here is the simple command line example like below

   MP4Box -dash 3000 -profile onDemand -out manifest.mpd VivaLaVida.mp4

If you want to know more information about MP4Box Please go to see this Dash Support in MP4Box

After you dashify you video you will get the manifest.mpd and dashvideo

The dash video name maybe like VivaLaVida_dashinit.mp4

The manifest.mpd mpd file like below

<?xml version="1.0"?>
<!-- MPD file Generated with GPAC version 0.6.2-DEV-rev1219-g4007cec-master  at 2017-05-18T04:06:16.663Z-->
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBufferTime="PT1.500S" type="static" mediaPresentationDuration="PT0H4M2.091S" maxSegmentDuration="PT0H0M10.000S" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011">
 <ProgramInformation moreInformationURL="http://gpac.io">
  <Title>manifest.mpd generated by GPAC</Title>
 </ProgramInformation>

 <Period duration="PT0H4M2.091S">
  <AdaptationSet segmentAlignment="true" maxWidth="1280" maxHeight="720" maxFrameRate="25" par="16:9" lang="und" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
   <ContentComponent id="1" contentType="video" />
   <ContentComponent id="2" contentType="audio" />
   <Representation id="1" mimeType="video/mp4" codecs="avc1.4d401f,mp4a.40.2" width="1280" height="720" frameRate="25" sar="1:1" audioSamplingRate="44100" startWithSAP="1" bandwidth="1280527">
    <AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"/>
    <BaseURL>VivaLaVida_dashinit.mp4</BaseURL>
    <SegmentBase indexRangeExact="true" indexRange="1437-1900">
      <Initialization range="0-1436"/>
    </SegmentBase>
   </Representation>
  </AdaptationSet>
 </Period>
</MPD>

Usage

    // this is es5 version
    // cmd version need browserify

    var dash = require("somi-dashjs");
    if(dash.isSupportDash()){
        var segmentUrl = '/video/VivaLaVida_dashinit.mp4';
        var videoMimeTypeCodecs = 'video/mp4;codecs="avc1.4D401F,mp4a.40.2"';
        var initRange = {start: 0, end: 1436};
        var sidxRange = {start: 1437, end: 1900};
        new dash('#vid1',segmentUrl,videoMimeTypeCodecs,initRange,sidxRange);
    }


    // this is es6 version
    // es6 version need babelify

    import dash from "somi-dashjs";
    if(dash.isSupportDash()){
        let segmentUrl = '/video/VivaLaVida_dashinit.mp4';
        let videoMimeTypeCodecs = 'video/mp4;codecs="avc1.4D401F,mp4a.40.2"';
        let initRange = {start: 0, end: 1436};
        let sidxRange = {start: 1437, end: 1900};
        new dash('#vid1',segmentUrl,videoMimeTypeCodecs,initRange,sidxRange);
     }

Tests

First

clone the code to your local environment

    git clone https://github.com/SomiFrame/somi-dashjs.git

    git clone git@github.com:SomiFrame/somi-dashjs.git

Second

enter directory which you just cloned

    cd somi-dashjs

install the devDependencies

    npm install

compile the source file to public directory

    gulp

start a node server and listen the port 3031

    node server.js

Third

now you can open a browser and enter URL like below

localhost:3031