@@ -4,10 +4,14 @@ const videoElement = document.querySelector('video');
 const videoSelect = document.querySelector('select#videoSource');
 const selectors = [videoSelect];
 
-let video = document.querySelector('video');
 let canvas = document.getElementById('canvas');
 let context1 = canvas.getContext('2d');
 
+videoElement.addEventListener('canplay', function () {
+  canvas.width = this.videoWidth;
+  canvas.height = this.videoHeight;
+  console.log('this', this)
+});
 
 function gotDevices(deviceInfos) {
   const values = selectors.map(select => select.value);
@@ -17,7 +21,6 @@ function gotDevices(deviceInfos) {
     }
   });
   for (let i = 0; i !== deviceInfos.length; ++i) {
-
     const deviceInfo = deviceInfos[i];
     const option = document.createElement('option');
     option.value = deviceInfo.deviceId;
@@ -75,14 +78,5 @@ start();
 
 //拍照
 photograph.addEventListener("click", () => {
-  // if (!this.isOpenCamera) return alert("请开启摄像机权限")
-
-  let img = new Image();
-  img.src = "";
-  img.onload = function (ev) {
-    context1.drawImage(img, 0, 0);
-  }
-
-  context1.drawImage(video, 50, 50); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。
-  context1.drawImage(img, 50, 50);
+  context1.drawImage(video, 0, 0); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。
 })
@@ -11,21 +11,8 @@
 <head>
 
   <meta charset="utf-8">
-  <meta name="description" content="WebRTC code samples">
   <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
-  <meta itemprop="description" content="Client-side WebRTC code samples">
-  <meta itemprop="image" content="../../../images/webrtc-icon-192x192.png">
-  <meta itemprop="name" content="WebRTC code samples">
-  <meta name="mobile-web-app-capable" content="yes">
-  <meta id="theme-color" name="theme-color" content="#ffffff">
-
-  <base target="_blank">
-
-  <title>Select audio and video sources</title>
-
-  <link rel="icon" sizes="192x192" href="../../../images/webrtc-icon-192x192.png">
-  <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
-
+  <title>浏览器拍照</title>
 
   <style>
     .wrapper {
@@ -63,8 +50,7 @@
 </head>
 
 <body>
-  <div id="container">
-
+  <div class="wrapper">
     <div class="select">
       <label for="videoSource">切换摄像头: </label><select id="videoSource"></select>
     </div>
@@ -73,7 +59,7 @@
 
     <button title="拍照" id="photograph">拍照</button>
 
-    <canvas id="canvas" class="canvas" width="700" height="530"></canvas>
+    <canvas id="canvas" class="canvas"></canvas>
   </div>
 
   <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>