JSFiddle - React, Tailwind, and code Playground

by alex_oliynyk

HTML

<template id="test">
    <video
      style="border: 1px solid red;"
      width="320px"
      height="240px"
      id="video-template"
      playsinline
      autoPlay
      muted
    ></video>
</template>

<div style="display: flex;">
  <div style="height: 300px; min-height: 300px; width: 320px; margin-right: 10px; display: flex; flex-direction: column;">
  
    <!-- Video rendered here -->
    <div id="template-parent"></div>
    
    <div style="margin-top: 10px;">
      <button onclick="setVideoSource('video-template')">Show video inside template</button>
      <button onclick="stop('video-template')">Stop ^^</button>
    </div>
  </div>
  <div style="height: 300px; min-height: 300px; width: 320px; margin-right: 10px; display: flex; flex-direction: column;">
    <video
      style="border: 1px solid blue;"
      width="320px"
      height="240px"
      id="video"
      playsinline
      autoPlay
      muted
    ></video>
    <div style="margin-top: 10px;">
      <button onclick="setVideoSource('video')">Show video</button>
      <button onclick="stop('video')">Stop ^^</button>
    </div>
  </div>
</div>

JavaScript

function stop(id) {
  const el = document.getElementById(id);
  
  var tracks = el.srcObject.getTracks();
  for (var i = 0; i < tracks.length; i++) {
    tracks[i].stop();
  }
  el.srcObject = null;
}

function setVideoSource(id) {
    navigator.mediaDevices.getUserMedia({
      video: {
        width: 1280,
        height: 720
      },
      audio: false
    }).then(stream => {
      const video = document.getElementById(id);
    	video.srcObject = stream;
    }).catch(err => {
    	console.log("error catching video stream", err);
    })
}

function showTemplate(stepName ) {
  const parent = document.getElementById(`template-parent`);
  const stepTemplate = document.getElementById(stepName);
  const clone = stepTemplate.content.cloneNode(true);
  parent.appendChild(clone);
};
showTemplate('test')