html5调用本机摄像头兼容谷歌浏览器高版本,谷歌浏览器低版本,火狐浏览器
时间： 12:55:35
&&&& 阅读：231
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&做这个功能的时候在网上查了一些资料，代码如下，在这个代码在谷歌浏览器46版本是没问题的，在火狐浏览器也行，但是在谷歌浏览器高版本下是不兼容的
&div id="body"&
&section class="featured"&
&div class="content-wrapper"&
&hgroup class="title"&
&h1&Welcome to webcam&/h1&
&h2&兼容谷歌浏览器46版本，48版本，谷歌浏览器高版本，火狐浏览器&/h2&
&/section&
&section class="content-wrapper main-content clear-fix"&
html5在本机调用摄像头是没问题，但是部署到外网服务器，谷歌浏览器高版本需要将http要改成&br /&
https在IIS7.5配置教程：/bobliu/archive//2590694.
&ol class="round"&
&li class="one"&
&video id="video" width="320" height="240" autoplay&&/video&
&input type="button" value="拍照按钮" id="snap" /&
&li class="two"&
&canvas id="canvas" width="320" height="240"&&/canvas&
&/section&
&script type="text/javascript"&
var canvas =
document.getElementById("canvas");
var context = canvas.getContext("2d");
var video = document.getElementById("video");
$(document).ready(function () {
videoObj = { video: true };
var errBack = function (error) {
console.log("Video capture error: ", error.code);
if (navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
else if (navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function (stream) {
video.mozSrcObject =
video.play();
}, errBack);
$("#snap").on("click", function () {
context.drawImage(video, 0, 0, 640, 480);
谷歌浏览器高版本要兼容以上代码，必须要将项目部署成https&
https与IIS7.5部署教程可以见这么同学的博客：/bobliu/archive//2590694.
自己做了一个测试demo
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！登录以解锁更多InfoQ新功能
获取更新并接收通知
给您喜爱的内容点赞
关注您喜爱的编辑与同行
966,690 十月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
Firefox 37原生支持HTML5视频回放功能
Firefox 37原生支持HTML5视频回放功能
James Chesters
1&他的粉丝
0&他的粉丝
日. 估计阅读时间:
：Facebook、Snapchat、Tumblr等背后的核心技术
Author Contacted
语言 & 开发
64 他的粉丝
0 他的粉丝
10 他的粉丝
0 他的粉丝
11 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
JavaScript
32 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
相关厂商内容
相关赞助商
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
找回密码....
InfoQ账号使用的E-mail
关注你最喜爱的话题和作者
快速浏览网站内你所感兴趣话题的精选内容。
内容自由定制
选择想要阅读的主题和喜爱的作者定制自己的新闻源。
设置通知机制以获取内容更新对您而言是否重要
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。摘要 : HTML5ify是一款可以把Chrome浏览器中的普通flash、播放器转变成目前热门的HTML5播放器。
用户在使用Chrome浏览器观看视频的时候大部分情况下使用的是富媒体播放器如flash、silverlight等，这些富媒体播放器虽然降低了用户浏览器的版本要求（比如一些比较老旧的浏览器只支持这些播放器来观看视频），但是对于多数现代化的浏览器来说就显得过时了，目前W3C协会已经发布了HTML标准的第5个版本，即HTML5。 在新版的HTML5标准中，网页的元素将会有直接支持流媒体播放的功能，而不需要像flash或者silverlight那样的扩展形式来支持观看视频的需求，但是一个标准的实施毕竟是一件浩大的工程，也不是一朝一夕能够改变的，目前大多数视频播放器仍然以flash等插件为主，但是随着科技的潮流发展这些终将被HTML5所取代（苹果已经决定在自己的手机中禁止flash等富媒体播放器的运行），因为这些播放器不仅占用较多的计算机资源，还会给用户的浏览器使用安全带来一些隐患（细心的小伙伴可能经常会看到一些安全软件发布这些播放器的漏洞补丁）。 HTML5作为新一代流媒体播放器的实现，其功能不仅强大而且相当灵活，网站设计者可以利用这些现代化的播放元素设计出更加符合用户要求，更加人性化的网页来满足人们更多的需求。 今天给大家介绍的这款插件HTML5ify就是可以把一些网站中的普通播放器如：flash播放器等转换成HTML5的播放器，如果用户需要使用更多个性化的操作，可能你必须要这么做，比如如果用户需要使用一款个性化的声音调节插件：，用户就需要在不支持HTML5播放器或网站中的视频仍然使用flash、silverlight等播放器的时候使用HTML5ify插件把它们转换成标准的HTML5插件。同时这款HTML5ify插件的盛行也会带动一个新标准的健康发展，使得用户的操作体验变得越来越好。
Chrome把普通flash播放器转变成HTML5播放器插件：HTML5ify下载地址
转载必须注明来自：
相关Chrome插件推荐：
Chrome插件猜你喜欢
11-06 21:12
11-05 22:48
11-05 21:47
10-15 20:21其他回答(2)
浏览器兼容问题？
园豆：5358
其实360浏览以前是网站库查，现在是自主在网站上加代码 /read-16623.html
&&&您需要以后才能回答，未注册用户请先。如何使用HTML5嵌入视频
靠谱的软件下载站
当前位置: &///
如何使用HTML5嵌入视频
如何使用 HTML5 语法在 Web 页面中嵌入视频呢？非常简单：
就是这些！这就是向网站添加视频播放器所需的全部工作，无需任何第三方插件或嵌入其他网站的代码，只要一个简单的标记即可。
实际情况可没有这么简单。
HTML5 的复杂性与语法无关，而是源自浏览器支持和视频编码。Web 开发人员习惯了纠结于浏览器的兼容性，但浏览器制造商在编解码器标准方面的分歧更让人头疼。为了构建一个成功的 HTML5 网站，您需要考虑 Chrome 4、Firefox 4 和 Internet Explorer 之类的现代浏览器如何实现 HTML5 视频 Web 标准，以及如何处理用户在旧版浏览器中查看视频的情况。
限制和好处
首先，要设定期望值，您应该知道播放视频时
HTML5 规范中目前还没有包括全屏播放。目前只有几个浏览器（不是全部）支持全屏播放。
默认的播放器菜单都是非常基础的，而在品牌认知的皮肤或复杂的观感上可能花了很多开发精力。除此之外，不同的浏览器仍以不同的方式实现 HTML5 和 CSS。例如，添加圆角时，您的视频播放器在
中看起来可能是圆角，但在
和 Safari 中还是方的。
规范不允许平滑或自适应流，而这是一个正规视频播放网站的基本功能。
更重要的是，规范并不（而且显然不会）包括数字版权管理 (DRM)。这意味着永远不会通过 HTML5 传递受版权保护的内容（至少版权持有人不会）。
当然还有编解码器的问题。稍后将提供此主题的更多信息。
您放弃这些东西后得到了什么？实际上，得到的不多。
首先，不专注于视频的网站其开发人员可以更加容易地实现网站流媒体，而无需通过第三方视频网站，如YouTube 或 Vimeo 等。以前，开发人员直接嵌入视频有三种主要的选择：
嵌入必须完整下载后才能播放的非流媒体文件
购买第三方插件（这不一定适用于所有浏览器）
使用专用的媒体服务器，这是一个非常昂贵且/或对于大部分网站而言太过复杂的解决方案
HTML5 允许开发人员在无需其他第三方软件支持的可更换皮肤播放器中实现流媒体，从而缓解了这些问题。
第二，HTML5 规范允许开发人员为已有定论的平台提供视频，如iOS 产品（iPhone、iPad）。但看待这个问题的方式有点不同，它使开发人员从限制或控制如何交付媒体的专有交付平台中解放出来。毕竟，这是开放标准的目的所在。
最后，HTML5 不是外来的技术，它是HTML 的最新修订版。这意味着 JavaScript 和 CSS 能够与它很好地协作。与现有的 HTML 源代码一样，开发人员可以在客户端或服务器端操作这些代码。
视频编解码器
前文已经提到，HTML5 视频最大的挑战是在多个编码解码器中准备和纳入您的内容。目前，每个浏览器有其自己的首选视频格式。非无缝实现的 HTML5 视频将会变得更糟。
现在视频编码有三种选择：
H.264 & 一种可以利用硬件加速的流行格式，由桌面和设备的图形芯片提供支持；也是市场上许多较新的视频和移动设备的默认录制格式；但是，该格式是有专利的，虽然对非商业用途仍然免费，但它很复杂，也比较昂贵。请参考了解更详细信息。何时进行商业内容分发。支持：IE 9、Safari 3.1 和 Chrome（目前）
Ogg Theora & 一个开放标准，没有专利问题，是免费的。支持：Firefox 3.5、Chrome 4、Opera 10.5。
VP8 (WebM) & 一个较新的标准，最近被 Google 收购，并作为一个开源发布，免费（但仍有专利）的格式。支持：Firefox 4.0、Chrome 6.0、Opera 10.6。
下图可让您更容易了解此内容：
Chrome 值得特别一提，因为 Google 实际将删除对三种 HTML5 视频格式之一的支持。收购 On2（WebM 格式的开发商和赞助商）后，Google 宣布以后的 Chrome 的版本将不再支持 H.264。他们已经根据 BSD 许可证发布了 WebM，授予全球用户免费、非独占的、免版税的专利许可。虽然 Chrome 是目前唯一支持所有三种格式的浏览器，但市场将会很快分成两个 OS 默认的浏览器阵营，只支持 H.264 的 和 Safari，以及支持除 H.264 外其他标准的所有其他浏览器。
严重警告：为了简化此处的讨论，本说明不深入探讨三种基本格式之间的差异。一旦涉及视频和音频配置文件的不同可能性，以及视频和音频容器和编解码器之间的区别，事情会变得更加复杂。例如，虽然 iPhone 4 用 H.264 格式录制视频，但不能将该视频直接放到 HTML5 网站；必须先通过转换器运行它。
最好能有一个无所不包的公告，说明视频标准X 是普遍支持的，应该作为HTML5 视频的首选格式。不幸的是，正如您从上文看到的，情况并非如此。如果您包括用户驱动的浏览器扩展，那么支持最广泛的格式就是 Ogg Theora。但是，你不能假定用户，特别是公司工作场所中的用户，只是为了观看 HTML5 视频就拥有安装其他视频编解码器或浏览器扩展的知识或能力。如果出于某种原因，您必须选择某一个视频编解码器，应该选择哪一个？这不一定。考虑以下选择：
在这三个标准中，H.264 最具人气，质量可靠，受到了媒体专业人士的认可。它还受到一些业内最大公司的支持，包括Microsoft 和苹果，具有MPEG LA 的授权。因此也有个最主要的问题：H.264 不是免费的。
对于消费者来说，它当然是免费的。大部分开发人员都不用担心授权问题（）。但是，视频分发网站就不一定了。H.264 专利授权的来龙去脉超出了本文的范围（），只要说大家有很多问题就够了。
对于大多数开发人员，专利问题将很大程度上归结于和图像质量之间的哲学争论。与 Ogg（参见下文）和VP8 () 相比，H.264 提供了更高的图像质量和更好的媒体流。由于包括 PC 和移动设备等多种平台上都具有硬件加速功能，它还具备性能优势。
最后，考虑易生产性，这不是一个无关紧要的问题。所有主要的视频编辑器，包括 Final Cut、Adobe Premiere 和 Avid，都导出为 H.264 格式。Ogg Theora 或 VP8 则不行。如果您的商店生产自己的视频，并且数量众多，那么仅使用 H.264 将节省很多工作。
Ogg Theora
Ogg 是唯一一个真正没有专利负担的标准。但是，也可以说是的标准，虽然相差其实不多。与H.264 的多次发现，H.264 仍占上风。虽然 Ogg 可将内容编码为更紧凑的文件，但它产生的图像品质比 H.264 的要低，并且在媒体流能力上会更差。
VP8 (WebM)
在高质量但存在专利问题 (H.264) 和质量较差但免费 (Ogg) 这两个极端之间，VP8 占有一席之地，它可能三个标准中最具争议的一个。到目前为止，测试表明 H.264 提供的视频品质比
略高，但这种差异在大多数商业活动中可以忽略不计。
更大的问题在于开放标准。一方认为，Google 远离了 H.264 转而支持其&开放&，甚至在 Creative Commons 许可证下发布了 WebM。另一方面，有很多人争论说，在这种情况下，&开放&。以 JPEG 诉讼为例，，即使 WebM 不会出现 Google 引起的专利问题，如果没有 Google 明确的用户免责申明，许多公司和个人部署 WebM 视频时，都有可能让自己面临 MPEG LA 的专利侵权诉讼。
总之，在大多数情况下，没有一种办法能满足所有情况下所有项目的需要。但对于大多数情况下的大多数项目，您可能都希望使用 H.264。它不仅仅是生产和消费端使用最广泛的格式，而且由于硬件加速而具有明显的性能优势。对于商业的视频网站，为了开拓新市场，可能必须咬紧牙关支付庞大的许可费。
但是，这场辩论往往由于一个主要因素而无果而终：现在或在不久的将来，所有浏览器是否都支持 HTML5。但是，并非所有浏览器都支持所有编解码器。就像您不会编写在 IE 中看起来不错，但在 Firefox 中一团糟的样式表一样，您希望创建跨平台兼容的视频标签。
视频转换器
对于开发人员，这意味着在实际情况下需要将视频内容至少编码为两种视频格式（最好是三个）才能符合 HTML5 规范的要求。幸运的是，有几个工具随时可以帮助您完成此任务。
：您的主要工具，此开放源代码转换器有 Mac 和 Windows 版本，可以将几乎所有视频源转换为所有可能要使用的 HTML5 格式，以及几个其他设备和平台特定的格式。
：另一种用于 Mac 和 Windows（和 Linux）的开放源代码转换器，Handbrake 是专门转换为 H.264 的出色工具。
：MPEG Streamclip 虽然是不开放源代码，但Mac 和 Windows 用户可以免费使用。它也处理 lH.264，同时它也可以转换为 HTML5 规范之外的许多其他有用格式。
：一种专业工具，Firefogg 是一个 Firefox 扩展，只能将视频转换为 Ogg 的格式，并因此得名。要使用它，需要先下载 Firefox，然后再安装扩展。
您应该会记得，HTML5 在嵌入视频时本质上归结为使用一个标记：。但正如其他 HTML 标记一样，有很多参数选项。以下是标记本身中的一些要点：
src：视频源的位置和名称，它的工作原理与
标记的 src 参数相同。但是要注意，在这里不是识别视频源，您可以并且也应该在标记外部识别（参见下文）。
width和height：（可选）视频的尺寸。更准确地说，这是视频帧宽度和高度，而不是视频本身。与
相似，省去此选项将导致浏览器使用视频源的默认尺寸。但是与
不同的是，使用与源不同的大小将缩放视频，而不是扭曲它。换句话说，嵌入的视频将保留其源的比率。如果您指定的大小小于源，整个视频将会缩小。但是，如果您指定的大小大于源，视频将以其原始大小显示，所指定尺寸的其余部分将使用空白区域填充。
controls：添加默认视频控件覆盖。如果您不想创建自己的自定义控件，这是非常有用的。但是，如果想深入研究自定义播放器控件，可以使用 JavaScript 和 CSS。该规范允许操作 play ()、pause()、currentTime、volume、muted 等方法和属性。
preload：只要用户点击页面就开始下载视频。要指示预加载视频，只需包括该属性。要指示其不预加载，将该属性设置为等于"none"。
autoplay：流氓参数。该参数指示浏览器加载页面时就播放视频。不要使用它。
接下来是见证奇迹的时刻。HTML5 规范包括一个方便的古怪功能，可以弥补当前围绕视频格式所发生的浏览器功能障碍。不使用 src 属性指定视频源，您可以在 标记中嵌套多个标记，每个都有不同的视频源。浏览器将自动浏览列表并选择第一个能够播放的视频。例如：
如果在 Chrome 中测试该代码，将获得 H.264 视频。但是在 Firefox 中运行它，会在相同的地方看到 Ogg 视频。
理想情况下，虽然不是所有浏览器都绝对需要，您应该在 type 参数中包括 MIME 类型，确保与所有的浏览器兼容。此参数应指定视频类型，以及视频和音频编解码器。参数的细节取决于视频的编码方式。在这里可以找到很多可能的方案：。
有关正在使用的所有三种视频类型的示例，请访问。
在此页面上，您会看到三个不同视频的源代码：H.264、Ogg 和 WebPM。视频本身标有它们的编解码器，以便您查看浏览器中显示的内容。
关于 MIME 类型的一个小窍门：您的服务器需要配置为可识别各种类型。对于 Windows Server，这意味着将不同的 MIME 类型项添加到 IIS。对于 Apache 服务器，您需要将 添加到 httpd.conf 或本地 .htaccess 文件中：
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
虽然完整的多源
标记可在多个 HTML5 就绪的浏览器上工作，但它仍然没有解决旧的、HTML5 之前的浏览器问题。幸运的是，该规范包括一个向下兼容机制。
将目前正在使用的任何 标记，或者将使用的 HTML5 之前的标记，添加到
参数列表的底部。通常情况下，此对象将指定您使用的播放器（假定是第三方插件），以及该播放器的参数和源。下例使用流行的免费第三方播放器 Flowplayer。
这篇精彩文章更详细地解释了这一点：Kroc Camen &"。您还可以从这里查找包含所有三种视频格式和 flash 对象的代码生成器：Jonathan Neal 的 &&。
查看以下内容，了解HTML5 视频的更多信息，包括特定编解码器的复杂性：
& 如何快速地在您的网站上浏览高清视频
& 有关一般的 HTML5 和视频学习的重要资源
&比较不同视频编解码器（包括浏览器插件）的网站
& 关于 Ogg Theora 的更多内容，包括音频和视频编解码器、播放器和转换器
& 一篇有趣的报道，关于相互竞争的编解码器标准和浏览器制造商的观点