WebRTC音视频数据采集 六、第一节 WebRTC音视频数据采集

今天我来看一下音视频采集的API,这个和我们上次所说的enumerateDevices是很类似的

// 基本格式
var promise = navigator.mediaDevices.getUserMedia(constraints);

它也是返回一个Promise,调用的方式也很类似,这个方法里面有个重要的参数;这个constraints是怎么定义的,我们下面看一下

MediaStreamConstraints

dictionary MediaStreamConstraints {
        (boolean or MediaTrackConstraints) video  = false;
        (boolean or MediaTrackConstraints) audio  = false;
}

它就是一个MediaStreamConstraints类型,这个类型比较特别,在这个类型里面有两个元素,一个是video一个是audio,也就是说分别对video和audio做一些限制,也就是说它既可以是布尔类型也可以是MediaTrackConstraints复杂媒体类型,

如果他是布尔型的话 ,video和audio都是true的话,说明既有视频数据又有音频数据 ,如果我只要其中的一项,只要音频,那就是audio等于true,video等于false,非常的简单。

另一方面你把他当作MediaStreamConstraints这种复杂类型的话,也就是说你可以设置一些具体的控制了,比如说对于视频你可以设置它的分辨率,比如给他设置成640*480,然后是 720P或者1080P等这些都可以设置。你还可以设置它的帧率,比如15帧或者25帧、30帧。同样的对于音频来说,你也可以设置音频相关的,比如音频的延迟性是多少,音量的大小,是单声道还是 双声道等等都可以进行控制,具体的设置我们后续会详细的介绍。

今天我们来看看如何通过这个API采集到音频和视频数据。

创建一个mediastream文件夹,获取第一个流,这个流和轨的概念在之前已经介绍过了,在一个流中是可以包含许多条轨的,每一条轨也就是一种媒体数据,比如音频、视频,可以是多路音频多路视频组成一个stream,  首先我们建立一个index.html

<html>
  <head>
    <title>捕获音视频数据 WebRTC capture video and audio</title>
  </head>
  <body>
    <!-- 
      我们创建一个video标签,这个标签就可以显示我们捕获的音视频数据 
      autoplay 表示当我们拿到视频源的时候直接播放
      playsinlin  表示在浏览器页面中播放而不是调用第三方工具
     -->
    <video autoplay playsinlin id="player"></video>
    <script src="./js/client.js"></script>
  </body>
</html>

我们引入client.js来调用API,通过这个API来通过webrtc核心层去捕获音视频数据,最终输送 给video播放处理,这样就实现了我们的一个实例。

client.js

'use strict'

// 获取video标签
var videoplay = document.querySelector('video#player');

// 获取到流做什么, 在gotMediaStream方面里面我们要传人一个参数,也就是流,
// 这个流里面实际上包含了音频轨和视频轨,因为我们通过constraints设置了要采集视频和音频
// 我们直接吧这个流赋值给HTML中赋值的video标签
function gotMediaStream(stream){  
	videoplay.srcObject = stream; // 指定数据源来自stream,这样视频标签采集到这个数据之后就可以将视频和音频播放出来
}

function handleError(err){
	console.log('getUserMedia error:', err);
}

// 判断浏览器是否支持
if(!navigator.mediaDevices ||
  !navigator.mediaDevices.getUserMedia){
  console.log('getUserMedia is not supported!');
}else{
  var constraints = { // 表示同时采集视频金和音频
    video : true,
    audio : false 
  }
  navigator.mediaDevices.getUserMedia(constraints)
    .then(gotMediaStream)
    .catch(handleError);
}

server.js

'use strict'

var http = require('http');
var https = require('https');
var fs = require('fs');

var serveIndex = require('serve-index');

var express = require('express');
var app = express();

//顺序不能换
app.use(serveIndex('./public'));
app.use(express.static('./public'));

var options = {
	key  : fs.readFileSync('./cert/1557605_www.learningrtc.cn.key'),
	cert : fs.readFileSync('./cert/1557605_www.learningrtc.cn.pem') 
}

var https_server = https.createServer(options, app);
https_server.listen(443, '0.0.0.0');

var http_server = http.createServer(app);
http_server.listen(80, '0.0.0.0');


1557605_www.learningrtc.cn.key

-----BEGIN RSA PRIVATE KEY-----
MIIEpAIBAAKCAQEAgECrBRI9h/EE1QhLQBIxqeZFAFh4obAm7jGIR3QMUimHxR5X
SRmkVKbkMMQLXtZPG/vgva8SmUSSbdOTvOXXjL3cBet8gRuQ2sxlypMDJbkawPyr
Gct5T497op0jvLCxX6E3LJOe8AF22bVRYL5oMQFxZV+1cfTDYGDHZKPowJbQmtwp
JknKnD3f2jp48eJ2s+5NyZdQB2O48SGkRiwXfmosTmcNgiXR46WIvvhkbVQSKMOZ
It1lZtZXp7B6NxllY1D+ayG7LbaW6Y2tldFMuXrNRnK5pKfXuAVE8qKSZBqqwBdr
lmcWQfAnCZBXHjlHwmN7+TFh99dQcAWmfhp4AQIDAQABAoIBADAChUKnulrqMWnh
6fF5HhhAt/HSLI4yV9BwwFgnK/mRzF5Q5lHaBHcf5moO6Ua+KO0L0+yN3gN79Oih
/DsJOzBXXkblCT13aTlOrIgxkksLyOUXcKF+VtIenySXeGpJJozq17GbLTMhCTGk
O2tgu7YkmSNeuZiIDJ9Gez3EUfvNrexlpIndjHIiyMh6Hv2TmGofZsX48Sl6ocgH
bGlgnLEExJCacX1KyWpL2QraV9jhF7WCXgEPLWcOq4r+aKkMpP/v1gZKPNMHq0OM
7ytCDrcvChnxG8azWsiXuptCqillm3QZSItzUBPjMFUzbBairikHdtPdzuzm6B+a
F8T3A1UCgYEA41mTEVrzY0EWiUo5WWFBDndS/3WdIRpW3N9NhFG+JeIHQJf20bXV
egUFj5d2eR7H2pjRYRuhCfdeIXZ1kkZchAfrYoMoI/dKbCl1DtG1+au/Id+UUf1Z
nczbRERD3Ijx/1F+c8nHLutfG1/d3J+8A3f/61YnWuhVw9HAyUTWSB8CgYEAkGop
5KhpMZvrvBTHhIP82Tf3DQhmbGIfLj+KuJFRfK5UZlGzFtR17CYnT4mqMM/A6u6v
He++rz8M/zwtRWwN+DbATKF2pEDiNCu6+Duq8MkS5wxNR2azm170gC+Cf21IEeVG
0/VH08/0ChVIp6flw6Q0zBIcwABzQNBKsYLdu98CgYEA0mPKXX01Ttyk5lfxymzd
r21tOUq2JjQhvjRHn/Ola5lH7Na0ak1DSK/s/XzE/kEl4X0aBitzU62/RmhBVSQX
6XcKtRd6xg3KqV2UHiqjpHDzZ31n3Jf/nrA9GWezBRsWF5hq1Owdj6XxVXvZ7JlF
fFBIXJhVwyLOe3BYX+l8AzECgYBZ3ibpyz+DBqOA7HFobnZXenM74gFS6xC6SAJ8
broF27pb3fWTfG1RokCOR33oWDCWQigpefrwtUzSPFFzxRVAZFnwlf3tow7hJmF4
fjEXHBmuPEKO70NPqZx/dJFB2PCjaklUN2wWTG9yIuKOqnXZ9IKCh7bqaJ1QNQ52
PpjbgwKBgQCTT7sbZynbNUWoQ303gM1DZP0Yl7c7OnOucbrP+pn13d4ipi7jdwiS
3yk0VU7+cn/yqkockt8UTLPRQ0tql5/o2ekENp8qHqsJ1hevlDHRxmD/H8RltJ6X
C6XKac6oWlJXee/3pUoixJFtFIMUl4cruf2A2HDd0l2CrBSVJCiMOA==
-----END RSA PRIVATE KEY-----

1557605_www.learningrtc.cn.pem

-----BEGIN CERTIFICATE-----
MIIFmTCCBIGgAwIBAgIQA/0Ssnj2KNvPpAAwE8RHPTANBgkqhkiG9w0BAQsFADBu
MQswCQYDVQQGEwJVUzEVMBMGA1UEChMMRGlnaUNlcnQgSW5jMRkwFwYDVQQLExB3
d3cuZGlnaWNlcnQuY29tMS0wKwYDVQQDEyRFbmNyeXB0aW9uIEV2ZXJ5d2hlcmUg
RFYgVExTIENBIC0gRzEwHhcNMTgxMTI3MDAwMDAwWhcNMTkxMTI3MTIwMDAwWjAd
MRswGQYDVQQDExJ3d3cubGVhcm5pbmdydGMuY24wggEiMA0GCSqGSIb3DQEBAQUA
A4IBDwAwggEKAoIBAQCAQKsFEj2H8QTVCEtAEjGp5kUAWHihsCbuMYhHdAxSKYfF
HldJGaRUpuQwxAte1k8b++C9rxKZRJJt05O85deMvdwF63yBG5DazGXKkwMluRrA
/KsZy3lPj3uinSO8sLFfoTcsk57wAXbZtVFgvmgxAXFlX7Vx9MNgYMdko+jAltCa
3CkmScqcPd/aOnjx4naz7k3Jl1AHY7jxIaRGLBd+aixOZw2CJdHjpYi++GRtVBIo
w5ki3WVm1lensHo3GWVjUP5rIbsttpbpja2V0Uy5es1Gcrmkp9e4BUTyopJkGqrA
F2uWZxZB8CcJkFceOUfCY3v5MWH311BwBaZ+GngBAgMBAAGjggKCMIICfjAfBgNV
HSMEGDAWgBRVdE+yck/1YLpQ0dfmUVyaAYca1zAdBgNVHQ4EFgQUGCuoNOqYS8DF
1dd4XIP/YilDUJEwLQYDVR0RBCYwJIISd3d3LmxlYXJuaW5ncnRjLmNugg5sZWFy
bmluZ3J0Yy5jbjAOBgNVHQ8BAf8EBAMCBaAwHQYDVR0lBBYwFAYIKwYBBQUHAwEG
CCsGAQUFBwMCMEwGA1UdIARFMEMwNwYJYIZIAYb9bAECMCowKAYIKwYBBQUHAgEW
HGh0dHBzOi8vd3d3LmRpZ2ljZXJ0LmNvbS9DUFMwCAYGZ4EMAQIBMH0GCCsGAQUF
BwEBBHEwbzAhBggrBgEFBQcwAYYVaHR0cDovL29jc3AuZGNvY3NwLmNuMEoGCCsG
AQUFBzAChj5odHRwOi8vY2FjZXJ0cy5kaWdpY2VydC5jb20vRW5jcnlwdGlvbkV2
ZXJ5d2hlcmVEVlRMU0NBLUcxLmNydDAJBgNVHRMEAjAAMIIBBAYKKwYBBAHWeQIE
AgSB9QSB8gDwAHUAu9nfvB+KcbWTlCOXqpJ7RzhXlQqrUugakJZkNo4e0YUAAAFn
VArhKwAABAMARjBEAiBYzdYfv9uZCl7ItYugZ8rKwBdkl64L3Bo4hMyM2oLPdAIg
OOy3aJnqp31jGrtIG5u6hPfAWNkiBPfGQCEDeBsRhaYAdwCHdb/nWXz4jEOZX73z
bv9WjUdWNv9KtWDBtOr/XqCDDwAAAWdUCuH+AAAEAwBIMEYCIQD4eai+g9Dx4ZhW
h8+VDwRjrspTNycWeg0ehjf+p5NwBAIhAPQpUvUrdJp/KqLKz4TNnyJtU0ezPZdY
XGQVeYtwkDOQMA0GCSqGSIb3DQEBCwUAA4IBAQAZwr2CFBCmPw4H16UpsbEK4Wie
ldbsrBhRMX2bH47Sr2CQvAJLm2MODVDi7XtF1ZR1XmLQOiKsHNVXveDq5UJomWIn
NDkXxYPNMQzVB6WLxO9HZsM302CIrE4ds9PUWWZ8wVtyv6o/nqczu+uuyX0Vs0/J
dclkw7r3TntrPwgTj/3dCSBchdT33vdTGjnyc9Hz7gN0aU8Ksnzf7Vxm53lmk4t1
aHKYUDQtPle5MKNgg88fjCsrfMZAfpcR3GKfCSa3I4f4vhvsg2ap4fJsXKjHtOLN
8qfw7B8Qm5/PpsRzYHB+WEPkfwIKxR9gIifQEbNnSSCCl3GJVqH4c1HJcb1z
-----END CERTIFICATE-----
-----BEGIN CERTIFICATE-----
MIIEqjCCA5KgAwIBAgIQAnmsRYvBskWr+YBTzSybsTANBgkqhkiG9w0BAQsFADBh
MQswCQYDVQQGEwJVUzEVMBMGA1UEChMMRGlnaUNlcnQgSW5jMRkwFwYDVQQLExB3
d3cuZGlnaWNlcnQuY29tMSAwHgYDVQQDExdEaWdpQ2VydCBHbG9iYWwgUm9vdCBD
QTAeFw0xNzExMjcxMjQ2MTBaFw0yNzExMjcxMjQ2MTBaMG4xCzAJBgNVBAYTAlVT
MRUwEwYDVQQKEwxEaWdpQ2VydCBJbmMxGTAXBgNVBAsTEHd3dy5kaWdpY2VydC5j
b20xLTArBgNVBAMTJEVuY3J5cHRpb24gRXZlcnl3aGVyZSBEViBUTFMgQ0EgLSBH
MTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBALPeP6wkab41dyQh6mKc
oHqt3jRIxW5MDvf9QyiOR7VfFwK656es0UFiIb74N9pRntzF1UgYzDGu3ppZVMdo
lbxhm6dWS9OK/lFehKNT0OYI9aqk6F+U7cA6jxSC+iDBPXwdF4rs3KRyp3aQn6pj
pp1yr7IB6Y4zv72Ee/PlZ/6rK6InC6WpK0nPVOYR7n9iDuPe1E4IxUMBH/T33+3h
yuH3dvfgiWUOUkjdpMbyxX+XNle5uEIiyBsi4IvbcTCh8ruifCIi5mDXkZrnMT8n
wfYCV6v6kDdXkbgGRLKsR4pucbJtbKqIkUGxuZI2t7pfewKRc5nWecvDBZf3+p1M
pA8CAwEAAaOCAU8wggFLMB0GA1UdDgQWBBRVdE+yck/1YLpQ0dfmUVyaAYca1zAf
BgNVHSMEGDAWgBQD3lA1VtFMu2bwo+IbG8OXsj3RVTAOBgNVHQ8BAf8EBAMCAYYw
HQYDVR0lBBYwFAYIKwYBBQUHAwEGCCsGAQUFBwMCMBIGA1UdEwEB/wQIMAYBAf8C
AQAwNAYIKwYBBQUHAQEEKDAmMCQGCCsGAQUFBzABhhhodHRwOi8vb2NzcC5kaWdp
Y2VydC5jb20wQgYDVR0fBDswOTA3oDWgM4YxaHR0cDovL2NybDMuZGlnaWNlcnQu
Y29tL0RpZ2lDZXJ0R2xvYmFsUm9vdENBLmNybDBMBgNVHSAERTBDMDcGCWCGSAGG
/WwBAjAqMCgGCCsGAQUFBwIBFhxodHRwczovL3d3dy5kaWdpY2VydC5jb20vQ1BT
MAgGBmeBDAECATANBgkqhkiG9w0BAQsFAAOCAQEAK3Gp6/aGq7aBZsxf/oQ+TD/B
SwW3AU4ETK+GQf2kFzYZkby5SFrHdPomunx2HBzViUchGoofGgg7gHW0W3MlQAXW
M0r5LUvStcr82QDWYNPaUy4taCQmyaJ+VB+6wxHstSigOlSNF2a6vg4rgexixeiV
4YSB03Yqp2t3TeZHM9ESfkus74nQyW7pRGezj+TC44xCagCQQOzzNmzEAP2SnCrJ
sNE2DpRVMnL8J6xBRdjmOsC3N6cQuKuRXbzByVBjCqAA8t1L0I+9wXJerLPyErjy
rMKWaBFLmfK/AHNF4ZihwPGOc7w6UHczBZXH5RFzJNnww+WnKuTPI0HfnVH8lg==
-----END CERTIFICATE-----

运行 node server.js

打开https://0.0.0.0/mediastream/index.html

总结 :

今天我们知道了通过var promise = navigator.mediaDevices.getUserMedia(constraints);可以获取到音频和视频的数据,其中var constraints可以对音频和视频进行各种限制。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值