请选择 进入手机版 | 继续访问电脑版

TQ官方网站

 找回密码
 立即注册
查看: 4405|回复: 0

如何在HTML5中使用摄像头或麦克风?

[复制链接]

4

主题

4

帖子

49

积分

新手上路

Rank: 1

积分
49
发表于 2016-1-14 00:05:40 | 显示全部楼层 |阅读模式
百度传课-沐风课堂
本帖最后由 flashalliance 于 2016-1-14 00:09 编辑

我们需要使用navigator.getUserMedia 方法,并在代码运行时开启摄像头或麦克风的使用权限。
navigator.getUserMedia的语法:
  1. navigator.getUserMedia ( constraints, successCallback, errorCallback );
复制代码
说明:当用户开启摄像头或麦克风的使用权限,successCallback函数会被调用,且接收一个LocalMediaStream 对象作为参数。
参数:
constraints(必须)successCallback中传入的LocalMediaStream对象所支持的媒体类型。
successCallback(必须):当应用中传递LocalMediaStream对象时触发的函数。
errorCallback(可选):当调用媒体设备失败时触发的函数。

示例:
1.      在html文档中创建一对<video>标签:
  1. <video id="webcam" autoplay></video>
复制代码
2.      添加js代码:
  1. navigator.getUserMedia = navigator.getUserMedia ||
  2.                          navigator.webkitGetUserMedia ||
  3.                          navigator.mozGetUserMedia;

  4. if (navigator.getUserMedia) {
  5.    navigator.getUserMedia({ audio: true, video: { width: 480, height: 360 } },
  6.       function(stream) {
  7.          var video = document.querySelector('video');
  8.          video.src = window.URL.createObjectURL(stream);
  9.          video.onloadedmetadata = function(e) {
  10.            video.play();
  11.          };
  12.       },
  13.       function(err) {
  14.          console.log("发生错误: " + err.name);
  15.       }
  16.    );
  17. } else {
  18.    console.log("警告:该浏览器不支持!");
  19. }
复制代码
3.ok!提示:需要浏览器支持,建议最新版本的Firefox,Chrome,Safari等。演示效果:http://www.tqtqtq.com/demo/html5camera/

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ:201205898 201205898|关于我们|友情链接|Archiver|手机版|小黑屋|RSS订阅|TQStudio ( 京ICP备12035064号 GitHub

GMT+8, 2018-7-19 07:55 , Processed in 0.093937 second(s), 23 queries .

Powered by Discuz! X3.2

© 2008-2028 tqtqtq.com

快速回复 返回顶部 返回列表