返回栏目
首页 • 谷雨课堂 • 正文

【谷雨课堂】云物联与人工智能 No.15 在H5调用摄像头并获取视频

发布时间:  浏览: 次  作者:谷雨

知识点：

H5调用摄像头

获取每帧图像

 

本课内容：

大家好，欢迎来到谷雨课堂，

前面各节的课程，

我们了解了很多、很杂的知识，

那么将现实中的数据导入到现有系统中，

是非常必要的，

其中视频数据，

可能是重中之重，

 

那么本节我们就用H5，

也就是网页，

来实现获取摄像头的视频，

 

本节的程序不需要引用其它任何库或代码，

使用Chrome或Edge本身，

就可以实现这些功能，

 

首先，

我们要判断一下浏览器是不是支持

  •  
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

 

然后可以就可以愉快的打开摄像头了

  •  
  •  
  •  
  •  
  •  
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {   //这里的mediaStream就是视频流了
});

 

然后，

我们在页面里放一个video标签

  •  
<video id="video"  width="640" height="480"  controls autoplay>

 

最后，把video的视频源设置一下就可以了

  •  
  •  
  •  
  •  
  •  
  •  
var video = document.querySelector('video');//  赋值 video 并开始播放    video.srcObject = mediaStream;    video.onloadedmetadata = function(e) {        video.play();    };

 

到现在为止，

已经可以进行视频的实时预览了

 

下一步，

如何获取视频的每帧的图片呢

我们只需要创建一个canvas标签

  •  
<canvas id="canvas" style="width:320px;height:240px;"></canvas>

 

这个标签非常重要，

无论是Unity还是Three.js在最后，

其实使用的都是canvas，

也是H5的标准之一

 

到此，

我们已经可以获取到视频的某帧图像了，

下一步如果需要与后台交互，

我们可以用一条语句把图像转为base64的表现形式

  •  
const imgsrc = canvas.toDataURL('image/png')

就是这句了

 

话不多说，

以下是全部代码，

存成HTML直接就可以运行了

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
<html><head><title></title><meta charset="utf-8"><script type="text/javascript">//谷雨课堂//No.15 在H5调用摄像头并获取视频的每帧图像
//  判断浏览器, 获得用户设备的兼容方法navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;var constraints = { audio: false, video: { width: 1280, height: 720 } };
//调用摄像头navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {    _mediaStream = mediaStream;console.log("# 初始化 摄像头");// 成功后获取视频流：mediaStreamvar video = document.querySelector('video');//  赋值 video 并开始播放    video.srcObject = mediaStream;    video.onloadedmetadata = function(e) {        video.play();    };});
function handleClip () {const video = document.querySelector('video')const canvas = document.getElementById('canvas')    canvas.height = video.clientHeight    canvas.width = video.clientWidthconsole.log(video.videoHeight, video.videoWidth)const ctx = canvas.getContext('2d')    ctx.drawImage(video, 0, 0, 640, 480)
const imgsrc = canvas.toDataURL('image/png')document.querySelector('img').src = imgsrc
document.getElementById('div1').innerHTML=imgsrc;}</script></head>
<body><h2>No.15 在H5调用摄像头并获取视频的每帧图像</h2><button onclick="handleClip()">截图</button><hr><video id="video"  width="640" height="480"  controls autoplay>       您的浏览器不支持 video 标签。</video><canvas id="canvas" style="width:320px;height:240px;"></canvas><img src="" alt="" srcset="" style="width:320px;height:240px;"><div id="div1" style="width:500px;height:500px;word-wrap: break-word;"></div></body>
</html>

 

 

完整的源代码可以登录【华纳网】下载。

 

https://www.worldwarner.com/






 





免责声明：本文仅代表作者个人观点，与华纳网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

    相关文章Related

    返回栏目>>

    华纳网 版权所有