思路
通過監聽video的play事件，不斷的獲取最新的video視頻幀數據，然后將最新的視頻幀通過drawImage繪制到canvas中。同樣的思路，可以通過navigator.getUserMedia獲取攝像頭數據，然后通過canvas繪制出來，或者通過websocket/webrtc等方法傳輸給服務器或者其它客戶端就可以實現視頻聊天。
代碼
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>video play in canvas</title> <style> #video { width: 600px; height: 400px; } </style> </head> <body> <div> <video id="video" src="movie.mp4" controls></video> <br/> <button id="play-button">play</button> <button id="pause-button">pause</button>
<br/> <canvas id="canvas" width="600" height="400"></canvas> </div> <script> var video = document.getElementById('video'); var playButton = document.getElementById('play-button'); var pauseButton = document.getElementById('pause-button'); var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); playButton.onclick = function () { video.play(); }; pauseButton.onclick = function () { video.pause(); }; video.addEventListener('play', playCallBack); function playCallBack() { if(video.paused || video.ended) { return; } captureFrame(); setTimeout(playCallBack, 0); } function captureFrame() { context.drawImage(video, 0, 0, 600, 400); } </script> </body> </html>
效果如下：
