<body>
<canvas id="canvas" style="width: 400px; height: 160px" width="1920" height="1080"></canvas>
</body>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 调起摄像头并把图像实时展示在video上
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
const video = document.createElement('video');
video.srcObject = stream;
video.onloadedmetadata = () => {
video.play();
// 把video的图像实时展示在canvas上 使用requestAnimationFrame
function draw() {
ctx.drawImage(video, 0, 0, 1920, 1080);
requestAnimationFrame(draw);
}
draw();
};
});
</script>
把摄像头图像实时传输到canvas显示
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- WebRTC，名称源自网页实时通信（Web Real-Time Communication）的缩写，是一个...
- opencv读取的摄像头图像不需要写入硬盘，可以直接在内存中处理和传输，由于自己原来不知道，特意记录下来 压缩图像...
- 转载自: opencv 实现对摄像头输入图像中文件及证件等的实时跟踪，四边形检测及提取 本文转载内容，修改了一些运...
- 新接到一个实时获取摄像头当前照片的需求，在设定的时间内需要保持摄像头处在开启状态并可以实时回调到当前的图片数据信息...
