我在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
如何显示自己的视频?
谢谢。