星期一, 7月 21, 2014

HTML截取攝影機畫面

來源:http://www.html5rocks.com/en/tutorials/getusermedia/intro/

if (navigator.getUserMedia) {

    if (typeof MediaStreamTrack != 'undefined' && typeof MediaStreamTrack.getSources != 'undefined'){//Chrome 選擇後攝影機
      MediaStreamTrack.getSources(function gotSources(sourceInfos){
          var option = document.createElement("option");
          var hasRearCamera = false;
          for (var i = 0; i != sourceInfos.length; ++i) {
            var sourceInfo = sourceInfos[i];
            if (sourceInfo.kind === 'video') {
                if (!hasRearCamera) {
                    option.value = sourceInfo.id;
                    option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
                };
                if( sourceInfo.facing === 'environment' ) {
                    hasRearCamera = true;
                    option.value = sourceInfo.id;
                    option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
                    navigator.getUserMedia({video: { optional: [{sourceId: option.value}] }}, successCallback, errorCallback);
                }
            }
          }
          if (!hasRearCamera) {
            navigator.getUserMedia({video: { optional: [{sourceId: option.value}] }}, successCallback, errorCallback);
          }
      });
    }else{
        navigator.getUserMedia({video: true}, successCallback, errorCallback);
    }
 
} else {
    sendError('Native web camera streaming (getUserMedia) not supported in this browser.');
}

沒有留言:

張貼留言