1
2
3
var video1 = document.getElementById("video");
video1.src = window.URL.createObjectURL(stream);
video1.play();

有时候，我们不想直接把video标签放在页面上，因为video标签不好控制和处理，而喜欢放置Canvas标签，html5中Canvas标签的灵活度是很高的。可以添加效果，做运算处理等。

我们可以采用canvas标签实时绘制捕捉到的video的每一帧图片，这样在合适的绘制帧率下，看到的效果和video的展示效果所差无几。
代码如下：

1
2
3
4
5
6
window.canvas1 = document.getElementById("canvas1");
var canvas_context1 = window.canvas1.getContext("2d");

window.timer_c = setInterval(function () {
canvas_context1.drawImage(video1, ws+20 , 0);
}, 1000/15);

这样我们就可以把上面的video标签隐藏，直接在界面上显示canvas。
需要说明，这种方法在手机浏览器上有问题。手机浏览器上chrome和opera的浏览器只会显示一桢的canvas图像，之后的不会刷新，目前不知为何。但是，video标签显示的比较流畅。所以，如果是开发手机应用，还是建议使用video标签，否者还是使用canvas标签。
用户如果想拍照，可以在页面上增加一个拍照按钮，增加点击事件，然后用canvas绘制此刻的图片即可，使用上面的代码只需要停掉定时器即可。

1
window.clearInterval(window.timer_c);

如果要将canvas的图片内容保存下来，可以使用：

1
var imgData = window.canvas1.toDataURL("image/png");

这个imgData直接复制到img标签的src属性即可使用。

时间有些晚了，明天还要上班，有点困，明天再写。-2014/8/4 23:15
今天看了一下，这一块涉及的内容还是比较多的。另开一篇专门详细介绍。
地址：

在不需要使用WebRTC的地方应该关闭WebRTC以释放资源。使用方法是：

1
2
3
4
5
6
7
8
9
navigator.getUserMedia(vc, function (stream) {
...
window.stream = stream;
...
}
...
if (window.stream)
window.stream.stop();
...

在获取stream的时候，将该视频或音频流保存起来，然后在不使用的时候，调用stop方法即可。

转载请注明出处：

有问题请留言。T_T 皓眸大前端开发学习 T_T