webrtc学习———记录一
最近导师让研究一下webrtc,希望将来用到我们的ICT2系统中。
但是从来没有过做web的基础,无论前端还是后端,html、js全都从头学起。html还好说,没有太过复杂的东西。
js就有点难度了,大致翻了一下js权威指南的书,了解了一下基本的语法,也算足够应付。但是对其中浏览器内置的各种对象,完全不了解。
只能慢慢熟悉,一步一步来。
第一部分 获取webcamera
这个比较简单,主要使用了getUserMedia()这个函数。下面是从网上获取的资料:
1、navigator.getUserMedia()
提示用户需要权限去使用像摄像头或麦克风之类的媒体设备.如果用户提供了这个权限,successCallback函数会被调用,且接收一个LocalMediaStream 对象作为参数.
navigator.getUserMedia ( constraints, successCallback, errorCallback );
示例
下面使用浏览器前缀来调用getUserMedia().
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia (
// constraints
{
video: true,
audio: true
},
// successCallback
function(localMediaStream) {
var video = document.querySelector(‘video‘);
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
},
// errorCallback
function(err) {
console.log("The following error occured: " + err);
}
);
参数
参数 | 是否必须 | 描述 |
---|---|---|
constraints | 必须 | successCallback中传入的 LocalMediaStream对象所支持的媒体类型。 |
successCallback | 必须 | 当应用中传递LocalMediaStream对象时触发的函数。 |
errorCallback | 可选 | 当调用媒体设备失败时触发的函数. |
constraints
constraints参数是一个 MediaStreamConstraints 对象,包含两个值为布尔值的成员: video
及 audio
. 这个参数描述了被 LocalMediaStream对象所支持的媒体类型,使用时,需要在constraints参数里指定某个类型或者两个类型.如果某特定类型不被浏览器所支持, getUserMedia 会调用errorCallback函数,并传入错误类型NOT_SUPPORTED_ERROR. 如果浏览器不能得到特定类型的音频或者视频流, getUserMedia 会调用 errorCallback 函数,并传入错误类型MANDATORY_UNSATISFIED_ERR.
若某种媒体类型未被指定,他的值默认为false。下面的例子描述了如何去设置constraints函数接收audio与video:
{ video: true, audio: true }
successCallback
getUserMedia 函数会调用successCallback 并传入LocalMediaStream 对象,这个对象包含媒体流。你可以将这个对象分配给适合的元素,之后处理,就像下面例子所做的一样。
function(localMediaStream) {
var video = document.querySelector(‘video‘);
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
},
errorCallback
getUserMedia 函数调用errorCallback 时会包含一个 code
参数,如下所示:
Error | Description |
---|---|
PERMISSION_DENIED | 用户拒绝了浏览器请求媒体的权限 |
NOT_SUPPORTED_ERROR | constraint中指定的媒体类型不被支持 |
MANDATORY_UNSATISFIED_ERROR | 指定的媒体类型未接收到媒体流 |
参考https://developer.mozilla.org/zh-CN/docs/WebRTC/navigator.getUserMedia
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。