JMuxer

https://github.com/webstream-labs/jmuxer
Admin
jMuxer is a simple JavaScript MP4 muxer that works in both browser and Node.js environments,...
Tokens:2,891
Snippets:25
Trust Score:4.9
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Complete jMuxer Example with Video Player

Source: https://github.com/webstream-labs/jmuxer/blob/master/README.md

A full example demonstrating how to set up a video player using jMuxer, including script inclusion, HTML video element, and feeding media data.

```html
<script type="text/javascript" src="dist/jmuxer.min.js"></script>

   <video id="player"></video>

   <script>
       var jmuxer = new JMuxer({
           node: 'player',
           mode: 'both', /* available values are: both, audio and video */
           debug: false
       });

      /* Now feed media data using feed method. audio and video is buffer data and duration is in milliseconds */
      jmuxer.feed({
         audio: audio,
         video: video,
         duration: duration
       });

   </script>
```

--------------------------------

### Install jMuxer using npm

Source: https://github.com/webstream-labs/jmuxer/blob/master/README.md

Install the jMuxer module for use in Node.js or modern browser projects using npm.

```bash
npm install --save jmuxer
```

--------------------------------

### Initialize JMuxer for H265 Video

Source: https://github.com/webstream-labs/jmuxer/blob/master/example/h265.html

Initializes JMuxer to handle H265 video streams. Configure the player node, video codec, and error handling. This setup is specific to H265 video.

```javascript
var jmuxer;
window.onload = function() {
  var socketURL = '/H265';
  jmuxer = new JMuxer({
    node: 'player',
    mode: 'video',
    videoCodec: 'H265',
    flushingTime: 1000,
    fps: 30,
    debug: true,
    onError: function(data) {
      if (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)) {
        jmuxer.reset();
      }
    }
  });
  var ws = new WebSocket(socketURL);
  ws.binaryType = 'arraybuffer';
  ws.addEventListener('message',function(event) {
    jmuxer.feed({
      video: new Uint8Array(event.data)
    });
  });
  ws.addEventListener('error', function(e) {
    console.log('Socket Error');
  });
}
```

--------------------------------

### Initialize JMuxer Player and WebSocket

Source: https://github.com/webstream-labs/jmuxer/blob/master/docs/index.html

Sets up the JMuxer player instance and establishes a WebSocket connection to receive video data. The player is configured for 'both' modes, with a flushing time, FPS, and debug logging. Error handling is included for Safari.

```javascript
var jmuxer;
window.onload = function() {
  var socketURL = 'wss://samirdas.com/H264-AAC';
  jmuxer = new JMuxer({
    node: 'player',
    mode: 'both',
    flushingTime: 1000,
    fps: 25,
    debug: true,
    onError: function(data) {
      if (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)) {
        jmuxer.reset();
      }
    }
  });

  var ws = new WebSocket(socketURL);
  ws.binaryType = 'arraybuffer';

  ws.addEventListener('message',function(event) {
    const chunk = MessagePack.decode(new Uint8Array(event.data));
    jmuxer.feed({...chunk, duration: 10000});
  });

  ws.addEventListener('error', function(e) {
    console.log('Socket Error');
  });

  ws.addEventListener('close', function() {
    console.log('Stream ended');
  });
}
```

--------------------------------

### Include jMuxer Script and Initialize

Source: https://github.com/webstream-labs/jmuxer/blob/master/README.md

Include the jMuxer minified script and initialize a new JMuxer instance with basic options in a browser environment.

```html
<script type="text/javascript" src="dist/jmuxer.min.js"></script>

  var jmuxer = new JMuxer(option);
```

--------------------------------

### Browser Initialization and Feed

Source: https://github.com/webstream-labs/jmuxer/blob/master/README.md

Initialize JMuxer in a browser environment and feed audio/video data. Ensure the target node element exists.

```javascript
import JMuxer from 'jmuxer';

const jmuxer = new JMuxer({
              node: 'player',
              debug: true
            });

 jmuxer.feed({
      audio: audio,
      video: video,
      duration: duration
 });
```

--------------------------------

### Initialize and Play H.264 Video with jMuxer

Source: https://github.com/webstream-labs/jmuxer/blob/master/docs/h264_player.html

This JavaScript code initializes a jMuxer player and feeds it H.264 video data from a selected file. It handles user interaction for file selection and playback initiation.

```javascript
window.onload = function() {
  var jmuxer, duration;
  var reader = new FileReader();
  reader.onload = function(e) {
    jmuxer.feed({ video: new Uint8Array(e.target.result), duration: duration });
  };
  document.getElementById('play-btn').addEventListener('click', function(e) {
    if (jmuxer) {
      jmuxer.destroy();
    }
    var file = document.getElementById('h264_file');
    if (!file.files.length) {
      alert('Please choose a file.');
      return;
    }
    var fps = parseInt(document.getElementById('fps-input').value) || 30;
    duration = parseInt(document.getElementById('duration-input').value) * 1000;
    reader.readAsArrayBuffer(file.files[0]);
    jmuxer = new JMuxer({
      node: 'player',
      mode: 'video',
      flushingTime: 1000,
      fps: fps,
      clearBuffer: false,
      debug: true
    });
  }, false);
}
```

--------------------------------

### Client-side H264 + AAC Muxing with jMuxer

Source: https://github.com/webstream-labs/jmuxer/blob/master/example/h264-aac.html

Initializes jMuxer for 'both' video and audio modes, sets up a WebSocket connection to receive msgpack-encoded data, and feeds the decoded chunks into jMuxer for playback. Includes error handling for Safari.

```javascript
var jmuxer;
window.onload = function() {
  var socketURL = '/H264-AAC';
  jmuxer = new JMuxer({
    node: 'player',
    mode: 'both',
    flushingTime: 1000,
    fps: 25,
    debug: true,
    onError: function(data) {
      if (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)) {
        jmuxer.reset();
      }
    }
  });

  var ws = new WebSocket(socketURL);
  ws.binaryType = 'arraybuffer';

  ws.addEventListener('message',function(event) {
    const chunk = msgpack.decode(new Uint8Array(event.data));
    jmuxer.feed({...chunk, duration: 10000});
  });

  ws.addEventListener('error', function(e) {
    console.log('Socket Error');
  });

  ws.addEventListener('close', function() {
    console.log('Stream ended');
  });
}
```

--------------------------------

### H.264 Video Streaming with JMuxer

Source: https://github.com/webstream-labs/jmuxer/blob/master/example/stream.html

This snippet sets up a WebSocket connection to receive raw H.264 video chunks, buffers them, and appends them to a Media Source Buffer for playback.

```javascript
var chunks = []
var video = document.getElementById('player')
var mse = new (MediaSource || WebKitMediaSource)()
var sourceBuffer
video.src = URL.createObjectURL(mse)
mse.addEventListener('sourceopen', onMediaSourceOpen)

function onMediaSourceOpen() {
  sourceBuffer = mse.addSourceBuffer('video/mp4; codecs="avc1.4d401f"')
  sourceBuffer.addEventListener('updateend', addMoreBuffer)
  video.play()
}

function addMoreBuffer() {
  if (sourceBuffer.updating || !chunks.length) {
    return
  }
  sourceBuffer.appendBuffer(chunks.shift())
}

window.onload = function() {
  var socketURL = '/stream'
  var ws = new WebSocket(socketURL)
  ws.binaryType = 'arraybuffer'
  ws.addEventListener('message',function(event) {
    chunks.push(new Uint8Array(event.data))
    addMoreBuffer()
  })
  ws.addEventListener('error', function(e) {
    console.log('Socket Error')
  })
}
```

--------------------------------

### Client-side H.264 Muxing with Audio

Source: https://github.com/webstream-labs/jmuxer/blob/master/example/index.html

Muxes raw H.264 video chunks and AAC audio chunks sent from a server using WebSocket. Suitable for real-time streaming where the client handles muxing.

```javascript
var jmuxer;
window.onload = function() {
  var socketURL = '/';
  jmuxer = new JMuxer({
    node: 'player',
    mode: 'video',
    flushingTime: 1000,
    fps: 30,
    debug: true,
    onError: function(data) {
      if (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)) {
        jmuxer.reset();
      }
    }
  });

  var ws = new WebSocket(socketURL);
  ws.binaryType = 'arraybuffer';
  ws.addEventListener('message',function(event) {
    jmuxer.feed({ video: new Uint8Array(event.data) });
  });
  ws.addEventListener('error', function(e) {
    console.log('Socket Error');
  });
}
```

--------------------------------

### Node.js Stream Piping

Source: https://github.com/webstream-labs/jmuxer/blob/master/README.md

Use JMuxer in Node.js to pipe data from a source stream to a destination stream. This is useful for server-side media processing.

```javascript
const JMuxer = require('jmuxer');
const jmuxer = new JMuxer({
    debug: true
});

let h264_feeder = getFeederStreamSomehow();
let http_or_ws_or_any = getWritterStreamSomehow();
h264_feeder.pipe(jmuxer.createStream()).pipe(http_or_ws_or_any);
```

--------------------------------

### Node.js Data Callback

Source: https://github.com/webstream-labs/jmuxer/blob/master/README.md

Configure JMuxer in Node.js to use a callback function for handling processed data, such as sending it to an HTTP response.

```javascript
const jmuxer = new JMuxer({
	onData: function(data) {
		res.write(data); // send data to client
	}
    debug: true
});

jmuxer.feed({
	audio: audio,
	video: video,
	duration: duration
}); // feed data
```
Tokens:
Raw