Question

我有一个video元素，显示通过navigator.getUserMedia（或相关）投放的相机来源。如何确定用于显示视频源的编解码器？我需要此信息才能正确使用MediaSource.isTypeSupported()。

以下是我正在修补的整页资料。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Display Webcam Stream &#38; Capture Image</title>
<script type="application/javascript">
//<![CDATA[
window.onload = function(event)
{
 if (navigator.getUserMedia) {console.log('1, navigator.getUserMedia');navigator.getUserMedia({video: true}, handleVideo, videoError);}
 else if (navigator.mozGetUserMedia) {console.log('2, navigator.mozGetUserMedia');navigator.mozGetUserMedia({video: true}, handleVideo, videoError);}
 else if (navigator.webkitGetUserMedia) {console.log('3, navigator.webkitGetUserMedia');navigator.webkitGetUserMedia({video: true}, handleVideo, videoError);}
 else if (navigator.msGetUserMedia) {console.log('4, navigator.msGetUserMedia');navigator.msGetUserMedia({video: true}, handleVideo, videoError);}
 else if (navigator.oGetUserMedia) {console.log('5, navigator.oGetUserMedia');navigator.oGetUserMedia({video: true}, handleVideo, videoError);}
 else {alert('Error: browser not supported?\n\n'+MediaDevices.getUserMedia());}
}


function handleVideo(stream)
{
 document.querySelector('#video_example').src = window.URL.createObjectURL(stream);
}

function videoError(e) {
    // do something
}

function capture_image()
{
 var video  = document.querySelector('#video_example');
 var canvas = document.createElement('canvas');
 canvas.width  = video.videoWidth;
 canvas.height = video.videoHeight;
 var ctx = canvas.getContext('2d');
 ctx.drawImage(video, 0, 0);
 document.getElementsByTagName('body')[0].appendChild(canvas);
}
//]]>
</script>  
<style>
#container {height: 768px; margin: 0px auto; width: 1024px;}
#video_example {height: 768px; width: 1024px;}
</style>
</head>

<body>

<div id="container">
<video autoplay="true" id="video_example"></video>
<input onclick="capture_image();" type="button" value="Capture Image" />
</div>

</body>
</html>

Mozilla的开发者网络（MDN）似乎没有提出任何喜欢的内容？

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

确定摄像机源+ navigator.getUserMedia的媒体类型/ mime

0 个答案: