vue如何調(diào)用本地攝像頭出錯

代碼：
頁面布局：

 <div id='takePhoto' >
                <div id='support'></div>
                <div id='contentHolder'>
                    <video id='video' width='352' height='496' style='border:1px solid gray;float: left;' autoplay></video>
                    <div id='imageBox' class='imageBox1'>
                        <canvas id='canvas'></canvas>
                        <div class='thumbBox1'></div>
                    </div>
                    <div style="clear: both;width: 352px;text-align: center">
                        <el-button id='snap' class= 'my-button' @click="takePhoto">拍照</el-button>
                        <el-button id='snap2' style='display: none;' class='my-button' @click="retakePhoto">重新拍照</el-button>
                    </div>
                    <div id='cropped1' class='cropped1' style='display: none;'>

                    </div>
                </div>
            </div>

js代碼：

 created() {
            this.getVideo();
        },
            methods: {
               
                getVideo() {
                    var video = $('#video');
                    var videoObj = { 'video': true };
                    var errBack = function(error) {
                        console.log('Video capture error: ' + error.message, error.code);
                    };
                    var stre;
                    var mediaStream;
                    //  支持瀏覽器  谷歌,火狐,360,歐朋
                    // navigator.getUserMedia這個寫法在Opera中好像是navigator.getUserMedianow
                    if (navigator.getUserMedia) {
                        navigator.getUserMedia(videoObj, function(stream) {
                            video.src = stream;
                            stre = stream;
                            video.trigger('play');
                        }, errBack);
                    } else if (navigator.webkitGetUserMedia) {
                        navigator.webkitGetUserMedia(videoObj, function(stream) {
                            video.src = window.URL.createObjectURL(stream);
                            mediaStream = stream;
                            stre = stream;
                            video.trigger('play');
                        }, errBack);
                    } else if (navigator.mozGetUserMedia) {
                        navigator.mozGetUserMedia(videoObj, function(stream) {
                            video.src = window.URL.createObjectURL(stream);
                            mediaStream = stream;
                            stre = stream;
                            video.trigger('play');
                        }, errBack);
                    }
                },
                // 點擊拍照
                takePhoto() {
                    var img_src;
                    $('#video').hide();
                    $('#snap').hide();
                    $('#snap2').show();
                    $('#imageBox').show();
                    $('#action').show();
                    $('#cropped1').show();
                    var canvans = $('#canvas');
                    var video = $('#video');
                    var context = canvans.get(0).getContext('2d');

                    canvans.width(219);
                    canvans.height(413);
                    context.drawImage(video, 0, 0);

                    // 獲取瀏覽器頁面的畫布對象
                    // 以下開始編 數(shù)據(jù)
                    var imgData = document.getElementsByTagName('canvas')[0].toDataURL('image/jpg');
                    // 將圖像轉(zhuǎn)換為base64數(shù)據(jù)
                    var base64Data = imgData.split(',')[1];
                    $('#canvas').hide();
                    var options1 = {
                        thumbBox: '.thumbBox1',
                        spinner: '.spinner',
                        imgSrc: imgData
                    }
                },
                // 點擊重新拍照
                retakePhoto() {
                    this.getVideo();
                    $('#video').show();
                    $('#snap').show();
                    $('#snap2').hide();
                    $('#imageBox').hide();
                    $('#action').hide();
                    $('#cropped1').hide();
                }
            }

第一次報錯：
圖片描述
加了[0]
修改后：

問題：看不到攝像頭獲取的圖像。

回答

編輯回答

吢涼

你試下這個例子：
html:

<div>
    <video ref="video" width="320" height="320" autoplay></video>
    <input type="button" style="width:100px;height:35px;" value="拍 照" @click="takePhoto"/>
</di>
    <canvas style="" ref="canvas" width="320" height="320"></canvas>
</div>

主要的js:

getVideo(){
   this.$nextTick(() => {           
                    
        var video = this.$refs.video;  //這個對應(yīng)的是ref屬性
        var videoObj = { "video": true };

        navigator.mediaDevices.getUserMedia(videoObj)
        .then(function(mediaStream) { 
            video.srcObject = mediaStream;
            video.play();
            })
        .catch(function(error) {
            console.log(error);
        })

   })
},
takePhoto(){
    this.$nextTick(() => { 
        this.context = this.$refs.canvas.getContext("2d")
        this.context.drawImage(this.$refs.video, 0, 0, 330, 250);
    })
}

如果需要click事件還是用@click形式吧。。

2018年5月22日 06:02

編輯回答