webrtc 点对点视频聊天,但只需要一侧将视频发送到另一侧
webrtc per to per video chat but only need one side to send video to another
我看了很多关于webrtc的例子,但我不明白如何在A和B之间聊天视频p2p,但只需要A使用p2p连接向B发送流视频,如何做到这一点?
我试图在 B {video : false} 中禁用本地视频,但出现错误,无法正常工作。
我的脚本
<!DOCTYPE html>
<html>
<head>
<script src="https://simplewebrtc.com/latest-v2.js"></script>
<script type="text/javascript">
var webrtc = new SimpleWebRTC({
// the id/element dom element that will hold "our" video
localVideoEl: 'localVideo',
// the id/element dom element that will hold remote videos
remoteVideosEl: 'remotesVideos',
// immediately ask for camera access
autoRequestMedia: true,
//https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
//https://github.com/andyet/signalmaster/blob/master/README.md
media: {
audio: false,
video: {
//width: 720,
width: {ideal: 640},
// height: 1280,
height: {ideal: 480},
frameRate: {ideal: 15}
}
},
receiveMedia: {
offerToReceiveAudio: 0,
offerToReceiveVideo: 1
}
});
// we have to wait until it's ready
webrtc.on('readyToCall', function () {
// you can name it anything
webrtc.joinRoom('zika ghe vl');
});
</script>
</head>
<body>
<div id="remotesVideos"></div>
</body>
</html>
我的例子来自这里:https://github.com/andyet/SimpleWebRTC
那么,如何让 B(watcher) 禁用将 B 的本地视频发送给 A,只让 A 将流视频发送给 B。
在发件人端启用视频,禁用音频。在接收器上禁用两者。
试试下面的代码
<!DOCTYPE html>
<html>
<head>
<script src="https://simplewebrtc.com/latest-v2.js"></script>
<button onclick="start(false)">Receive video</button>
<button onclick="start(true)"">Send video</button>
<script type="text/javascript">
function start (e) {
/**
have separate settings to get the trigger form UI
*/
var videoSettings = {
//width: 720,
width: {ideal: 640},
// height: 1280,
height: {ideal: 480},
frameRate: {ideal: 15}
}
if(!e) videoSettings = e;
new SimpleWebRTC({
// the id/element dom element that will hold "our" video
localVideoEl: 'localVideo',
// the id/element dom element that will hold remote videos
remoteVideosEl: 'remotesVideos',
// immediately ask for camera access
autoRequestMedia: true,
//https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
//https://github.com/andyet/signalmaster/blob/master/README.md
media: {
audio: false,
video: videoSettings
},
receiveMedia: {
offerToReceiveAudio: 0,
offerToReceiveVideo: 1
}
}).on('readyToCall', function () {
// you can name it anything
this.joinRoom('zika ghe vl');
});
}
</script>
</head>
<body>
<div id="remotesVideos"></div>
</body>
</html>
我看了很多关于webrtc的例子,但我不明白如何在A和B之间聊天视频p2p,但只需要A使用p2p连接向B发送流视频,如何做到这一点? 我试图在 B {video : false} 中禁用本地视频,但出现错误,无法正常工作。
我的脚本
<!DOCTYPE html>
<html>
<head>
<script src="https://simplewebrtc.com/latest-v2.js"></script>
<script type="text/javascript">
var webrtc = new SimpleWebRTC({
// the id/element dom element that will hold "our" video
localVideoEl: 'localVideo',
// the id/element dom element that will hold remote videos
remoteVideosEl: 'remotesVideos',
// immediately ask for camera access
autoRequestMedia: true,
//https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
//https://github.com/andyet/signalmaster/blob/master/README.md
media: {
audio: false,
video: {
//width: 720,
width: {ideal: 640},
// height: 1280,
height: {ideal: 480},
frameRate: {ideal: 15}
}
},
receiveMedia: {
offerToReceiveAudio: 0,
offerToReceiveVideo: 1
}
});
// we have to wait until it's ready
webrtc.on('readyToCall', function () {
// you can name it anything
webrtc.joinRoom('zika ghe vl');
});
</script>
</head>
<body>
<div id="remotesVideos"></div>
</body>
</html>
在发件人端启用视频,禁用音频。在接收器上禁用两者。 试试下面的代码
<!DOCTYPE html>
<html>
<head>
<script src="https://simplewebrtc.com/latest-v2.js"></script>
<button onclick="start(false)">Receive video</button>
<button onclick="start(true)"">Send video</button>
<script type="text/javascript">
function start (e) {
/**
have separate settings to get the trigger form UI
*/
var videoSettings = {
//width: 720,
width: {ideal: 640},
// height: 1280,
height: {ideal: 480},
frameRate: {ideal: 15}
}
if(!e) videoSettings = e;
new SimpleWebRTC({
// the id/element dom element that will hold "our" video
localVideoEl: 'localVideo',
// the id/element dom element that will hold remote videos
remoteVideosEl: 'remotesVideos',
// immediately ask for camera access
autoRequestMedia: true,
//https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
//https://github.com/andyet/signalmaster/blob/master/README.md
media: {
audio: false,
video: videoSettings
},
receiveMedia: {
offerToReceiveAudio: 0,
offerToReceiveVideo: 1
}
}).on('readyToCall', function () {
// you can name it anything
this.joinRoom('zika ghe vl');
});
}
</script>
</head>
<body>
<div id="remotesVideos"></div>
</body>
</html>