カメラをjavascriptで動作させる方法

Question

私はこの質問が十分に頼まれていることを知っていますが、自分のコードで何が間違っているのか分かりません。私はGoogle、ここ、そして私がまだ解決策を見つけていない他の多くの場所で探す。 私のHTMLコードは次のとおりです。

<button id="camera">Show the camera</button> 
<video id="video" class="hidden" preload="none" autoplay> 
    <source src="video.webM" type="video/webM"> 
</video> 

私のJavaScriptコードは次のとおりです。モバイルで

$("#camera").on("click",function(){ 

     var mediaConfig = { video: true }; 
     var video = $("#video")[0]; 

     // Normalize the various vendor prefixed versions of getUserMedia. 
     navigator.getMedia = ( navigator.getUserMedia || 
            navigator.webkitGetUserMedia || 
            navigator.mozGetUserMedia || 
            navigator.msGetUserMedia); 

     // Check that the browser supports getUserMedia. 
     // If it doesn't show an alert, otherwise continue. 
     if (navigator.getMedia) { 
      // Request the camera. 
      navigator.mediaDevices.getUserMedia(
      // Constraints 
      mediaConfig, 

      // Success Callback 
      function(localMediaStream) { 
       // Grab elements, create settings, etc. 
       video.removeClass("hidden"); 
       video.addClass("showVideo"); 
       console.log("Camera is activated"); 
       if (navigator.mozGetUserMedia) { 
        video.mozSrcObject = localMediaStream; 
       }else { 
        var vendorURL = window.URL || window.webkitURL; 
        video.src = vendorURL.createObjectURL(localMediaStream); 
       } 
       // Create an object URL for the video stream and use this 
       // to set the video source. 
       //video.src = window.URL.createObjectURL(localMediaStream); 
       video.play(); 
      }, 

      // Error Callback 
      function(err) { 
       // Log the error to the console. 
       console.log('The following error occurred when trying to use getUserMedia: ' + err); 
       video.removeClass("showVideo"); 
       video.addClass("hidden"); 
       alert("error"); 
      } 
     ); 

     } else { 
       video.removeClass("showVideo"); 
       video.addClass("hidden"); 
      alert('Sorry, your browser does not support getUserMedia'); 
     } 

、私は、ブラウザがカメラにアクセスするための私の許可を依頼することを得るが、私は受け入れたら、何も起こりません：エラーなし、ビデオなし、ストリーミングなし、何もありません。 また、忘れてしまいましたが、ウェブはSSLサーバーにありますので、問題はありません。誰も私を少し説明しますか？私は何をする他に何かわからない:( は、ビデオストリームの設定が正しくないあなたに

Answer 1

を持っている必要があります。新しいnavigator.mediaDevices.getUserMedia()を混乱しています古いnavigator.getUserMediaコールバックAPIを非推奨。

あり、古くなっベンダープレフィックス嫌なものの多くはここにもいない（例えばvideo.mozSrcObjectが、それ以上である）。

だけとの約束のAPI：あなたは古いブラウザをサポートして心配している場合は

navigator.mediaDevices.getUserMedia({video: true}) 
    .then(stream => video.srcObject = stream) 
    .catch(e => console.error(e)); 

、adapter.jsを使用しています。

Answer 2

をありがとうございます。あなたの成功コールバックでは、あなたが

video.srcObject = localMediaStream;