Web SDK

Important Notes

1. Due to WebRTC restrictions, web pages must be served over HTTPS (alternative browser configuration approaches exist — please refer to relevant documentation).
2. When embedding the H5 page via iframe, add allow="geolocation; microphone; camera;display-capture".

Audio/Video

Get Device List

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") {// video device
                    // videoInputDeviceId
                }
                if (device.kind === "audioinput") {// audio input
                    // audioOutpuDeviceId
                }
                if (device.kind === "audiooutput") {// speaker

                }
            }

        });
    })
    .catch(function(err) {
        console.log(err.name + ": " + err.message);
    });

Create Audio/Video Stream

let videoConstraints = {
	// deviceId: videoInputDeviceId; // from enumerateDevices
	width: {
		ideal: 1280
	},
	height: {
		ideal: 720
	}
};
let audioConstraints = true;
navigator.mediaDevices.getUserMedia({
	video: videoConstraints,
	audio: audioConstraints
}).then((stream) => {
	
}).catch(function(err) {
	console.log(err.name + ":" + err.message);
});

Room

Connect to Room

/**
* myroom: room id
* userid: unique user id
* properties: custom user properties
*/
createToken(myRoom, userid, 'presenter', properties, function(response) {
	conference.join(token).then(resp => {
	// connected
	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);

Leave Room

1. iframe

// Use this approach; Vue refs may have issues
document.getElementById("iframe").contentWindow.postMessage("exit", "*");

2. JS SDK

conference.leave();

Publish Stream

let publishConstraints = {
	video: {
		width: 1280,
		height: 720,
		frameRate: 15,
		encodingParameters:
		[{
			codec: {
			name: "h264"
		},
		minBitrate: 2500,
		maxBitrate: 2500
		}]
	}
}
let localStream = new Wy.Base.LocalStream(
	stream, new Wy.Base.StreamSourceInfo(
	'mic', 'camera'), {
	type: "video",
	userid: userid
});
conference.publish(localStream, publishConstraints).then(publication => {
	publication.addEventListener('error', (err) => {
		console.log('Publication error: ' + err.error.message);
	});
});

Subscribe Stream

conference.subscribe(stream)
        .then((subscription)=>{
            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', () => {

        });

Send and Receive Signaling

    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("signaling received:", data);
    });

Stream Added and Removed

conference.addEventListener('streamadded', (event) => {
				 event.stream.addEventListener('ended', () => {
				 });
            });
});