网页 SDK
重要说明
- 因 WebRTC 限制，网页必须部署在 HTTPS 站点上（若可配置用户浏览器策略，也有其它方案，请自行查阅相关资料）。
- 使用 iframe 嵌入 H5 页面时，需添加
allow="geolocation; microphone; camera;display-capture"。
音视频相关
获取设备列表
javascript
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
if (!(device.groupId == "communications" || device.deviceId == "communications" || device.label == "通讯" || device.deviceId == "默认" || device.deviceId == "default")) {
console.log(device.kind + ": " + device.label +
" id = " + device.deviceId);
if (device.kind === "videoinput") {//视频设备
// videoInputDeviceId
}
if (device.kind === "audioinput") {//音频设备
//audioOutpuDeviceId
}
if (device.kind === "audiooutput") {//扬声器设备
}
}
});
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});创建音视频流
javascript
let videoConstraints = {
//deviceId： videoInputDeviceId;//可以从enumerateDevices获取到
width: {
ideal: 1280
},
height: {
ideal: 720
}
};
let audioConstraints = true;
/*let audioConstraints = {
deviceId: {
exact: audioInputDeviceId//可以从enumerateDevices获取到
}
}*/
//根据参数获取视频流
navigator.mediaDevices.getUserMedia({
video: videoConstraints,
audio: audioConstraints
}).then((stream) => {
}).catch(function(err) {
console.log(err.name + ":" + err.message);
});Room 相关
连接 Room
javascript
/**
* myroom: 房间 id
* userid: userid 唯一
* properties: 自定义用户参数
*/
createToken(myRoom, userid, 'presenter', properties, function(response) {
conference.join(token).then(resp => {
//连接成功
let participants = resp.participants;//人员
let streams = resp.remoteStreams;//流
streams.forEach(stream => {
if (stream.source.audio !== 'mixed') {
}
})
},function(err) {
// 连接失败
console.error('server connection failed:', err);
});
}, host);退出 Room
1. iframe 方式
javascript
//!!!!!!请务必使用这种方式，使用 vue 的 refs 调用该方法存在问题
document.getElementById("iframe").contentWindow.postMessage("exit", "*");2. 引用 JS SDK 方式
javascript
conference.leave();推流
javascript
let publishConstraints = {
video: {
width: 1280,
height: 720,
frameRate: 15,
encodingParameters:
[{
codec: {
name: "h264"
},
minBitrate: 2500,
maxBitrate: 2500
}]
}
}
/*
* {
type: "video",
userid: userid
} 自定义
*/
let localStream = new Wy.Base.LocalStream(
stream, new Wy.Base.StreamSourceInfo(
'mic', 'camera'), {
type: "video",
userid: userid
});
//推流
conference.publish(localStream, publishConstraints).then(publication => {
//publication.stop(); 停止推流
publication.addEventListener('error', (err) => {
console.log('Publication error: ' + err.error.message);
});
});拉流
javascript
conference.subscribe(stream)
.then((subscription)=>{
//subscription.stop()//停止拉流
let $video = $(`<video controls autoplay id=${stream.id} style="display:block" >this browser does not supported video tag</video>`);
$video.get(0).srcObject = stream.mediaStream;
$("body").append($video);
}, (err)=>{ console.log('subscribe failed', err);
});
stream.addEventListener('ended', () => {
});发送信令和接受信令
javascript
/**
* 发送信令
* @param msgToId 发给谁 'all','others',userid
* @param msgname
* @param msgId
* @param msgBody
* @param msgOpt 'send' or 'delete'
*
* sendMsg("test","others","test", {a:""},"send");
*/
function sendMsg(msgname, msgToId, msgId, msgBody, msgOpt) {
let template = {
opt:msgOpt,
id:msgId,
toID:msgToId,
name:msgname,
body:msgBody
}
let json = JSON.stringify(template);
conference.send(json);
}
/**
* 接收信令
*/
conference.addEventListener('messagereceived', event => {
let data = JSON.parse(event.message);
console.log("收到信令:", data);
/**
* 操作
*/
});流 add 和 remove
javascript
conference.addEventListener('streamadded', (event) => {
/* console.log('A new stream is added ', event.stream.id);
remoteStreams.push(event.stream);
isSelf = !!publicationGlobal && event.stream.id === publicationGlobal.id || (typeof screenSharePublication !== 'undefined' && event.stream.id === screenSharePublication.id);
!isSelf && renderVideo(event.stream);*/
event.stream.addEventListener('ended', () => {
});
});
});