H5录制视频、音频(WebRTC)

zhichangterry 发布于2019-08-05 17:48 / 3224人阅读

摘要：使用可以做到在主流浏览器中获取用户摄像头数据，麦克风数据，我研究了一下，发现在安卓微信浏览器中都不行。而在安卓自带浏览器中可以，不支持，不支持，兼容性还是太差，所以还是弃用了。

使用Navigator.getUserMedia可以做到在主流浏览器中获取用户摄像头数据，麦克风数据，我研究了一下，发现在ios、安卓微信浏览器中都不行。而在安卓6.0.1自带浏览器中可以，iOS Safari不支持，mac Safari不支持，兼容性还是太差，所以还是弃用了。但是我研究的结果还是保存一下，万一以后微信浏览器支持了呢？

以下是我研究的结果：

关于这个api的参数说明：
MDN:https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia
W3C:http://w3c.github.io/mediacapture-main/#widl-NavigatorUserMedia-getUserMedia-void-MediaStreamConstraints-constraints-NavigatorUserMediaSuccessCallback-successCallback-NavigatorUserMediaErrorCallback-errorCallback

方法需要3个参数：

constraints,指明需要获取什么类型的数据

successCallback, 数据获取成功后回调的方法(只会被调用一次，但是如果把回调时的视频流放到video标签中，视频会实时更新)

errorCallback，接口调用失败后回调的方法

我主要想知道第一个参数里的情况，因为很多国内的教程里都只是这样：{video : true}，我还想知道如果要录音频、使用后置摄像头该怎么办。这个问题在https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Parameters 能找到答案，我复制一下。

constraints

如果单纯指定需要什么类型的媒体，只要这样就行{ audio: true, video: true }，这个表示需要视频和音频。应该也只支持这两种了，我看了MDN和W3c，都没发现第三种

以下把video参数写成object格式的，在chrome中都会报错Uncaught TypeError: Failed to execute "webkitGetUserMedia" on "Navigator": Malformed constraints object.，然而这些用法真的是MDN和W3C标准，不知道chrome为什么不支持。然而在chrome中有特殊的使用后置摄像头的方法，参考：http://blog.csdn.net/journey191/article/details/40744015，这个参考里的方法我测过，安卓6.0.1的确可以用后置摄像头。

如果要指定视频的宽高可以这样

{
  audio: true,
  video: { width: 1280, height: 720 }
}

还可以用min，max，或者 ideal (即如果支持，就用这个)

{
  audio: true,
  video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 776, ideal: 720, max: 1080 }
  }
}

如果要指定前后摄像头

{ audio: true, video: { facingMode: "user" } }//如果有前置摄像头的话使用前置摄像头（我身边的机器都有前置，所以没测试没有的情况）
{ audio: true, video: { facingMode: { exact: "environment" } } }//如果有后置摄像头的话使用后置

私有云专线服务 h5 webrtc 视频录制 js录制视频音频 webrtc录制音频 webrtc音频录制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/59963.html

【腾讯Bugly干货分享】H5 视频直播那些事

摘要：每周都会举行嘉宾分享，话题讨论等活动。本期，我们邀请了腾讯前端开发工程师吕鸣，为大家分享视频直播那些事。更多关于延迟的问题可以参考苹果官方地址但是直播视频却有一些不可替代的优势传播性好，利于分享等操作。本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://dev.qq.com/topic/57a42... Dev Club 是一个交流移动开发技术，结交朋...

enali 2019-08-05 10:01 评论0 收藏0
【腾讯Bugly干货分享】H5 视频直播那些事

摘要：每周都会举行嘉宾分享，话题讨论等活动。本期，我们邀请了腾讯前端开发工程师吕鸣，为大家分享视频直播那些事。更多关于延迟的问题可以参考苹果官方地址但是直播视频却有一些不可替代的优势传播性好，利于分享等操作。本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://dev.qq.com/topic/57a42... Dev Club 是一个交流移动开发技术，结交朋...

Paul_King 2019-07-16 16:15 评论0 收藏0
【腾讯bugly干货分享】HTML 5 视频直播一站式扫盲

摘要：对于视频播放，可以使用协议播放直播流，和都天然支持这种协议，配置简单，直接使用标签即可。什么是简称是开发的一套视频直播协议，现在属于。本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277 视频直播这么火，再不学就 out 了。为了紧跟潮流，本文将向大家...

cgspine 2019-08-02 18:50 评论0 收藏0
【腾讯Bugly干货分享】从0到1打造直播 App

摘要：流媒体服务器端用来接受视频录制端提供的视频源，同时提供给视频播放端流服务。支持该协议即，是由苹果提出基于的流媒体传输协议。更多配置可以参考下面是的配置文件腾讯云直播后台主要是调用腾讯云。本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://dev.qq.com/topic/5811d... 作者：李智文概要分享内容：互联网内容载体变迁历程，文字——...

Ku_Andrew 2019-07-16 16:15 评论0 收藏0
红点王宇航：以实时连接场景为目标的一些技术架构探索

摘要：文红点联合创始人王宇航我今天分享的主题，是以实时连接场景为目标的一些技术架构探索。主要是关于红点在产品研发过程中，我们的技术选择，架构变化，还有这个过程中，我们的一些考虑。红点的第一个版本红点的第一个版本功能比较简单。 showImg(https://segmentfault.com/img/bVrBAw); 文 | 红点联合创始人王宇航我今天分享的主题，是以实时连接场景为目标的一...

voyagelab 2019-07-25 13:35 评论0 收藏0