Node-Webkit合作HTML5完成摄影功用-Html5-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝33
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:301回复:0

  Node-Webkit合作HTML5完成摄影功用

楼主#
更多 发布于:2016-06-04 16:05

因工作因素,最近在运用Node-Webkit做一个桌面高拍仪(摄像头)运用。这个运用自身也仅仅一个测验性的东西,不太具有参考价值,就不在这儿供给下载了。

运用的知识点:

navigator.getUserMedia

MediaStreamTrack.getSources

Node.JS有关

触及到的一些不常见却有必要的办法或特点

getUserMedia

getUserMedia是window

宿主下 navigator

目标的办法,因为直到现在html5的多媒体有关的规范还没有终究断定,所以仍是用下文中列出的兼容办法,而在我的这个运用场景中,因为只在webkit下路,所以事实上,只需要

navigator.webkitGetUserMedia

即可。

javascript:

Default

navigator.getUserMedia = (

navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia

);

完好的调用句子:

JavaScript:

Default

navigator.getUserMedia({video: true,audio:false},

function (stream) {

//在这儿操作stream目标,通常是用createObjectURL把stream生成URL目标输出给video元素的src特点

//videoDom.src=window.webkitURL.createObjectURL(stream);

}, function (error) {

console.log(error);

});

网上有很多教程为 getUserMedia

的第一个参数赋值是

video

,而不是

{video: true}

。这是因为之前说的规范还没有断定,这个接口前期即是这么界说的,而以后发现它不满足,就从头界说了。

为何说之前界说一个

video

是不行的?

getUserMedia

,顾名思意是 获取用户的多媒体

,所以除了视频,还有音频,所以接口要成为相似

{video: true,audio:false}

,能够设定音视频的获取开关。

假如仅仅知道这儿,那么很仔细的通知你,你现在的知识还不满足运用!

你会发现video元素烘托的画面质量很差,不论你运用多好的摄像头设备!当遇到这个疑问时,我简直抛弃了Node-Webkit+H5计划,计划

直接调directshow的vfw接口。但就在我翻开vs2012,计划开操c++时分,不甘的心情让我决议做一个测验,直接看一下chrome的有关

源码,我不相信他们会傻x成这么.

所以让我看到了这么一段代码:

media_stream_video_source.cc

CPP:

Default

#include "base/logging.h"

#include

"base/strings/string_number_conversions.h"

#include

"content/renderer/media/media_stream_dependency_factory.h"

#include

"content/renderer/media/media_stream_video_track.h"

#include

"content/renderer/media/webrtc/webrtc_video_capturer_adapter.h"

namespace content {

// Constraint keys. Specified by

draft-alvestrand-constraints-resolution-00b

const char

MediaStreamVideoSource::kMinAspectRatio[] = "minAspectRatio";

const char

MediaStreamVideoSource::kMaxAspectRatio[] = "maxAspectRatio";

const char MediaStreamVideoSource::kMaxWidth[] =

"maxWidth";

const char MediaStreamVideoSource::kMinWidth[] =

"minWidth";

const char MediaStreamVideoSource::kMaxHeight[] =

"maxHeight";

const char MediaStreamVideoSource::kMinHeight[] =

"minHeight";

const char MediaStreamVideoSource::kMaxFrameRate[]

= "maxFrameRate";

const char MediaStreamVideoSource::kMinFrameRate[]

= "minFrameRate"

const char* kSupportedConstraints[] = {

MediaStreamVideoSource::kMaxAspectRatio,

MediaStreamVideoSource::kMinAspectRatio,

MediaStreamVideoSource::kMaxWidth,

MediaStreamVideoSource::kMinWidth,

MediaStreamVideoSource::kMaxHeight,

MediaStreamVideoSource::kMinHeight,

MediaStreamVideoSource::kMaxFrameRate,

MediaStreamVideoSource::kMinFrameRate

};

const int MediaStreamVideoSource::kDefaultWidth =

640;

const int MediaStreamVideoSource::kDefaultHeight =

480;

const int

MediaStreamVideoSource::kDefaultFrameRate = 30;

namespace {

// Constraints keys for

http://dev.w3.org/2011/webrtc/editor/getusermedia.html

const char kSourceId[] = "sourceId";

// Google-specific key prefix. Constraints with

this prefix are ignored if they

// are unknown.

const char kGooglePrefix[] = "goog";

看到这段代码后我的困惑不见了,

kDefaultWidth

kDefaultHeight

是组成了默许的视频分辩率,假如没有格外设定的话,这种质量最多也就相当于咱们平时所说的480p。

在这段代码里还有几个格外的特点 minAspectRatio

(最小宽比)、 maxAspectRatio

(最大宽高比)、 maxFrameRate

(最大每秒帧数)、 minFrameRate

(最小每秒帧数),好像咱们所能想到的都现已界说了。

而上文说到的

kDefaultWidth

kDefaultHeight

并不是webkit暴露给JavaScript的接口,需要用到maxHeight,minHeight,maxWidth,minHeight,只需在这儿设定的合理的值(4:3或16:9,我运用的是1280*720,也即是常说的720p),就能够改动输出的画质

最终的代码如下:

JavaScript:

Default

navigator.getUserMedia({

video: {mandatory: { minAspectRatio: 1.40,

maxAspectRatio: 1.78, minFrameRate: 15, maxFrameRate: 25, minWidth: 1280,

minHeight: 720}

}

}, function (stream) {

//xxxx

}, function (error) {

console.log(error);

});

也许有的同学会问到,为何你不直接输出1080p的作用出来?

答案是:我试过了从30到1000的摄像头不等,发现1280 720和1920

1080,诚心没有看出区别,生成的文件大小,也是相同的,所以极有也许最高只到720p

在这儿还要阐明的是FrameRate也是不收效的,AspectRatio是收效的,但设定的最大最小值一定要能取1.333333(4:3)及

1.777777777(16:9)这两个值其间一个。因为video元素输出时,会认得这两个宽高比,假如核算得不出这两个比值,那你会看到一片乌黑!

MediaStreamTrack.getSources

H5同时还供给MediaStreamTrack目标,用以盯梢多媒体的输出源。

MediaStreamTrack.getSources办法需要一个回调函数,并向该回调函数传入本机器一切的(音,视频)多媒体源。

接上文的需要,假如咱们的机器上有两部(以上)的摄像设备,如何人工挑选咱们的视(音)频源设备?代码如下:

JavaScript:

Default

var exArray=[];

MediaStreamTrack.getSources(function (sourceInfos)

{console.log("sourceInfos:%o", sourceInfos);for (var i = 0; i !=

sourceInfos.length; ++i) { var sourceInfo = sourceInfos;

//这儿会遍历audio,video,所以要加以区别 if (sourceInfo.kind ===

'video') { exArray.push(sourceInfo.label); }}

});

navigator.getUserMedia({video: { mandatory: {

minAspectRatio: 1.40, maxAspectRatio: 1.78, minFrameRate: 15, maxFrameRate: 25,

minWidth: 1280, minHeight: 720 }, optional: [ { sourceId: exArray[0] } ]}

}, function (stream) {

//xxxx

}, function (error) {console.log(error);

});

video目标的还供给了一个optional特点来处理多媒体源的挑选,MediaStreamTrack.getSources的回调中咱们能够得到每个多媒体源的“象征”,咱们只需把这个象征输给sourceId即可。

最终要说的

Node-Webkit后MediaStreamTrack.getSources会传入一些无效的视频源信息到回调函数里,需要人工过滤一下,在chrome里没有发现这个疑问。

Node-Webkit取摄像头,有时会走到error里,不给权限,现在在chrome里,没有发现

Node-Webkit要走的路还很远!

[via@ simon4545

]

优质IT资源分享社区为你提供此文。

本站有大量优质html5 css js等web前端开发教程视频,资料等资源,包含html5 css js 前端开发框架等基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

WEB前端开发教程视频

优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客