WebRTC实战教程：如何实现共享屏幕和摄像头三分屏

李, 若俞 • 2024年3月20日下午9:13 • PHP • 阅读 363

💻 在线演示

演示地址 https://webrtc.tinywan.com/docs-2022/demo-07/video.html

三分屏截图

📝 源码

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebRTC实战教程：如何实现共享屏幕和摄像头三分屏</title>
</head>
<body>
<div id="app">
    <div style="margin: auto;">
        <div style="border: 1px solid #ccc; float: left; margin-right: 20px;">
            <video ref="documentPreview" width="800" height="600" autoplay></video>
        </div>
        <div>
            <video ref="videoPreview" width="300" height="250" autoplay></video>
        </div>
    </div>
</div>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<script src="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');