<h1> 📹 Webcam Streaming in Picture-In-Picture Mode</h1>

<div class="media">
  <video id="videostreamId" autoplay="" controls></video>
</div>

<div class="actions">
  <button id="stream">Stream</button>
  <button id="stop-button">Stop</button>
</div>  
body {
  padding: 20px;
}

.media {
  height: 300px;
  width: 400px;
  background-color: '#000';
}

video {
  height: 300px;
  width: 400px;
}

.actions {
  margin: 10px;
}

button {
  background-color: #0098ff;
  color: #FFF;
  padding: 8px;
  border: 1px solid #0098ff;
  border-radius: 4px;
  cursor: pointer;
}
const stream = document.getElementById('stream');

const stopVideoButton = document.getElementById('stop-button');

const video = document.getElementById('videostreamId');

stream.addEventListener('click', async () => {
  
  
  await navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
    window.localStream = stream;
    video.srcObject = stream;
    video.play();
  });
  
  video.addEventListener('loadedmetadata', () => {
    video.requestPictureInPicture()
    .catch(console.error);
  });
});

stopVideoButton.addEventListener('click', () => {
  localStream.getVideoTracks()[0].stop();
  video.src = '';
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.