这张我们来动手做做程序，并且具体讲解下代码实现。
我们在上一篇中有说到用getUserMedia获取一个数据流，可是并没有说到如何去绑定到页面节点，并显示出来。我们获取的getUserMedia是没法直接放在标签之中的 需要通过window.URL对象的 createObjectURL()方法去转换这个MediaStream为一个 Blob URL(描述），然后把这个Blob URL设置为video 的src 属性的值即可。 不过有一点要强调下 如果video标签的autoplay属性没有设置的话，你看到的video对象只是一张图片。
来，我们手把手写个实例。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video autoplay id="showview"></video>
<script src="getUserMediaTest.js"></script>
</body>
</html>HTML骨架非常简单，基本除了基本的html框架之外 只加了
<video autoplay id="showview"></video>
<script src="getUserMediaTest.js"></script>这两句。引入了一个js 和添加了一个video.值得注意的是 我这里的video用了autoplay属性，有兴趣的朋友可以去试试没有 autoplay是个什么情况。
然后我们来看看getUserMediaTest.js如何去写的
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var constraints = {audio: false, video: true};
var video = document.querySelector('#showview');
function successCallback(stream) {
window.stream = stream; // stream available to console
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream;
}
}
function errorCallback(error){
console.log('navigator.getUserMedia error: ', error);
}
navigator.getUserMedia(constraints, successCallback, errorCallback);
代码分为几个部分
首先是getUserMedia对象的规范化，因为可能涉及到不同浏览器访问，所以我们做了个兼容性定义让各类标准的getUserMedia规范化为getUserMedia();
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;接下来的代码 我们完成了3个定义，一个约束对象，一个成功回调，一个失败回调。
//流约束
var constraints = {audio: false, video: true};
var video = document.querySelector('#showview');
//成功回调
function successCallback(stream) {
window.stream = stream; // stream available to console
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream;
}
}
//失败回调
function errorCallback(error){
console.log('navigator.getUserMedia error: ', error);
}在这个简单的实例中，我们的约束没有启用audio流，只使用了video流。这个约束中可以包含很多的信息，比如流分辨率，质量等等。在接下来的文章中我们会详细介绍。
在成功回调中我们获取返回的流对象 stream，并且判断 URL对象的支持情况，如果支持就用它将流对象转换为Blob对象，如果没有的话直接绑定到video标签的src属性上。
失败就是简单的报错了，这个都很好理解。
第三部就是调用getUserMedia方法，开启摄像头
navigator.getUserMedia(constraints, successCallback, errorCallback);
我们看看效果
在点击允许是用摄像头后 我们成功的在页面中看到了我们想要的效果。
在这一篇里我们实现了最简单的视频程序，用简单的实例演示了基本的实现流程，下一篇里我们会详细说明约束对象的相关内容和返回的数据流的另外一种有意思的用法。
扫一扫
1700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
