💻 線上演示
演示地址 https://webrtc.tinywan.com/docs-2022/demo-07/video.html
三分屏截圖
📝 源碼
index.html
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>WebRTC實戰教程：如何實作共享螢幕和網路攝影機三分屏</title>
</head>
<body>
<divid="app">
<div style="margin: auto;">
<div style="border: 1px solid #ccc; float: left; margin-right: 20px;">
<videoref="documentPreview"width="800"height="600"autoplay></video>
</div>
<div>
<videoref="videoPreview"width="300"height="250"autoplay></video>
</div>
</div>
</div>
<scriptsrc="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<scriptsrc="main.js"></script>
</body>
</html>
main.js
const App = {
data() {
return {
currentWebmData: null,
}
},
mounted() {
this._initDevice();
},
methods: {
async _initDevice (){
// (1) 獲取網路攝影機的音訊和視訊
let cameraConstraints = {
video:true,
audio:true
};
this._cameraStream = await navigator.mediaDevices.getUserMedia(cameraConstraints);
this.$refs.videoPreview.srcObject = this._cameraStream;
// (2) 獲取課件視訊
let displayMediaOptions = {
video: {
cursor: "always"
},
audio: false
}
this._documentStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
// 預覽
this.$refs.documentPreview.srcObject = this._documentStream;
// this._context2d = this.$refs.documentPreview.getContext("2d");
// this._context2d.drawImage(this._documentStream,0,0,400,300)
// (3) 合並音軌
// this._cameraStream.getTracks().forEach(value => this._documentStream.addTrack(value));
// (4) 透過RTC進行推流
// this._context2d = this.$refs.canvas.getContext("2d");
// this._context2d.drawImage(this._cameraStream,0,0,400,300)
}
}
};
var vm = Vue.createApp(App).mount('#app');
