使用WebRTC SkylinkJS构建的在线视频聊天室

WebRTC with SkylinkJS to build a Video private chat room.

html5, webrtc, 视频流

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2779
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var skylink = new Skylink();
skylink.setLogLevel(4);
skylink.on('peerJoined', function(peerId, peerInfo, isSelf) {
    if (isSelf) return; // We already have a video element for our video and don't need to create a new one.
    var vid = document.createElement('video');
    vid.autoplay = true;
    vid.muted = true; // Added to avoid feedback when testing locally
    vid.id = peerId;
    document.body.appendChild(vid);
});

skylink.on('incomingStream', function(peerId, stream, isSelf) {
    if (isSelf) return;
    var vid = document.getElementById(peerId);
    attachMediaStream(vid, stream);
});

skylink.on('peerLeft', function(peerId) {
    var vid = document.getElementById(peerId);
    document.body.removeChild(vid);
});

skylink.on('mediaAccessSuccess', function(stream) {
    var vid = document.getElementById('myvideo');
    attachMediaStream(vid, stream);
});

skylink.init({
    apiKey: '922464de-b254-49c2-b467-c87983c651fe', // Get your own key at https://console.temasys.io
    defaultRoom: 'GogabE' //getRoomId()
}, function(error, success) {
    if (error) {
        document.getElementById('status').innerHTML = 'Failed retrieval for room information.<br>Error: ' + (error.error.message || error.error);
    } else {
        document.getElementById('status').innerHTML = 'Room information has been loaded. Room is ready for user to join.';
        document.getElementById('start').style.display = 'block';
    }
});

function start(event) {
    event.target.style.visibility = 'hidden';

skylink.joinRoom({
        audio: true,
        video: true
    }, function(error, success) {
        if (error) {
            document.getElementById('status').innerHTML = 'Failed joining room.<br>' +
                'Error: ' + (error.error.message || error.error);
        } else {
            document.getElementById('status').innerHTML = 'Joined room.';
        }
    });
}

/* Helper functions */

编译

CSS

HTML

WebRTC with SkylinkJS to build a Video private chat room.

html5, webrtc, 视频流

编辑器支持Emmet

快捷键

WebRTC with SkylinkJS to build a Video private chat room.

html5, webrtc, 视频流

使用BabylonJS（HTML5 WebGL）实现的刺客信条海盗网页游戏

使用SoundCity和Three.JS结合实现的音乐城市可视化动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：