1

HTML5 でネイティブ カメラにアクセスして Web アプリケーションの画像をキャプチャしようとしていますが、ラップトップでは正常に動作していましたが、モバイル デバイスでは動作していません。

Android Gingerbread の Opera 12.0 でテストしています。ブラウザは、カメラを許可するかどうかを尋ねてきます。しかし、許可した後、ビデオタグには何も表示されません。私のコードは次のとおりです。

HTML:

 <video autoplay id="vid" style="" width="200" height="150"></video>
 <canvas id="canvas" width="640" height="480" style="display:none;""></canvas><br>
 <input type="button" value="Take Picture" onclick="snapshot()"/>

JavaScript:

    var video = document.querySelector("video");
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;

    var onCameraFail = function (e) {
        console.log('Camera did not work.', e);
    };

    function snapshot() {

        if (localMediaStream) {
            ctx.drawImage(video, 0, 0);
        }
        var strDataURI = canvas.toDataURL("image/png");

        $('#canvas_image').src = strDataURI;
$.ajax({type: 'POST',url: "<?php echo base_url().'my_profile/save_image' ?>",data: {strDataURI:strDataURI },
                         success: function(resultData) {
                             location.reload();
                         }
                    });}

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia({video:true}, function (stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
    }, onCameraFail);
4

1 に答える 1

0

私はしばらく Opera Mobile 12 を使用して同様の作業を行ってきましたが、最近、正常に動作していたコードでこの問題が発生していることに気付きました。私の場合、Opera Mobile 12.10 では失敗します。以前に (メモリから) blob スタイルの URL を返した場所window.URL.createObjectURL(stream)を返しているようです。about:streamurl

すべてのお客様をChrome Betaに移行したため、ついでに気付きました。ベータ版であるにもかかわらず、Opera よりもはるかに安定している (そしてパフォーマンスが高い) ことがわかりました。唯一の問題は、ウェブカメラから取得するビデオのサイズが Opera とわずかに異なることですが、それは問題ありません。

これはあなたの質問に直接答えるものではありませんが、可能であれば、Opera で苦労するのではなく、Chrome Beta (および GetUserMedia のサポートを取得したら Chrome Stable) に移行することをお勧めします。

于 2013-09-29T14:30:57.807 に答える