js调用电脑摄像头

更新日期: 2018-04-19阅读: 4.6k标签: 摄像

js如何调用电脑的摄像头?使用js写了一个调用摄像头的demo,并用canvas显示保存。这个功能很实用,比如上传用户的头像,即时拍照及时上传。  

html:

<video width="200px" height="150px"></video>
  <canvas width="200px" height="150px"></canvas>
  <p>
      <button id="start">打开摄像头</button>
      <button id="snap">截取图像</button>
      <button id="close">关闭摄像头</button>
  </p>


JavaScript:

window.onload = function () {
           var canvas = document.getElementsByTagName('canvas')[0],
               context = canvas.getContext('2d'),
               video = document.getElementsByTagName("video")[0],
               snap = document.getElementById("snap"),
               close = document.getElementById("close"),
               start = document.getElementById("start"),
               MediaStreamTrack;
           start.addEventListener('click', function () {
               if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                   navigator.mediaDevices.getUserMedia({
                       video: true,
                       audio: true
                   }).then(function (stream) {
                       console.log(stream);
                       MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
                       video.src=(window.URL).createObjectURL(stream);
                       video.play();
                   }).catch(function(err){
                       console.log(err);
                   });
               }else if(navigator.getMedia){
                   navigator.getMedia({
                       video: true
                   }).then(function (stream) {
                       console.log(stream);
                       MediaStreamTrack=stream.getTracks()[1];
                       video.src=(window.webkitURL).createObjectURL(stream);
                       video.play();
                   }).catch(function(err){
                       console.log(err);
                   });
               }
           });
           snap.addEventListener('click', function () {
               context.drawImage(video, 0, 0,200,150);
           });
           close.addEventListener('click', function () {
               MediaStreamTrack && MediaStreamTrack.stop();
           });
 }


总结:上面这个Demo主要用到浏览器的摄像头组件,然后再将图片源赋给canvas。其中遇到一个坑:代码需要托管到服务器端,即在客户端访问才能调用浏览器成功。这种禁止本地调用的做法可能是出于浏览器的安全性和用户的隐私考虑。来源:https://www.cnblogs.com/jiangcheng-langzi/archive/2018/04/18/8391497.html


链接: https://www.fly63.com/article/detial/672

H5调用手机的相机/摄像/录音等功能 _input:file的capture属性说明

H5使用input标签调用系统默许相机,摄像,录音功能。使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能

JavaScript 使用 mediaDevices API 选择摄像头

聊天应用你很可能会想调用前置摄像头,拍照软件那么你会更倾向于使用后置摄像头。在这篇文章中我们将探讨如何通过 mediaDevices API 和 media constraints (媒体约束) 选择或者切换摄像头

getUserMedia API及HTML5 调用摄像头和麦克风

HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。

html5调用摄像头截图

关于html5调用音视频等多媒体硬件的API已经很成熟,不过一直找不到机会把这些硬件转化为实际的应用场景,不过近年来随着iot和AI的浪潮,我觉得软硬结合的时机已经成熟。那我们就提前熟悉下怎么操作这些多媒体硬件吧

H5实现调用摄像头_进行拍照、摄像、录音等功能

h5调用摄像头进行拍照,目前主要有2种方式,一种是常规的利用form表单的type=file,另一种则是通过html5的getUserMedia API的方式,基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等设备

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!