<button id="upload_widget" class="cloudinary-button">Upload files</button>

<script src="https://upload-widget.cloudinary.com/global/all.js" type="text/javascript"></script>  

<script type="text/javascript">  
var myWidget = cloudinary.createUploadWidget({
  cloudName: 'my_cloud_name', 
  uploadPreset: 'my_preset'}, (error, result) => { 
    if (!error && result && result.event === "success") { 
      console.log('Done! Here is the image info: ', result.info); 
    }
  }
)

document.getElementById("upload_widget").addEventListener("click", function(){
    myWidget.open();
  }, false);
</script>

<link href="./styles.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/@cloudinary/js-streaming/dist/js-streaming.js"></script>

<div class="container wrapper">
    <h1>Example of Live Streaming With Cloudinary</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 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>
<script src="./index.js"></script>

const {initLiveStream, attachCamera, detachCamera} = cloudinaryJsStreaming;
const CLOUD_NAME = '<your-cloud-name>';
const UPLOAD_PRESET = '<your-upload-preset>';
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() {
  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) {
        setStatus("error: " + error);
        toggleBtns(true, false, false);
      },
      local_stream: function (stream) {
        setStatus("local stream");
        // Attach the stream to a video element:
        liveStream.attach(document.getElementById("video"), stream);
      }
    }
  }).then(result => {
    // keep handle to instance to start/stop streaming
    liveStream = result;

    // Extract the public ID and URL from the result (publish the URL for the stream):
    publicId = result.response.public_id;
    url = 'https://res.cloudinary.com/'+CLOUD_NAME+'/video/upload/' + publicId;

    setStatus("initialized");
    setText("publicid", publicId);
    setUrl(url);

    toggleBtns(false, true, false);
  });
}