WebRTC实战教程：如何录制共享屏幕和播放

Tinywan

发布于 2024-03-11 13:41:31

1530

发布于 2024-03-11 13:41:31

文章被收录于专栏：开源技术小栈开源技术小栈

💻 在线演示

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

共享屏幕

录制共享截图

📝 源码

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebRTC实战教程：如何录制共享屏幕和播放</title>
</head>
<body>
<h1>WebRTC实战教程：如何录制共享屏幕和播放</h1>
<div id="app">
    <div>
        <video ref="preview" width="200" height="150" autoplay></video>
    </div>
    <div>
        <button @click="btnRecordClicked">录制</button>
        <button @click="btnPauseClicked">暂停</button>
        <button @click="btnResumeClicked">重新录制</button>
        <button @click="btnStopClicked">停止</button>
        <button @click="btnPlayerClicked">播放</button>
    </div>
    <div>
        <video ref="player" autoplay controls width="400" height="300"></video>
    </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 (){
            // 录制屏幕
            this._stream = await navigator.mediaDevices.getDisplayMedia();
            this.$refs.preview.srcObject = this._stream;
            this._recorder = new MediaRecorder(this._stream, {mimeType:"video/webm;codes=h264"});
            // 用.bind(this)来绑定运行环境
            this._recorder.ondataavailable = this.recorderDataAvailableHandle.bind(this)
        },
        recorderDataAvailableHandle(e){
            this.currentWebmData = e.data;
        },
        btnRecordClicked(){
            this._recorder.start();
        },
        btnPauseClicked(){
            this._recorder.pause();
        },
        btnResumeClicked(){
            this._recorder.resume();
        },
        btnStopClicked(){
            this._recorder.stop();
        },
        btnPlayerClicked(){
            this.$refs.player.src = URL.createObjectURL(this.currentWebmData);
        }
    }
};
var vm = Vue.createApp(App).mount('#app');

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2024-03-06，如有侵权请联系 cloudcommunity@tencent.com 删除

button