kimberleehowley/share-video.html

## share-video.html
<html>
  <head>
    <title>stream local video file</title>
    <script src="https://unpkg.com/@daily-co/daily-js"></script>
  </head>
  <body onload="main()">
    <div id="local-controls" style="width: 50%; float: left; visibility: hidden">
      <input id="vid-file-picker" type="file" accept="video/*"" />
      <button onclick="shareVideo()" />share video through screenshare stream</button>
      <hr />
      <video id="local-vid" controls style="width: 100%"></video>
    </div>
    <div id="videos" style="margin-left: 50%"></div>

    <script>
      const ROOM_URL = "https://your-domain.daily.co/hello";
      let videoInput = document.getElementById('vid-file-picker'), callObject;

      async function main() {
        videoInput.addEventListener('change', playLocalVideoFile, false);

        // const ROOM_URL = "https://kimberlee-daily.daily.co/loose-lips-sink-tests";

        callObject = window.DailyIframe.createCallObject({
          subscribeToTracksAutomatically: false,
          dailyConfig: {
            experimentalChromeVideoMuteLightOff: true,
          },
        });

        callObject.on("track-started", displayVideo);
        callObject.on("track-stopped", destroyVideo);
        await callObject.join({ url: ROOM_URL });
        document.getElementById('local-controls').style.visibility = 'visible';
      }

      async function shareVideo() {
        callObject.startScreenShare({ mediaStream: localVideoStream });
      }

      function displayVideo(evt) {
        console.log(evt);
        if (!(evt.track.kind === "video")) {
          return;
        }
        let videosDiv = document.getElementById("videos");
        let videoEl = document.createElement("video");
        videosDiv.appendChild(videoEl);
        videoEl.style.width = "100%";
        videoEl.srcObject = new MediaStream([evt.track]);
        videoEl.play();
      }

      function destroyVideo(evt) {
        let vids = document.getElementsByTagName("video");
        for (let vid of vids) {
          if (vid.srcObject && vid.srcObject.getVideoTracks()[0] === evt.track) {
            vid.remove();
          }
        }
      }

      function playLocalVideoFile(evt) {
        let videoEl = document.getElementById('local-vid');
        let file = this.files[0];
        let type = file.type;
        if (!videoEl.canPlayType(type)) {
          alert('cannot play that file');
          return;
        }
        videoEl.src = URL.createObjectURL(file);
        videoEl.play().then(() => {
          // Mozilla currently prefixes the function name, so we have to check for either
          if (typeof videoEl.mozCaptureStream == 'function') {
            window.localVideoStream = videoEl.mozCaptureStream();
          } else if (typeof videoEl.captureStream == 'function') {
            window.localVideoStream = videoEl.captureStream();
          }
        });
      }
    </script>
  </body>
</html>
	<html>
	<head>
	<title>stream local video file</title>
	<script src="https://unpkg.com/@daily-co/daily-js"></script>
	</head>
	<body onload="main()">
	<div id="local-controls" style="width: 50%; float: left; visibility: hidden">
	<input id="vid-file-picker" type="file" accept="video/*"" />
	<button onclick="shareVideo()" />share video through screenshare stream</button>
	<hr />
	<video id="local-vid" controls style="width: 100%"></video>
	</div>
	<div id="videos" style="margin-left: 50%"></div>

	<script>
	const ROOM_URL = "https://your-domain.daily.co/hello";
	let videoInput = document.getElementById('vid-file-picker'), callObject;

	async function main() {
	videoInput.addEventListener('change', playLocalVideoFile, false);

	// const ROOM_URL = "https://kimberlee-daily.daily.co/loose-lips-sink-tests";

	callObject = window.DailyIframe.createCallObject({
	subscribeToTracksAutomatically: false,
	dailyConfig: {
	experimentalChromeVideoMuteLightOff: true,
	},
	});

	callObject.on("track-started", displayVideo);
	callObject.on("track-stopped", destroyVideo);
	await callObject.join({ url: ROOM_URL });
	document.getElementById('local-controls').style.visibility = 'visible';
	}

	async function shareVideo() {
	callObject.startScreenShare({ mediaStream: localVideoStream });
	}

	function displayVideo(evt) {
	console.log(evt);
	if (!(evt.track.kind === "video")) {
	return;
	}
	let videosDiv = document.getElementById("videos");
	let videoEl = document.createElement("video");
	videosDiv.appendChild(videoEl);
	videoEl.style.width = "100%";
	videoEl.srcObject = new MediaStream([evt.track]);
	videoEl.play();
	}

	function destroyVideo(evt) {
	let vids = document.getElementsByTagName("video");
	for (let vid of vids) {
	if (vid.srcObject && vid.srcObject.getVideoTracks()[0] === evt.track) {
	vid.remove();
	}
	}
	}

	function playLocalVideoFile(evt) {
	let videoEl = document.getElementById('local-vid');
	let file = this.files[0];
	let type = file.type;
	if (!videoEl.canPlayType(type)) {
	alert('cannot play that file');
	return;
	}
	videoEl.src = URL.createObjectURL(file);
	videoEl.play().then(() => {
	// Mozilla currently prefixes the function name, so we have to check for either
	if (typeof videoEl.mozCaptureStream == 'function') {
	window.localVideoStream = videoEl.mozCaptureStream();
	} else if (typeof videoEl.captureStream == 'function') {
	window.localVideoStream = videoEl.captureStream();
	}
	});
	}
	</script>
	</body>
	</html>