npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@millicast/sdk

v0.3.2

Published

SDK for building a realtime broadcaster using the Millicast platform.

Downloads

16,390

Readme

Millicast SDK for JavaScript

npm (scoped) GitHub release (latest by date) Check tests

This Software Development Kit (SDK) for JavaScript allows developers to simplify Millicast services integration into their own web apps.

Table of Contents

Installation

You can use the CDN version of the SDK adding this tag to your document's <head>. Then millicast global variable will be available to use it.

<script src='https://cdn.jsdelivr.net/npm/@millicast/sdk@latest/dist/millicast.umd.js'></script>

Or if you are building an application with Node.js, you can install the SDK package to your dependencies.

npm i --save @millicast/sdk

Basic Usage

The following examples demonstrate how to broadcast with the Publisher app capturing the user's camera and microphone. You can then view the stream using the Viewer app.

You will need to use a Dolby Millicast account with a valid publishing token.

Publisher app

Please be sure to set up the credentials filling up the yourStreamName and yourPublishingToken fields.

In vanilla JavaScript:

publisher.html

<html>
  <head>
    <!-- Import the Millicast JS SDK -->
    <script src="https://cdn.jsdelivr.net/npm/@millicast/sdk@latest/dist/millicast.umd.js"></script>
  </head>

  <body>
    <script type="module">
      const yourPublishingToken = "..."
      const yourStreamName = "..."

      // Define callback for generate new tokens
      const tokenGenerator = () => millicast.Director.getPublisher({
        token: yourPublishingToken,
        streamName: yourStreamName
      })

      // Create a new instance
      const millicastPublish = new millicast.Publish(yourStreamName, tokenGenerator)

      // Get user camera and microphone
      const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })

      // Publishing options
      const broadcastOptions = {
        mediaStream
      }

      // Start broadcast
      try {
        await millicastPublish.connect(broadcastOptions)
      } catch (e) {
        console.log('Connection failed, handle error', e)
      }
    </script>
  </body>
</html>

Viewer app

Please be sure to set up the credentials filling up the yourStreamName and yourStreamAccountId fields.

In vanilla JavaScript:

viewer.html

<html>
  <head>
    <!-- Import the Millicast JS SDK -->
    <script src="https://cdn.jsdelivr.net/npm/@millicast/sdk@latest/dist/millicast.umd.js"></script>
  </head>

  <body>
    <video id="my-video" controls autoplay muted></video>

    <script type="module">
      // Get media element
      const video = document.getElementById('my-video')

      // Set the credentials for the streaming
      const yourStreamName = "..."
      const yourStreamAccountId = "..."

      // Define callback for generate new token
      const tokenGenerator = () => millicast.Director.getSubscriber({
        streamName: yourStreamName,
        streamAccountId: yourStreamAccountId
      })

      // Create a new instance
      const millicastView = new millicast.View(yourStreamName, tokenGenerator, video)

      // Start connection to publisher
      try {
        await millicastView.connect()
      } catch (e) {
        console.log('Connection failed, handle error', e)
      }
    </script>
  </body>
</html>

Documentation

The Documentation provides an overview of the Dolby Millicast services. This includes a Getting Started guide as a quick start.

The SDK Documentation details the Modules, Classes, and APIs you can use during development.

Samples

There are several packages that implement a publisher and viewer. These samples can be run and inspected for examples of how to implement various features.

JS Frameworks

This section is intended to explain how properly integrate this SDK with different JS frameworks, with links to official guides that will contain a more step by step oriented explanation on how to do it.

Right now, we only have a React Native guide.

React Native

This SDK can be used for React Native based projects. In order to accomplish this integration, some configuration steps are needed. This library assumes all webRTC methods are natively defined (usually, inside web browsers). However this is not the case for native Android/iOS native applications. In order to solve this, we have tested and worked along with React Native webRTC project for this purpose.

Check out this guide on how to integrate Millicast JS SDK with React Native webRTC!

SDK developer information

To develop and contribute to this project, there are some instructions of how to set up your environment to start contributing. Follow this link.

License

Please refer to LICENSE file.