??????????????HTML5 video标签能做实时的视频监控吗？-CSDN社区

jinglier 2014-11-12

打赏
举报

引用 14 楼 journey191 的回复:

[quote=引用 11 楼 jinglier520 的回复:] [quote=引用 9 楼 l676331991 的回复:] [quote=引用 8 楼 jinglier520 的回复:] [quote=引用 5 楼 l676331991 的回复:]
var video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
	console.log("Video capture error: ", error.code); 
    };

// Put video listeners into place
if(navigator.getUserMedia) { // Standard
	navigator.getUserMedia(videoObj, function(stream) {
		video.src = stream;
		video.play();
	}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia(videoObj, function(stream){
		video.src = window.webkitURL.createObjectURL(stream);
		video.play();
	}, errBack);
}
这个是html调用摄像头的代码，从摄像头取到了数据流，是一个blob://GUUID类型的URL，然后设置给video的src属性，就可以显示摄像头的拍摄内容了。如果要录制并保存视频，那就要再找找方法了，我也不知道了。

你好，能问下，怎么样将这个stream保存成ogg/webm/mp4格式的视频文件呢?有方法吗？非常感谢！[/quote] 这个难办了。我记得在canvas里可以用drawImage方法，得到video元素在当前时刻的帧画面的像素数据，猜想可不可以每20毫秒取video里的当前帧图像，然后使用ogg或mp4的压缩算法自己编码出视频格式？恰好现在js操作二进制已经不是问题了。天哪，这个太难了。我感觉目前浏览器给JS的API已经足够完成打开摄像头录制视频文件的功能了，但是，是不是要像我说的那样自己逐帧取图像数据然后编码视频文件就不知道了。如果像我说的那样那太难了，还不如用插件去完成。[/quote] 不好意思，现在才看到。我现在算是实现是将video的stream以ogg/mp4/webm的格式保存到本地。只是现在还是没有声音录制的功能，所以是简单的图片播放而已。谢谢你的回答。[/quote] 通过每隔一定时间获取帧来实现获取视频没问题。请问楼主是如何实现将video的stream以ogg/mp4/webm的格式保存到本地？请指教！[/quote] 不是本地,是将stream传到服务器端，通过服务器端将它保存成mp4/ogg/webm的格式的。

shayebuhui0 2014-11-03

打赏
举报

录制的话，应该获取到流，然后解析，编码压缩成文件吧。

小权来了 2014-11-03

打赏
举报

引用 13 楼 zhu_weibing 的回复:

[quote=引用 5 楼 l676331991 的回复:]
var video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
	console.log("Video capture error: ", error.code); 
    };

// Put video listeners into place
if(navigator.getUserMedia) { // Standard
	navigator.getUserMedia(videoObj, function(stream) {
		video.src = stream;
		video.play();
	}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia(videoObj, function(stream){
		video.src = window.webkitURL.createObjectURL(stream);
		video.play();
	}, errBack);
}
这个是html调用摄像头的代码，从摄像头取到了数据流，是一个blob://GUUID类型的URL，然后设置给video的src属性，就可以显示摄像头的拍摄内容了。如果要录制并保存视频，那就要再找找方法了，我也不知道了。

这位大哥，能不能给一个完整的示例啊？跪求[/quote] http://blog.csdn.net/journey191/article/details/40744015

小权来了 2014-11-03

打赏
举报

引用 11 楼 jinglier520 的回复:

[quote=引用 9 楼 l676331991 的回复:] [quote=引用 8 楼 jinglier520 的回复:] [quote=引用 5 楼 l676331991 的回复:]
var video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
	console.log("Video capture error: ", error.code); 
    };

// Put video listeners into place
if(navigator.getUserMedia) { // Standard
	navigator.getUserMedia(videoObj, function(stream) {
		video.src = stream;
		video.play();
	}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia(videoObj, function(stream){
		video.src = window.webkitURL.createObjectURL(stream);
		video.play();
	}, errBack);
}
这个是html调用摄像头的代码，从摄像头取到了数据流，是一个blob://GUUID类型的URL，然后设置给video的src属性，就可以显示摄像头的拍摄内容了。如果要录制并保存视频，那就要再找找方法了，我也不知道了。

你好，能问下，怎么样将这个stream保存成ogg/webm/mp4格式的视频文件呢?有方法吗？非常感谢！[/quote] 这个难办了。我记得在canvas里可以用drawImage方法，得到video元素在当前时刻的帧画面的像素数据，猜想可不可以每20毫秒取video里的当前帧图像，然后使用ogg或mp4的压缩算法自己编码出视频格式？恰好现在js操作二进制已经不是问题了。天哪，这个太难了。我感觉目前浏览器给JS的API已经足够完成打开摄像头录制视频文件的功能了，但是，是不是要像我说的那样自己逐帧取图像数据然后编码视频文件就不知道了。如果像我说的那样那太难了，还不如用插件去完成。[/quote] 不好意思，现在才看到。我现在算是实现是将video的stream以ogg/mp4/webm的格式保存到本地。只是现在还是没有声音录制的功能，所以是简单的图片播放而已。谢谢你的回答。[/quote] 通过每隔一定时间获取帧来实现获取视频没问题。请问楼主是如何实现将video的stream以ogg/mp4/webm的格式保存到本地？请指教！

zhu_weibing 2014-05-28

打赏
举报

引用 5 楼 l676331991 的回复:

var video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
	console.log("Video capture error: ", error.code); 
    };

// Put video listeners into place
if(navigator.getUserMedia) { // Standard
	navigator.getUserMedia(videoObj, function(stream) {
		video.src = stream;
		video.play();
	}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia(videoObj, function(stream){
		video.src = window.webkitURL.createObjectURL(stream);
		video.play();
	}, errBack);
}
这个是html调用摄像头的代码，从摄像头取到了数据流，是一个blob://GUUID类型的URL，然后设置给video的src属性，就可以显示摄像头的拍摄内容了。如果要录制并保存视频，那就要再找找方法了，我也不知道了。

这位大哥，能不能给一个完整的示例啊？跪求

zhu_weibing 2014-05-28

打赏
举报

JavaScript code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 var video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code); }; // Put video listeners into place if(navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } 这个是html调用摄像头的代码，从摄像头取到了数据流，是一个blob://GUUID类型的URL，然后设置给video的src属性，就可以显示摄像头的拍摄内容了。如果要录制并保存视频，那就要再找找方法了，我也不知道了。这位大哥，能否给个完整的示例啊？

jinglier 2013-10-24

打赏
举报

引用 9 楼 l676331991 的回复:

[quote=引用 8 楼 jinglier520 的回复:] [quote=引用 5 楼 l676331991 的回复:]
var video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
	console.log("Video capture error: ", error.code); 
    };

// Put video listeners into place
if(navigator.getUserMedia) { // Standard
	navigator.getUserMedia(videoObj, function(stream) {
		video.src = stream;
		video.play();
	}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia(videoObj, function(stream){
		video.src = window.webkitURL.createObjectURL(stream);
		video.play();
	}, errBack);
}
这个是html调用摄像头的代码，从摄像头取到了数据流，是一个blob://GUUID类型的URL，然后设置给video的src属性，就可以显示摄像头的拍摄内容了。如果要录制并保存视频，那就要再找找方法了，我也不知道了。

你好，能问下，怎么样将这个stream保存成ogg/webm/mp4格式的视频文件呢?有方法吗？非常感谢！[/quote] 这个难办了。我记得在canvas里可以用drawImage方法，得到video元素在当前时刻的帧画面的像素数据，猜想可不可以每20毫秒取video里的当前帧图像，然后使用ogg或mp4的压缩算法自己编码出视频格式？恰好现在js操作二进制已经不是问题了。天哪，这个太难了。我感觉目前浏览器给JS的API已经足够完成打开摄像头录制视频文件的功能了，但是，是不是要像我说的那样自己逐帧取图像数据然后编码视频文件就不知道了。如果像我说的那样那太难了，还不如用插件去完成。[/quote] 不好意思，现在才看到。我现在算是实现是将video的stream以ogg/mp4/webm的格式保存到本地。只是现在还是没有声音录制的功能，所以是简单的图片播放而已。谢谢你的回答。

l676331991 2013-09-25

打赏
举报

引用 8 楼 jinglier520 的回复:

[quote=引用 5 楼 l676331991 的回复:]
var video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
	console.log("Video capture error: ", error.code); 
    };

// Put video listeners into place
if(navigator.getUserMedia) { // Standard
	navigator.getUserMedia(videoObj, function(stream) {
		video.src = stream;
		video.play();
	}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia(videoObj, function(stream){
		video.src = window.webkitURL.createObjectURL(stream);
		video.play();
	}, errBack);
}
这个是html调用摄像头的代码，从摄像头取到了数据流，是一个blob://GUUID类型的URL，然后设置给video的src属性，就可以显示摄像头的拍摄内容了。如果要录制并保存视频，那就要再找找方法了，我也不知道了。

你好，能问下，怎么样将这个stream保存成ogg/webm/mp4格式的视频文件呢?有方法吗？非常感谢！[/quote] 这个难办了。我记得在canvas里可以用drawImage方法，得到video元素在当前时刻的帧画面的像素数据，猜想可不可以每20毫秒取video里的当前帧图像，然后使用ogg或mp4的压缩算法自己编码出视频格式？恰好现在js操作二进制已经不是问题了。天哪，这个太难了。我感觉目前浏览器给JS的API已经足够完成打开摄像头录制视频文件的功能了，但是，是不是要像我说的那样自己逐帧取图像数据然后编码视频文件就不知道了。如果像我说的那样那太难了，还不如用插件去完成。

jinglier 2013-09-25

打赏
举报

引用 5 楼 l676331991 的回复:

var video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
	console.log("Video capture error: ", error.code); 
    };

// Put video listeners into place
if(navigator.getUserMedia) { // Standard
	navigator.getUserMedia(videoObj, function(stream) {
		video.src = stream;
		video.play();
	}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia(videoObj, function(stream){
		video.src = window.webkitURL.createObjectURL(stream);
		video.play();
	}, errBack);
}
这个是html调用摄像头的代码，从摄像头取到了数据流，是一个blob://GUUID类型的URL，然后设置给video的src属性，就可以显示摄像头的拍摄内容了。如果要录制并保存视频，那就要再找找方法了，我也不知道了。

你好，能问下，怎么样将这个stream保存成ogg/webm/mp4格式的视频文件呢?有方法吗？非常感谢！

JPF1024 2013-07-31

打赏
举报

试试用编程语言解决，会比较简单，比如C/C++试试.

去圣西罗-为尤文喝彩 2013-07-31

打赏
举报

html5 live streaming，用英文搜索，有些文章可供你参考。

l676331991 2013-07-31

打赏
举报


var video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
	console.log("Video capture error: ", error.code); 
    };

// Put video listeners into place
if(navigator.getUserMedia) { // Standard
	navigator.getUserMedia(videoObj, function(stream) {
		video.src = stream;
		video.play();
	}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia(videoObj, function(stream){
		video.src = window.webkitURL.createObjectURL(stream);
		video.play();
	}, errBack);
}

这个是html调用摄像头的代码，从摄像头取到了数据流，是一个blob://GUUID类型的URL，然后设置给video的src属性，就可以显示摄像头的拍摄内容了。如果要录制并保存视频，那就要再找找方法了，我也不知道了。