kwindla/local-custom-video-stream.html

## local-custom-video-stream.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="switchToVideo()" />switch to video for main stream</button>
      <button onclick="switchToCamera()" />switch to camera for main stream</button>
      <button onclick="shareVideo()" />share video through screenshare stream</button>
      <hr />
      <video id="local-vid" loop autoplay style="width: 100%"></canvas>
    </div>
    <div id="videos" style="margin-left: 50%"></div>

    <script>
      async function main() {
        document.getElementById('vid-file-picker').addEventListener('change', playLocalVideoFile, false);

        const ROOM_URL = YOUR ROOM URL HERE;

        window.callObject = DailyIframe.createCallObject({
          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';
        let currentDevices = await callObject.getInputDevices();
        window.cameraDeviceId = currentDevices.camera.deviceId;
        window.micDeviceId = currentDevices.mic.deviceId;

      }

      async function switchToVideo() {
        callObject.stopScreenShare();
        await callObject.setInputDevicesAsync({
          videoSource: localVideoStream.getVideoTracks()[0],
          audioSource: localVideoStream.getAudioTracks()[0],

        });
      }

      async function switchToCamera() {
        callObject.stopScreenShare();
        await callObject.setInputDevicesAsync({
          videoDeviceId: cameraDeviceId,
          audioDeviceId: micDeviceId
        });
      }

      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 input = document.getElementById('vid-file-picker');
        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();
        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="switchToVideo()" />switch to video for main stream</button>
	<button onclick="switchToCamera()" />switch to camera for main stream</button>
	<button onclick="shareVideo()" />share video through screenshare stream</button>
	<hr />
	<video id="local-vid" loop autoplay style="width: 100%"></canvas>
	</div>
	<div id="videos" style="margin-left: 50%"></div>

	<script>
	async function main() {
	document.getElementById('vid-file-picker').addEventListener('change', playLocalVideoFile, false);

	const ROOM_URL = YOUR ROOM URL HERE;

	window.callObject = DailyIframe.createCallObject({
	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';
	let currentDevices = await callObject.getInputDevices();
	window.cameraDeviceId = currentDevices.camera.deviceId;
	window.micDeviceId = currentDevices.mic.deviceId;

	}

	async function switchToVideo() {
	callObject.stopScreenShare();
	await callObject.setInputDevicesAsync({
	videoSource: localVideoStream.getVideoTracks()[0],
	audioSource: localVideoStream.getAudioTracks()[0],

	});
	}

	async function switchToCamera() {
	callObject.stopScreenShare();
	await callObject.setInputDevicesAsync({
	videoDeviceId: cameraDeviceId,
	audioDeviceId: micDeviceId
	});
	}

	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 input = document.getElementById('vid-file-picker');
	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();
	window.localVideoStream = videoEl.captureStream();
	}
	</script>
	</body>
	</html>