??????????????HTML5 video标签能做实时的视频监控吗?

yipingshui2011 2012-06-27 11:14:17
小妹知道,HTML5 video能播放静态的视频文件。就是不清楚,HTML5 video标签能用来做实时的视频监控吗?
能否提供点这方面的资料给小妹参考参考?
谢谢各位大哥、大姐了。
...全文
3318 17 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
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++试试.
  • 打赏
  • 举报
回复
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属性,就可以显示摄像头的拍摄内容了。 如果要录制并保存视频,那就要再找找方法了,我也不知道了。
马老虎 2013-07-30
  • 打赏
  • 举报
回复
是可以的。


老虎传送门
惜海 2013-07-30
  • 打赏
  • 举报
回复
引用 2 楼 duu007 的回复:
目前做不了,不支持直播视频流。
真的假的?
duu007 2012-08-07
  • 打赏
  • 举报
回复
目前做不了,不支持直播视频流。
yipingshui2011 2012-06-27
  • 打赏
  • 举报
回复
怎么没人知道啊

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧