Skip to content

Commit 6bf03f4

Browse files
basst314basst314
committed
Fix issue where user-specified video constraints were not applied properly
1 parent 21d9e10 commit 6bf03f4

File tree

8 files changed

+31
-14
lines changed

8 files changed

+31
-14
lines changed

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@
1010
<link rel="stylesheet" href="styles.09e2c710755c8867a460.css"></head>
1111
<body>
1212
<appRoot></appRoot>
13-
<script src="runtime-es2015.858f8dd898b75fe86926.js" type="module"></script><script src="polyfills-es2015.43244fb1bca8dedd392f.js" type="module"></script><script src="runtime-es5.741402d1d47331ce975c.js" nomodule></script><script src="polyfills-es5.c31392a910a7a6d6981c.js" nomodule></script><script src="main-es2015.eac224979183a4668380.js" type="module"></script><script src="main-es5.d201c182e384057a6b7e.js" nomodule></script></body>
13+
<script src="runtime-es2015.858f8dd898b75fe86926.js" type="module"></script><script src="polyfills-es2015.43244fb1bca8dedd392f.js" type="module"></script><script src="runtime-es5.741402d1d47331ce975c.js" nomodule></script><script src="polyfills-es5.c31392a910a7a6d6981c.js" nomodule></script><script src="main-es2015.3cdea7fa437444dbddd1.js" type="module"></script><script src="main-es5.1b58bcbd644690ab7069.js" nomodule></script></body>
1414
</html>

‎docs/main-es2015.3cdea7fa437444dbddd1.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/main-es2015.eac224979183a4668380.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/main-es5.1b58bcbd644690ab7069.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/main-es5.d201c182e384057a6b7e.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/app/app.component.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ <h1>
2020
<br/>
2121
DeviceId: <input id="deviceId" type="text" [(ngModel)]="deviceId" style="width: 500px">
2222
<button (click)="showNextWebcam(deviceId);">Activate</button>
23+
<br/>
24+
Preferred facing mode:
25+
<input type="radio" value="user" name="facingMode" [(ngModel)]="facingMode"> User
26+
<input type="radio" value="environment" name="facingMode" [(ngModel)]="facingMode"> Environment
27+
<input type="radio" value="" name="facingMode" [(ngModel)]="facingMode"> No preference
2328
</div>
2429
</div>
2530

‎src/app/app.component.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,7 @@ export class AppComponent implements OnInit {
1515
public allowCameraSwitch = true;
1616
public multipleWebcamsAvailable = false;
1717
public deviceId: string;
18-
public videoOptions: MediaTrackConstraints = {
19-
// width: {ideal: 1024},
20-
// height: {ideal: 576}
21-
};
18+
public facingMode: string = 'environment';
2219
public errors: WebcamInitError[] = [];
2320

2421
// latest snapshot
@@ -75,4 +72,13 @@ export class AppComponent implements OnInit {
7572
public get nextWebcamObservable(): Observable<boolean|string> {
7673
return this.nextWebcam.asObservable();
7774
}
75+
76+
public get videoOptions(): MediaTrackConstraints {
77+
const result: MediaTrackConstraints = {};
78+
if (this.facingMode && this.facingMode !== "") {
79+
result.facingMode = { ideal: this.facingMode };
80+
}
81+
82+
return result;
83+
}
7884
}

‎src/app/modules/webcam/webcam/webcam.component.ts‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -185,9 +185,9 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
185185

186186
public ngAfterViewInit(): void {
187187
this.detectAvailableDevices()
188-
.then((devices: MediaDeviceInfo[]) => {
189-
// start first device
190-
this.switchToVideoInput(devices.length > 0 ? devices[0].deviceId : null);
188+
.then(() => {
189+
// start video
190+
this.switchToVideoInput(null);
191191
})
192192
.catch((err: string) => {
193193
this.initError.next(<WebcamInitError>{message: err});
@@ -324,15 +324,21 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
324324

325325
this.activeVideoSettings = stream.getVideoTracks()[0].getSettings();
326326
const activeDeviceId: string = WebcamComponent.getDeviceIdFromMediaStreamTrack(stream.getVideoTracks()[0]);
327-
this.activeVideoInputIndex = activeDeviceId ? this.availableVideoInputs
328-
.findIndex((mediaDeviceInfo: MediaDeviceInfo) => mediaDeviceInfo.deviceId === activeDeviceId) : -1;
329-
this.videoInitialized = true;
330327

331328
this.cameraSwitched.next(activeDeviceId);
332329

333330
// Initial detect may run before user gave permissions, returning no deviceIds. This prevents later camera switches. (#47)
334331
// Run detect once again within getUserMedia callback, to make sure this time we have permissions and get deviceIds.
335-
this.detectAvailableDevices();
332+
this.detectAvailableDevices()
333+
.then(() => {
334+
this.activeVideoInputIndex = activeDeviceId ? this.availableVideoInputs
335+
.findIndex((mediaDeviceInfo: MediaDeviceInfo) => mediaDeviceInfo.deviceId === activeDeviceId) : -1;
336+
this.videoInitialized = true;
337+
})
338+
.catch(() => {
339+
this.activeVideoInputIndex = -1;
340+
this.videoInitialized = true;
341+
});
336342
})
337343
.catch((err: MediaStreamError) => {
338344
this.initError.next(<WebcamInitError>{message: err.message, mediaStreamError: err});

0 commit comments

Comments
 (0)