JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://unpkg.com/@cloudinary/js-streaming/dist/js-streaming.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Cloudinary Live Streaming Example</title>
</head>

<body class="center-text">
<div class="container wrapper">
    <h1>Cloudinary Live Streaming Example</h1>
    <div class="video-wrapper">
        <video class="video" id="video" autoPlay muted="muted" playsInline></video>
    </div>
    <div class="center">
        <div class="center-text">
            <button id="viewbtn" onclick="view();">Show camera</button>
            <button id="hidebtn" onclick="hide();">Hide camera</button>
        </div>
        <div class="center-text">
            <button id="initbtn" onclick="initialize();">Initialize stream</button>
            <button disabled id="startbtn" onclick="start();">Start stream</button>
            <button disabled id="stopbtn" onclick="stop();">Stop stream</button>
        </div>

        <div class="ui">
            <p>Status: <span id="status">Click on 'initialize Stream' to begin</span></p>
            <p>Public Id: <span id="publicid"></span></p>
            <p>File url: <a id="file_url" target="_blank"></a></p>
            <p>Stream url: <a id="stream_url" target="_blank"></a></p>
        </div>
    </div>
</div>
</body>

</html>

CSS

.container {
    max-width: 600px;
}

.info {
    height: 400px;
}

.ui {
    text-align: left;
    height: 400px;
}

.wrapper {
    display: inline-block;
}

.video-wrapper {
    width: 320px;
    margin-bottom: 15px;
    display: inline-block;
}

.video {
    width: 100%;
    border: 5px solid black;
}

.recording {
    border: 5px solid red;
}

.center-text {
    text-align: center;
}

.center {
    margin-left: auto;
    margin-right: auto;
    display: block
}

JavaScript

const {initLiveStream, attachCamera, detachCamera} = cloudinaryJsStreaming;
const CLOUD_NAME = 'demo-live';
const UPLOAD_PRESET = 'live-stream';
let liveStream, publicId, url;

function setText(id, text) {
  document.getElementById(id).innerHTML = text;
}

function setStatus(status) {
  setText("status", status);
}

function toggleButton(id, enabled) {
  document.getElementById(id).disabled = !enabled;
}

function toggleBtns(init = false, start = false, stop = false) {
  toggleButton("initbtn", init);
  toggleButton("startbtn", start);
  toggleButton("stopbtn", stop);
}

function setUrl(url) {
  const fileUrl = url + '.mp4';
  const streamUrl = url + '.m3u8';

  const file_link = document.getElementById('file_url');
  const stream_link = document.getElementById('stream_url');

  file_link.href = fileUrl;
  file_link.innerText = fileUrl;
  stream_link.href = streamUrl;
  stream_link.innerText = streamUrl;
}

function view(){
  attachCamera(document.getElementById("video")).then(c=>{
    console.log(c);
  })
}

function hide(){
  detachCamera(document.getElementById("video")).then(c=>{
    console.log(c);
  })
}

function start() {
  setStatus("starting...");
  toggleBtns();
  liveStream.start(publicId);
}

function stop() {
  setStatus("stopping...");
  toggleBtns();
  liveStream.stop();
}

// call initLiveStream with the configuration parameters:
function initialize() {
alert("init")
  setStatus("initializing...");
  toggleBtns();

  initLiveStream({
    cloudName: CLOUD_NAME,
    uploadPreset: UPLOAD_PRESET,
    debug: "all",
    hlsTarget: true,
    fileTarget: true,
    events: {
      start: function (args) {
        setStatus("started");
        document.getElementById("video").className = "video recording";
        toggleBtns(false, false, true);
      },
      stop: function (args) {
        setStatus("stopped");
        document.getElementById("video").className = "video";
        toggleBtns(true, false, false);
      },
      error: function (error) {
  ...