创建媒体对象

navigator.getUserMedia详情介绍点击下面链接

MediaDevices.getUserMedia() - Web API 接口 | MDN

//创建媒体对象开启摄像头

if (navigator.getUserMedia) {   旧版本方法

    alert('请调整好摄像头');

            navigator.getUserMedia({

                video:true,

                audio:false

            },function(strem){

摄像头成功回调。

              /*  console.log(strem); */

             mediaStreamTrack = stream.getTracks()[0];

                video.src = vendorUrl.createObjectURL(strem);

                video.play();

            },function(error){

                //error.code

    摄像头失败回调。

  alert('摄像头是否正确安装');

            });   

        }

        else {

            alert('浏览器不支持摄像头');

        }

//新版本方法

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

        navigator.mediaDevices.getUserMedia({

            video: true,

            audio: true        }).then(function(stream) {

            console.log(stream);

            mediaStreamTrack =typeofstream.stop === 'function' ? stream : stream.getTracks()[1];

            video.src = (window.URL || window.webkitURL).createObjectURL(stream);

            video.play();

        }).catch(function(err) {

            console.log(err);

        })

    }

与旧版类似，不过该方法返回了一个Promise对象，可以使用then和catch表示成功与失败的回调

更多参照文档

点击拍照

snap.addEventListener('click', function(){

        //绘制canvas图形

        canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);

        //把canvas图像转为img图片

        /* img.src = canvas.toDataURL("image/png"); */

      /*  alert(canvas.toDataURL("image/png")); */

    });

//删除相机

close.addEventListener('click',function() {

        mediaStreamTrack && mediaStreamTrack.stop();

    }, false);

var video = document.getElementById('video'),

canvas = document.getElementById('canvas'),

snap = document.getElementById('savePhotoId'),

img = document.getElementById('img'),

close = document.getElementById('close'),

mediaStreamTrack;

本文由职坐标整理发布，关注职坐标，学习更多的一手H5开发知识！