💻 線上演示
演示地址 https://webrtc.tinywan.com/docs-2022/demo-03/index.html
網路攝影機申請
拍照截圖
📝 源碼
index.html
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>WebRTC實戰教程：如何使用網路攝影機拍照</title>
</head>
<body>
<h1>WebRTC實戰教程：如何使用網路攝影機拍照</h1>
<divid="app">
<div>
<videoref="video"autoplaywidth="400"height="300"></video>
</div>
<div>
<button @click="btnTakePhotoClicked">拍照</button>
</div>
<div>
<canvasref="canvas"width="400"height="300"></canvas>
</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 {
audioInputDevices: [],
selectedAudioDeviceIndex: 0
}
},
mounted() {
this._initDevice();
},
methods: {
async _initDevice (){
this.$refs.video.srcObject = await navigator.mediaDevices.getUserMedia({
video:true,
audio:false
});
this._context2d = this.$refs.canvas.getContext("2d");
},
btnTakePhotoClicked() {
// 開始繪制
this._context2d.drawImage(this.$refs.video,0,0,400,300)
}
}
};
var vm = Vue.createApp(App).mount('#app');
