WebRTC常用API如何使用以及详细配置

473 阅读1分钟

获取设备流

navigator.mediaDevices.getUserMedia(constraints)

constraints参数为一个对象返回值为一个promise:Stream

video:Boolean | Object 
auido:Boolean | Object 
constraints = { video audio }   // videoaudio 表示的是视频与音频

简单配置

video = true | false 
audio = true | false

详细配置

video = {
    frameRate: Number | Object
    deviceId: Null | String
    width: Number | Object
    height: Number | Object    
    facingMode:String
}
audio = {
    deviceId: Null | String
    sampleRate: Number
    sampleSize: Number
    volume: Number
    echoCancellation: Boolean
    autoGainControl: Boolean
    noiseSuppression: Boolean
    latency: Number
    channelCount: Number | Object
}
  • deviceId: 指定设备ID。
  • width,height:分辨率
  • facingMode: ‘user’ , ‘environment’ 代表前后置。
  • sampleRate:指定采样率。
  • sampleSize:每个采样点大小的位数
  • volume:从0(静音)到1(最大)取值
  • echoCancellation:是否使用回声消除来尝试去除通过麦克风回传到扬声器的音频
  • autoGainControl:是否要修改麦克风的输入音量
  • noiseSuppression:是否尝试去除音频信号中的背景噪声
  • latency:以秒为单位,控制开始处理声音和下一步可以使用数据之间的时间,不是很确定为什么要设更高的延迟,但是音频编解码器的延时确实有所不同。
  • channelCount:规定了单声道的时候为1,立体声的时候为2。

获取设备列表

navigator.mediaDevices.enumerateDevices()

返回值为一个promise:Array 包括所有设备信息:音频输入音频输出视频输入

  • deviceId: 设备ID
  • groupId: 组ID
  • kind: 设备类型(audioinput,audiooutput,videoinput)
  • label: 设备名称
  • groupId:id相同则表示属于同一个设备上的音频或视频

获取窗口流

navigator.mediaDevices.getDisPlayMedia(constraints)

constraints参数为一个对象返回值为一个promise:Stream

简单配置

video = true | false 
audio = true | false

详细配置

video = {
    frameRate: Number | Object
    width: Number | Object
    height: Number | Object
}

electron获取屏幕流方式

navigator.mediaDevices.getUserMedia({
	audio: false,
	video: {
		mandatory: {
			chromeMediaSource: 'desktop',
			chromeMediaSourceId: source.id
		}
	}
}).then(stream => {
	console.log(stream)
})