如何在不使用外部视频文件的情况下播放文件

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<canvas id="canvas"></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var video = document.createElement('video');
  video.src = 'video.mp4';
  video.addEventListener('loadedmetadata', function() {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    setInterval(function() {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    }, 1000 / video.playbackRate);
    video.play();
  });
</script>

<video id="localVideo" autoplay></video>
<video id="remoteVideo" autoplay></video>
<script>
  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(function(stream) {
      var localVideo = document.getElementById('localVideo');
      localVideo.srcObject = stream;
      // 将本地媒体流传输到远程端
      // ...
    })
    .catch(function(error) {
      console.log('getUserMedia error: ', error);
    });
</script>