需要帮助以HTMLMediaElement.srcObject替换url.createobjecturl

Question

我看过一些类似的问题，但是我无法在那里使用答案。不久前，我抓取了一个简单的脚本来从网络摄像头拍照：

// Webcam Recorder from PurpleSquirrel
var video = document.querySelector("#videoElement");
var localstream;
var realuri;

// check for getUserMedia support
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

function startVideo(){ 
	if (navigator.getUserMedia) {      
		// get webcam feed if available
		navigator.getUserMedia({video: true}, handleVideo, videoError);
	}
}
 
function handleVideo(stream){
    // if found attach feed to video element
    video.src = window.URL.createObjectURL(stream);
	localstream = stream;
}

function stopVideo(){
	localstream.stop();
	localstream.pause();
	localstream.src = "";
}

function videoError(e) {
    // no webcam found - do something
}
var v,canvas,context,w,h;
var imgtag = document.getElementById('imgtag'); // get reference to img tag
var sel = document.getElementById('file'); // get reference to file select input element

document.addEventListener('DOMContentLoaded', function(){
    // when DOM loaded, get canvas 2D context and store width and height of element
    v = document.getElementById('videoElement');
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    w = canvas.width;
    h = canvas.height;

},false);

function draw(v,c,w,h) {

    if(v.paused || v.ended) return false; // if no video, exit here

    context.drawImage(v,0,0,w,h); // draw video feed to canvas
   
   var uri = canvas.toDataURL("image/jpeg"); // convert canvas to data URI
   
   // console.log(uri); // uncomment line to log URI for testing
   
   imgtag.src = uri; // add URI to IMG tag src
   realuri = uri;
}

document.getElementById('save').addEventListener('click',function(e){

    draw(v,context,w,h); // when save button is clicked, draw video feed to canvas
    $('#file').hide();   
});

// for iOS

// create file reader
var fr;

sel.addEventListener('change',function(e){
    var f = sel.files[0]; // get selected file (camera capture)
   
    fr = new FileReader();
    fr.onload = receivedData; // add onload event

    fr.readAsDataURL(f); // get captured image as data URI
});

function receivedData() {          
    // readAsDataURL is finished - add URI to IMG tag src
    imgtag.src = fr.result;
}

// Send Image URI to upload.php for processing
// webcam Function
function webcam(){		
	$.blockUI({ message: '<h1><img src="images/busy.gif" />&nbsp;Please Wait...</h1>' }); 

	var form = new FormData(document.getElementById('WebcamForm'));

    //append files
	var file = document.getElementById('file').files[0];
	
    if (file || realuri){   
        var modalname='#Webcam';
		$(modalname).modal('toggle');

        form.append('file', file);
		form.append('web-image',realuri);
		$.ajax({
			type: "POST",
			url: "idcard/upload.php",
			data: form,
			cache: false,
			contentType: false, //must, tell jQuery not to process the data
			processData: false,
			success: function(result){
				if(result.search("ERROR") != -1){
					$.unblockUI();
					$(modalname).modal('toggle');
					$('#file').val('');
					alert(result);
				}
				else{
					alert(result);
					window.location.reload();
				}
			}
		});
	}
	else {
		$.unblockUI();
		alert('ERROR: No Image uploaded to send. Please take a picture or upload a JPEG image.');
	}
return false;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<button class="btn btn-success" type="button" data-toggle="modal" onclick="startVideo();" data-target="#Webcam">Take Picture</button>
<!-- START WEBCAM -->
<!-- Webcam Modal -->
<div class="modal fade" id="Webcam" tabindex="-1" role="dialog" aria-labelledby="Webcam" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" onclick="stopVideo()" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="Webcam">ID Photo Taker</h4>
      </div>
      <div class="modal-body">
        <!-- For devices that support getUserMedia and have a webcam we can display the feed in a video element -->
        <div style="margin-bottom:10px;" class="visible-lg visible-md center-block" id="videocontainer">
            <video class="center-block" autoplay id="videoElement"></video>
        </div>
        <div class="form-group">
            <button class="visible-md visible-lg btn btn-danger btn-block" type="button" id="save">Take Picture</button>
        </div>
        <!-- Selected image will be draw to a canvas -->
        <div style="margin-bottom:10px;">
            <canvas class="visible-lg visible-md" id="canvas" width="500" height="375"></canvas>
            <img style="display:none" id="imgtag" src="" width="500" height="375" alt="capture" />
        </div>
        <!-- Used to capture frame from webcam video feed -->
        <form id="WebcamForm" name="WebcamForm" enctype="multipart/form-data">
            <input class="btn btn-warning btn-block" name="file" id="file" type="file" accept="image/*" capture="camera"/>    
            <input name="Id" id="Id" value="<?php echo $ContactId;?>" type="hidden" />
            <div class="form-group">                
                <label>&nbsp;</label>
                <button id="Class" class="btn btn-primary btn-block" type="button" onclick="webcam();">Save Picture</button>
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" onclick="stopVideo();" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- End Webcam Modal -->
<!-- END WEBCAM -->

这不是完整的代码，而是此处的相关内容。因此，对于JavaScript，我不确定如何用HTMLMediaElement.srcObject的新格式替换url.createobjecturl。

第二，现有代码在FireFox上不起作用（在Chrome上可用）。我不确定这是因为这个还是另一个问题。任何帮助是极大的赞赏。谢谢。