peerjs如何显示两个用户的流

时间:2018-06-30 05:51:38

标签: javascript video-streaming webrtc peerjs

我在vue应用程序中隐含了peerjs。希望一切都很好。现在,我想显示您在Skype上看到的两个用户流。用户可以在角落看到自己的视频流。

这是我当前的实现。

function createWMTS() {
    var gridsetName = 'EPSG:900913';

    var wmtslayer = new ol.source.WMTS({
        url: 
        layer: 'osm',
        matrixSet: 'webmercator',
        isBaseLayer: true,
        format: 'image/png',
             style: 'default',
        requestEncoding: 'REST',
        projection: new ol.proj.Projection({
            code: 'EPSG:3857',
            units: 'm',
            axisOrientation: 'neu'
        }),
        tileGrid: new ol.tilegrid.WMTS({
            tileSize: [256, 256],
            extent: [-2.003750834E7, -2.003750834E7, 2.003750834E7, 2.003750834E7],
            resolutions: resolutions,
            matrixIds: params['TILEMATRIX']
        }),
        style: "",
        wrapX: true
    })

    return wmtslayer;
};
   var view = new ol.View({
    center: [5720657.8367, 4263876.019],
    zoom: 5 ,
     minZoom: 3,
        maxZoom: 19
});
  var gitaBaseMap = createWMTS();
  var rasterLayer = new ol.layer.Tile();
 rasterLayer.setSource(gitaBaseMap);
 var format = 'image/png';
 map = new ol.Map({
     layers: [rasterLayer],
     target: 'map',
     view: view,});

在我的html中,我有

 var self=this
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    this.peer.on('call', function(call) {
        navigator.getUserMedia({video: true, audio: false}, function(stream) {
        call.answer(stream); // Answer the call with an A/V stream.
        call.on('stream', function(remoteStream) {
        // Show stream in some video/canvas element.
            self.$refs.video2.srcObject=remoteStream
            self.$refs.video2.play()

        });
    }, function(err) {
        console.log('Failed to get local stream' ,err);
    });
    });


videoConnect(){
        var localvar = this.peer;
        var anid=this.anotherid
        var self=this
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        navigator.getUserMedia({video: true, audio: false}, function(stream) {
        var call = localvar.call(anid, stream);
        call.on('stream', function(remoteStream) {
            // Show stream in some video/canvas element.
            self.$refs.video1.srcObject=remoteStream
            self.$refs.video1.play()

        });
        }, function(err) {
        console.log('Failed to get local stream' ,err);
        });
    }

发起呼叫的人看到视频1,接听的人看到视频2

如何显示自己的视频?

谢谢。

0 个答案:

没有答案