1. Documentation Wiki
 

H5Live Player

General

Which browsers/plattforms do we support?

The low-latency nanoStream h5Live Player runs on all full-featured HTML5 browsers including

  • Safari 10,11,12 on iOS and macOS
  • Chrome 54 and higher on desktop and mobile
  • Firefox 48 and higher
  • Edge
  • Internet Explorer 11 (starting Windows 8.1)

For Internet Explorer 11 on Windows 7, H5Live player contains a Flash player fallback for RTMP.

iOS

Is playback on iOS supported?

bintu

How can I play a bintu stream?

Use for the ‘config.source’ object the subobject ‘bintu’. It’s only necessary to pass the property ‘streamid’.


var config = {
  "source": {
      "bintu": {
          "apiurl": "https://bintu.nanocosmos.de",
          "streamid": "39b2cc18-7116-43a4-81bd-f62b7a1a9dbc"
      }
  },

Can I check capabilities?

Yes, you can check the static capabilities array of the NanoPlayers class ‘NanoPlayer.capabilities’. If the array has values, the player is supported. Values can be ‘h5live’, ‘flash’ and ‘native’.

Is there a API documentation available?

Security

Can I use secured streaming?

Yes, the player supports secured streaming with the ‘nanoStream cloud’ and ‘bintu’. Please contact our sales team.

Metrics

Are there metrics available?

Yes, over the ‘nanoStream cloud analytics’. Please contact sales@nanocosmos.de

Adjust/Style

Can I style the player as audio player?

Yes, you can style the player as audio player by passing

 config.style.audioPlayer=true   

Can I play video only or audio only streams?

Yes.

Can I customize the inline controls?

No, but you can disable them by passing

 config.style.controls=false

Can I use a raw player without any styles?

Yes, by passing the config property ‘style.view = false’ all styles will be disabled.

Can I use an own external video element?

Yes, by passing the id attribute of an existing html5 video element through the config property ‘playback.videoId’. The video will be inserted into the players container and existing styles will be overwritten and restored after a destroy.

Can I update the source?

Yes, by executing the player’s function ‘updateSource’ with an updated ‘config.source’ object.

Is a fullscreen functionality available?

Yes, via the bottom right fullscreen button on the built-in H5live player control bar.

Can I set the players size responsively?

Yes, by passing over ‘style.width’ and ‘style.height’ the value ‘auto’ and styling the players div.

Can I use a poster as placeholder for the video?

But you can use a workaround by passing the id of an existing video tag with poster through the config (config.playback.videoId). This video element would be used by the player instead of creating a new one. See http://demo.nanocosmos.de/nanoplayer/docs/nanoplayer/NanoPlayer.html#toc18__anchor.

Another possibility can be that you grab the video element from the DOM after successful setup and then modify the poster attribute.

 var video = document.querySelector("#playerDiv video");
 video.poster = ....;

Can I change the background color of the player?

No, currently there is no way to configure the background-color of the video element, but you can have workarounds. You can select the video in the resolve function of the promise (see the sample) and then change the color or you can create a global css rule for video elements. Please see the following examples.


var player; 
  var config = {
    "source": {
        "bintu": {
            "apiurl": "https://bintu.nanocosmos.de",
            "streamid": "236af21e-fbf3-4ba3-889c-343ef3f0e7ca"
        }
    },
   "playback": {
      "autoplay": true,
      "automute": true,
      "muted": false
  },
  "style": {
      "controls": true,
      "width": "auto",
      "height": "auto",    
      }
};
document.addEventListener('DOMContentLoaded', function () {
    player = new NanoPlayer("playerDiv");
    player.setup(config).then(function (config) {
        console.log("setup success");
        console.log("config: " + JSON.stringify(config, undefined, 4));
        var video = document.querySelector('#playerDiv video');
        video.style.backgroundColor = '#123456';
    }, function (error) {
        alert(error.message);
    });
});

Is there a simple code snippet available?

Yes, …

Can I use the player within a mobile webview?

Yes! …

Can I have multiple player instances in one page?

Yes, …

WebRTC

General

Do we support all types of cameras?

We support all common cameras that can be connected to the PC via USB.

Do we support IP cameras?

No, not yet.

Which browsers do we support?

Generally we support the two major desktop platforms Windows and MacOS and Android and iOS as mobile platforms. Because WebRTC is an “in development” technology there are minor restrictions regarding browser support. Please see the below list for platform/browser combinations that we support officially.

Chrome Firefox MS Edge Safari
Windows x x with limitations -
MacOS x x - v11
iOS - - - v11
Android x - - -

How to check browser support during runtime?

You can call the function RtcUser.checkSupport(), it will give you information about support regarding the currently used browser. Please see the docs: https://webrtc.nanocosmos.de/release/doc/webrtc/RtcUser.html#checkSupport__anchor

Devices

I do not see a preview of my camera. What can this be?

This can have multiple reasons. First be sure to listen to the proper events for device handling - please listen to the event 'StartPreviewError' to see why the camera/preview is not working correctly.

I am trying to preview my camera but I get an error message. What can this be?

  1. There is no camera connected.
  2. Camera is being used by another browser.

I want to toggle my video device. How can I achieve this?

You can not switch cameras/devices while a broadcast is active. Please stop the broadcast, switch camera/device and then start the broadcast again. Unfortunately we do not have an example for device toggling, you receive a list of available devices in the “ReceivedDeviceList” event. Please also add at least logs to the error handlers so you can see if something goes wrong:

user.on("StartPreviewError", function(evt) {
  // handle error
console.log((event.data.text);
});


user.on("StartBroadcastError", function(evt){
// handle error
console.log((event.data.text);
});

How to start a preview?

How to start a screen capture?

Broadcast

How to start a broadcast?

https://www.nanocosmos.de/blog/2016/07/live-streaming-with-bintu-live/

I want to start a broadcast but I get an error with the message “stream option not allowed”.

How do I improve the quality of the stream?

I do not see a picture and hear no sound, what to do?

Integration into other platforms

Further questions? Would you like a feature not available yet?
We can make it work for you based on our consulting and development / implementation services. Contact us.