Skip to main content

Getting started

How to use nanoStream Webcaster with nanoStream Cloud?​

It is very simple to test and use nanoStream Webcaster as your live encoder to nanoStream Cloud with integrated nanoStream H5Live Player. You need a camera connected to your computer or built-in on your device, and a WebRTC-compatible browser. We recommend using Google Chrome.

Create your own nanoStream Cloud account​

Before starting

To begin, please sign in to the nanoStream Cloud Dashboard using your nanoStream Cloud/Bintu account credentials.
If you have not created an account yet, you can sign up or reach out to our dedicated sales team via the contact form or by sending an email to sales(at)nanocosmos.de.

Once logged in, you can create new streams by calling the bintu API with a valid API key.

Live Encoding / Webcast with nanoStream Webcaster​

You can start a Live Encoding/Webcast directly from the browser, plugin-free! This demo page can be used for instant live broadcast from a browser: https://webcaster.nanocosmos.de/release/webcast.html?bintu.apikey=YOURAPIKEY

Your API key

You find your bintu API key on the organisation overview page.

nanoStream Webcaster Browser API​

The nanoStream Webcaster Browser API is based on a Javascript API connected to the nanoStream WebRTC Server. It can be used for creating your own live video broadcast web page for plugin-free live streaming with WebRTC.

Developer Starting Point

The sample "webcast_minimal.html" is a good starting point for developers. https://webcaster.nanocosmos.de/release/webcast_minimal.html?bintu.apikey=YOURAPIKEY

Hosting Requirements​

You will need the following requirements to be fulfilled in order to host a WebRTC driven website on your own infrastructure:

  • HTTPS: WebRTC client web pages need to be hosted via HTTPS for accessing media devices within the browser and for connecting to the server component. Therefore you will need a valid SSL certificate.
  • Supported browsers: As of 2018, Chrome, Firefox, Edge and Safari are supported. For mobile platforms we recommend Safari on iOS (min iOS11) and Chrome for Android.

Broadcast Sample​

The following sample shows how to initiate a broadcast (one-to-many stream) from a WebRTC enabled HTML5 browser.

The stream is sent to an RTMP ingest point which you can get from our bintu.live API. Playback can be done with nanoStream H5Live Player.

Be sure to attach a video device (webcam) to your computer.

You also find a full running sample at codepen.

Setup The User Interface & Embed The Library​

Within your HTML:

<body>
  <!-- videoelement to preview your video device (camera) -->
  <video id="video-local" muted autoplay playsinline style="width:800;height:600"></video>

  <!-- buttons for start/stop of broadcast -->
  <button id="btn-startbroadcast">broadcast</button>
  <button id="btn-stopbroadcast">stop broadcast</button>
    
  <!-- embed the nanoStream Webcaster library -->
  <!-- replace "<version>" with the version contained in your package -->
  <script src="./js/api/webrtc/nano.webrtc.<version>.min.js"></script>
</body>

Minimal Broadcast Sample​

<script type="text/javascript">
  // entry point
  
  // create user object
  var user = new window.nanowebrtc.user();
  
  // sign into the cloud
  user.signIn({
    server: 'wss://bintu-webrtc.nanocosmos.de/p/webrtcws',
    // token or bintu API key for authentication
    token: 'myToken',
    bintuApiKey: 'myBintuApiKey'
  });
    
  // set bitrate config, 0=default
  user.setConfig({
    bitrates: {
      videoSendInitialBitrate: 500, // initial webrtc bitrate 500 kbits/s
      videoSendBitrate: 1500 // target webrtc bitrate 1500 kbits/s
    }
  );

  // example bintu rtmp url
  // you should use the bintu api to obtain a valid ingest URL (see below)
  var myOutputStreamUrl = 'rtmp://bintu-stream.nanocosmos.de/live';
  var myOutputStreamName = 'P4gSV-12345';
        
  // get connected devices
  user.getDevices();
        
  // devices have been gathered
  user.on('ReceivedDeviceList', function(event) {
    
    // available devices will be listed in "event.data":
    var audioDevices = event.data.devices.audiodevices;
    var videoDevices = event.data.devices.videodevices;
    
    // SELECT A/V DEVICES TO PREVIEW 
    // select a device by index from audioDevices/videoDevices,
    // for simplicity of this sample we select the first device
    // for audio and video (index = 0) in the next step.
    // you might need to change this for multiple cams/mics 
 
    // we choose the first video device:
    var videoDeviceConfig = {
      device: 0 // first camera
    };
          
    // we choose the first audio device:
    var audioDeviceConfig = {
      device: 0 // first microphone
    };
    
    // we start the preview in this html <video> element:
    var videoElement = 'video-local'; 
      
    var config = {
      videoDeviceConfig: videoDeviceConfig,
      audioDeviceConfig: audioDeviceConfig,
      elementId: videoElement
    };
          
    // start camera preview
    user.startPreview(config);
  });

  // start/stop button handlers
    
  document.getElementById('btn-startbroadcast').addEventListener('click', function() {      
    var broadcastConfig = {
      transcodingTargets: {
        output: myOutputStreamUrl,
        streamname: myOutputStreamName
      }
    };
          
    // start the broadcast
    user.startBroadcast(broadcastConfig);
  });
    
  document.getElementById('btn-stopbroadcast').addEventListener('click', function() {
    // stop the broadcast
    user.stopBroadcast();
  });

  // event/error handlers
 
  user.on('StartPreviewSuccess', function(event) {  
    console.log('preview succeeded');
  });
 
  user.on('StartPreviewError', function(event) {
    console.log('Error starting preview: ' + event.data.error);
  });

  user.on('StartBroadcastSuccess', function(event) {
    // broadcast has started
  });
        
  user.on('StartBroadcastError', function(event) {
    // handle error
  });
</script>

Screen Sharing​

Features > Screen Sharing

Streaming only audio or video​

Features > Audio- / Video-Only

nanoStream Cloud End-To-End Workflow​

The following describes a plugin-free end to end streaming solution from the camera to the viewer, with nanostream Webcaster, nanoStream Cloud and nanoStream h5live player.

Creating a live stream for broadcasting​

To create a live stream to broadcast to your audience, you need to obtain an RTMP ingest URL from either nanoStream Cloud / bintu.live or your own RTMP server.

Creating a stream for bintu.live with bintu.js​

If you don't already have a stream url you can create a new webrtc enabled stream with our bintu.js which is included in the nanoStream Webcaster Browser API.

<script src="./js/api/bintu/nano.bintu.js"></script>

<script type="text/javascript">
  var bintu = new Bintu(BintuApiKey, 'https://bintu.nanocosmos.de', true, true);

  var bintuTags = ['newTag, test, webrtc']; // optionally add tags to the stream
    
  bintu.createStream(bintuTags, function success(request) {
    var response = JSON.parse(request.responseText);
    var ingest = response.ingest;
    var rtmp = ingest.rtmp;
    var url = rtmp.url;
    var streamname = rtmp.streamname;
    var ingestUrl = url + '/' + streamname;
  }, function onerror(error) {
    console.log(error);
  });

</script>
Bintu docs

You can find the bintu.js documentation here

webcaster set up

For instructions on how to setup the Webcaster for screen sharing please follow this link: Features > Screen Sharing

Streaming to an RTMP URL​

If you have a valid RTMP URL, you can use this to create a live broadcast: (see the example above):

// example bintu rtmp url
// you should use the bintu api to obtain a valid ingest URL
var myOutputStreamUrl = 'rtmp://bintu-stream.nanocosmos.de/live/';
var myOutputStreamName = 'P4gSV-12345';

// you can also set an rtmp/aac audio bitrate
var audioBitrate = 64000 // value is in bits/s!

// for more information on possible additional parameters,
// check API -> nanoStream Webcaster API

var broadcastConfig = {
  transcodingTargets: {
    output: myOutputStreamUrl,
    streamname: myOutputStreamName,
    audiobitrate: audioBitrate
  }
};
 
// start the broadcast
user.startBroadcast(broadcastConfig);

Streaming to nanoStream Cloud​

The bintu.live REST API or Dashboard can be used to generate and manage live streams.

getting started

More information can be found here.

Stream Status​

The call to

/stream/<YOUR-STREAM-ID>

should give you all the info. The state value should be live when your broadcast is running.

bintu developer documentation

You can find the full bintu.live documentation here.

Example:

{
  "id":"123456-e7a1-46a6-9572-1037beff926c",
  "state":"live",
  "type":"low-latency",
  "created_at":"2018-10-02T08:53:50.377Z",
  "webrtc":true,
  "transcoding":false,
  "webrtc_server":"https://rtc1.nanocosmos.de/prod",
  "tags":[
    "myTag"
  ],
}

Live Playback with H5Live Player and nanoStream Cloud​

You can play back from our servers with the H5Live Player.

Reporting bugs or issues​

nanoStream Webcaster > Support

Camera / Capture Device Testing​

https://webrtc.github.io/samples/src/content/devices/input-output/

Last updated on