<html>
 <head>
     <script>
         window.onerror = function(msg,url,line) {
           console.log("error msg:" + msg);
           console.log("error url:" + url);
           console.log("line:" + line);        
         }
         vertoHandler = new Object();
     </script>
 </head>
 <body>
     <canvas id="uCanvas" width="200" height="200" style="border: 1px solid red;"></canvas>
     <video id="testVideo" width="200" height="200"  Webkit-playsinline="true" playsinline="true" autoplay="autoplay" muted="muted"></video>    <input type="text" name="" id="textIp">
    <button οnclick="start()">播放</button>
    <button οnclick="vertoHandler.hangup()">hangup</button>
    
     <script>
       
       let textIp = document.getElementById('textIp');
       let testVideo = document.getElementById('testVideo');
       function start() {
           getUserMedia11({audio:false,video:true},success,error); 
       }        function getUserMedia11(constrains,success,error){
             if(navigator.mediaDevices.getUserMedia){
                 //最新标准API
                 navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
             } else if (navigator.webkitGetUserMedia){
                 //webkit内核浏览器
                 navigator.webkitGetUserMedia(constrains).then(success).catch(error);
             } else if (navigator.mozGetUserMedia){
                 //Firefox浏览器
                 navagator.mozGetUserMedia(constrains).then(success).catch(error);
             } else if (navigator.getUserMedia){
                 //旧版API
                 navigator.getUserMedia(constrains).then(success).catch(error);
             }
      }     //成功的回调函数
     async function success(stream){
         textIp.value = '001'
         console.log(stream)
         textIp.value = '获取stream'
        // testVideo.srcObject = stream
         //testVideo.play()
         console.log('success')
         textIp.value = 'success'        let frame_counter = 0;
        const track = stream.getVideoTracks()[0];
         textIp.value = 'track'
         const media_processor = new MediaStreamTrackProcessor(track);
         // videoTrackReader = new VideoTrackReader(track)
         textIp.value = 'media_processor'
         const reader = media_processor.readable.getReader();
         var uc = document.getElementById("uCanvas");
         textIp.value = 'success while'
         console.log('success while')
         while (true) {
             const result = await reader.read();
             if (result.done) {
                 alert("break");
                 break;
             }
             let frame = result.value;
             uc.getContext('2d').drawImage(frame, 0, 0, uc.width, uc.height);
             frame.close();
             textIp.value = 'success end'
         }
     }      
     function error() {
         textIp.value = '333'    }
     </script>
 </body>
 </html>