Skip to content

Commit a591aec

Browse files
yuewen-zmyuewen-zm
committed
修改；
1 parent 1b6da7c commit a591aec

3 files changed

Lines changed: 58 additions & 107 deletions

File tree

‎main.js‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ const audioOutputSelect = document.querySelector('select#audioOutput');
66
const videoSelect = document.querySelector('select#videoSource');
77
const selectors = [audioInputSelect, audioOutputSelect, videoSelect];
88

9-
audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);
9+
let video = document.querySelector('video');
10+
let canvas = document.getElementById('canvas');
11+
let context1 = canvas.getContext('2d');
12+
let photograph = document.querySelector("#photograph")
13+
14+
// audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);
1015

1116
function gotDevices(deviceInfos) {
1217
// Handles being called several times to update labels. Preserve values.
@@ -85,14 +90,14 @@ function start() {
8590
track.stop();
8691
});
8792
}
88-
const audioSource = audioInputSelect.value;
93+
// const audioSource = audioInputSelect.value;
8994
const videoSource = videoSelect.value;
9095
const constraints = {
91-
audio: {
92-
deviceId: audioSource ? {
93-
exact: audioSource
94-
} : undefined
95-
},
96+
// audio: {
97+
// deviceId: audioSource ? {
98+
// exact: audioSource
99+
// } : undefined
100+
// },
96101
video: {
97102
deviceId: videoSource ? {
98103
exact: videoSource
@@ -102,9 +107,23 @@ function start() {
102107
navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
103108
}
104109

105-
audioInputSelect.onchange = start;
106-
audioOutputSelect.onchange = changeAudioDestination;
110+
// audioInputSelect.onchange = start;
111+
// audioOutputSelect.onchange = changeAudioDestination;
107112

108113
videoSelect.onchange = start;
109114

110-
start();
115+
start();
116+
117+
//拍照
118+
photograph.addEventListener("click", () => {
119+
// if (!this.isOpenCamera) return alert("请开启摄像机权限")
120+
121+
let img = new Image();
122+
img.src = "";
123+
img.onload = function (ev) {
124+
context1.drawImage(img, 0, 0);
125+
}
126+
127+
context1.drawImage(video, 50, 50); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。
128+
context1.drawImage(img, 50, 50);
129+
})

‎userMedia.html‎

Lines changed: 28 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,3 @@
1-
Skip to content
2-
Search or jump to…
3-
4-
Pull requests
5-
Issues
6-
Marketplace
7-
Explore
8-
9-
@sunseekers
10-
webrtc
11-
/
12-
samples
13-
606
14-
9.5k
15-
4.4k
16-
Code
17-
Issues
18-
95
19-
Pull requests
20-
7
21-
Actions
22-
Projects
23-
Wiki
24-
Security
25-
Insights
26-
samples/src/content/devices/input-output/index.html
27-
@fippo
28-
fippo remove "new codelab"
29-
…
30-
Latest commit 302e18a on Aug 27, 2018
31-
History
32-
5 contributors
33-
@fippo@samdutton@KaptenJansson@ErikHellman@youennf
34-
82 lines (63 sloc) 2.78 KB
35-
361
<!DOCTYPE html>
372
<!--
383
* Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
@@ -60,55 +25,54 @@
6025

6126
<link rel="icon" sizes="192x192" href="../../../images/webrtc-icon-192x192.png">
6227
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
63-
<link rel="stylesheet" href="../../../css/main.css">
28+
6429

6530
<style>
66-
div.select {
67-
display: inline-block;
68-
margin: 0 0 1em 0;
31+
.wrapper {
32+
text-align: center;
6933
}
7034

71-
p.small {
72-
font-size: 0.7em;
35+
button {
36+
display: block;
37+
line-height: 20px;
38+
font-size: 14px;
39+
text-align: center;
40+
color: #4c5161;
41+
border-radius: 4px;
42+
border: 1px solid #d0d0d5;
43+
padding: 10px 15px;
44+
min-width: 80px;
45+
background-color: #fff;
46+
background-repeat: no-repeat;
47+
background-position: center;
48+
text-decoration: none;
49+
box-sizing: border-box;
50+
transition: border-color .15s, box-shadow .15s, opacity .15s;
51+
font-family: inherit;
52+
cursor: pointer;
53+
overflow: visible;
54+
margin: 20px auto;
7355
}
7456

75-
label {
76-
width: 12em;
77-
display: inline-block;
57+
.video,
58+
.canvas {
59+
border: 1px solid #d0d0d5;
7860
}
7961
</style>
8062

8163
</head>
8264

8365
<body>
8466
<div id="container">
85-
86-
<h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a><span>Select sources
87-
&amp; outputs</span>
88-
</h1>
89-
90-
<p>Get available audio, video sources and audio output devices from <code>mediaDevices.enumerateDevices()</code>
91-
then set the source for <code>getUserMedia()</code> using a <code>deviceId</code> constraint.</p>
92-
93-
<div class="select">
94-
<label for="audioSource">Audio input source: </label><select id="audioSource"></select>
95-
</div>
96-
97-
<div class="select">
98-
<label for="audioOutput">Audio output destination: </label><select id="audioOutput"></select>
99-
</div>
100-
10167
<div class="select">
10268
<label for="videoSource">Video source: </label><select id="videoSource"></select>
10369
</div>
10470

10571
<video id="video" playsinline autoplay></video>
10672

107-
<p class="small"><b>Note:</b> If you hear a reverb sound your microphone is picking up the output of your
108-
speakers/headset, lower the volume and/or move the microphone further away from your speakers/headset.</p>
73+
<button title="拍照" id="photograph">拍照</button>
10974

110-
<a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/devices/input-output"
111-
title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
75+
<canvas id="canvas" class="canvas" width="700" height="530"></canvas>
11276
</div>
11377

11478
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

‎xx.html‎

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,39 +7,7 @@
77

88
<title>摄像头画面web前端实时输出功能</title>
99
</head>
10-
<style>
11-
.wrapper {
12-
text-align: center;
13-
}
14-
15-
button {
16-
display: block;
17-
line-height: 20px;
18-
font-size: 14px;
19-
text-align: center;
20-
color: #4c5161;
21-
border-radius: 4px;
22-
border: 1px solid #d0d0d5;
23-
padding: 10px 15px;
24-
min-width: 80px;
25-
background-color: #fff;
26-
background-repeat: no-repeat;
27-
background-position: center;
28-
text-decoration: none;
29-
box-sizing: border-box;
30-
transition: border-color .15s, box-shadow .15s, opacity .15s;
31-
font-family: inherit;
32-
cursor: pointer;
33-
overflow: visible;
34-
margin: 20px auto;
35-
}
36-
37-
.video,
38-
.canvas {
39-
40-
border: 1px solid #d0d0d5;
41-
}
42-
</style>
10+
4311

4412
<body>
4513
<div class="wrapper">

0 commit comments

Comments
 (0)