Sử dụng getUserMedia với ion chỉ nhận được màn hình màu đen

Question

Im thử nghiệm tính năng một số phương tiện truyền thông với ion và im mắc kẹt khi cố gắng thiết lập các đầu ra máy ảnh vào thẻ video bằng getUserMedia sử dụng mã này:

navigator.getUserMedia = navigator.getUserMedia || 
        navigator.webkitGetUserMedia || 
        navigator.mozGetUserMedia; 

if (navigator.getUserMedia) { 
    navigator.getUserMedia({ audio: false, video: { width: 500, height: 500 } }, 
     function(stream) { 
     console.log("Im streaming!!", stream); 
     var video = document.querySelector('video'); 
     console.log("video element", video); 
     video.src = window.URL.createObjectURL(stream); 
     video.onloadedmetadata = function(e) { 
      console.log("stream start"); 
      video.play(); 
     }; 
     }, 
     function(err) { 
     console.log("The following error occurred: " + err.name); 
     } 
    ); 
} else { 
    console.log("getUserMedia not supported"); 
} 

đây là html:

<ion-pane> 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">Ionic Blank Starter</h1> 
     </ion-header-bar> 
     <ion-content> 
     <video id="video" autoplay="autoplay" width="500" height="500"></video> 
     </ion-content> 
    </ion-pane> 

tôi thực sự chỉ có thể có màn hình đen. Là phương pháp tiếp cận của tôi phải hoặc im thiếu một cái gì đó?

Answer 1

Các giải pháp cuối cùng cho vấn đề này là getUserMedia đòi hỏi một tấm séc cho phép thời gian chạy để công việc. Để đạt được điều đó, tôi đã sử dụng plugin this. Sau đó, điều này làm việc như một nét duyên dáng:

cordova.plugins.diagnostic.requestRuntimePermission(function(status){ 
    if(cordova.plugins.diagnostic.runtimePermissionStatus.GRANTED){ 
     navigator.getUserMedia({video: true, audio: false}, function(localMediaStream) { 
     var video = document.querySelector('video'); 
     video.src = window.URL.createObjectURL(localMediaStream); 

     video.onloadedmetadata = function(e) { 
      console.log('Stream is on!!', e); 
     }; 
     }, errorCallback); 
    } 

}); 

Answer 2

Tôi đã cố gắng tái tạo sự cố và giải quyết sự cố bằng cách sử dụng các tùy chọn constraints. Sử dụng constraints bạn có thể đặt sourceId cho phép bạn chọn giữa máy ảnh trước hoặc sau. Hãy chắc chắn rằng thiết bị của bạn không có camera phía trước và tôi đoán đây là lý do tại sao bạn nhận được màn hình màu đen.

Đầu tiên chúng ta tạo ra các lựa chọn khó khăn của chúng tôi:

var constraints = {}; 

MediaStreamTrack.getSources (function(sources) { 
    sources.forEach(function(info) { 
     if (info.facing == "environment") { 
      constraints = { 
       video: { 
       optional: [{sourceId: info.id}] 
       } 
      }; 
     } 
    }) 
}) 

Sau đó, chúng ta gọi là navigator.getUserMedia:

navigator.getUserMedia = navigator.getUserMedia || 
    navigator.webkitGetUserMedia || 
    navigator.mozGetUserMedia; 

if (navigator.getUserMedia) { 
    navigator.getUserMedia(constraints, 
     function(stream) { 
     console.log("Im streaming!!", stream); 
     var video = document.querySelector('video'); 
     console.log("video element", video); 
     video.src = window.URL.createObjectURL(stream); 
     video.onloadedmetadata = function(e) { 
      console.log("stream start"); 
      video.play(); 
     }; 
     }, 
     function(err) { 
     console.log("The following error occurred: " + err.name); 
     } 
    ); 
} else { 
    console.log("getUserMedia not supported"); 
} 

Cảnh báo: MediaStreamTrack.getSources trả về một lời hứa do đó có nghĩa rằng nếu bạn cố gắng chạy navigator.getUserMedia của bạn mã cùng một lúc, nó sẽ thất bại. Bạn sẽ phải bọc nó trong một hàm và chạy nó như một cuộc gọi lại.

Thông tin thêm về máy ảnh và lựa chọn nguồn âm thanh có thể được tìm thấy ở đây: https://developers.google.com/web/updates/2015/10/media-devices

cũng là một ví dụ tốt đẹp ở đây: https://simpl.info/getusermedia/sources/