How to Build WebRTC Camera App with JavaScript?

1     webrtc:
2       cameras:
3         - name: Living Room Camera
4           url: rtsp://username:password@camera-ip-address:554/stream
5           audio: true
6         - name: Front Door Camera
7           url: rtsp://username:password@camera-ip-address:554/stream
8           audio: false

1 - Replace `Living Room Camera` and `Front Door Camera` with descriptive names for your cameras.
2 - Replace `rtsp://username:password@camera-ip-address:554/stream` with the actual RTSP URL of your camera stream.
3 - Set `audio` to `true` if you want to include audio in the stream, otherwise set it to `false`.

1# Sample configuration.yaml entry
2webrtc:
3  cameras:
4    - name: Living Room Camera
5      url: rtsp://username:password@camera-ip-address:554/stream
6      audio: true
7    - name: Front Door Camera
8      url: rtsp://username:password@camera-ip-address:554/stream
9      audio: false

1   camera:
2     - platform: generic
3       name: Living Room Camera
4       still_image_url: http://camera-ip-address/image.jpg
5       stream_source: rtsp://username:password@camera-ip-address:554/stream
6     - platform: generic
7       name: Front Door Camera
8       still_image_url: http://camera-ip-address/image.jpg
9       stream_source: rtsp://username:password@camera-ip-address:554/stream

1   views:
2     - title: Home
3       cards:
4         - type: picture-entity
5           entity: camera.living_room_camera
6           camera_image: camera.living_room_camera
7           show_name: false
8           show_state: false
9         - type: picture-entity
10           entity: camera.front_door_camera
11           camera_image: camera.front_door_camera
12           show_name: false
13           show_state: false

1   type: entities
2   entities:
3     - type: call-service
4       service: webrtc.start
5       name: Start Stream
6       icon: mdi:play
7     - type: call-service
8       service: webrtc.stop
9       name: Stop Stream
10       icon: mdi:stop
11     - type: call-service
12       service: webrtc.toggle_audio
13       name: Toggle Audio
14       icon: mdi:volume-high

1   sensor:
2     - platform: template
3       sensors:
4         living_room_camera_status:
5           value_template: "{{ states('camera.living_room_camera') }}"
6           icon_template: >-
7             {% if is_state('camera.living_room_camera', 'idle') %}
8               mdi:camera-off
9             {% else %}
10               mdi:camera
11             {% endif %}

1   class WebRTCJoinScreen extends HTMLElement {
2     setConfig(config) {
3       this.config = config;
4       this.render();
5     }
6
7     render() {
8       this.innerHTML = `
9         <style>
10           .container {
11             padding: 16px;
12           }
13           .title {
14             font-size: 24px;
15             font-weight: bold;
16           }
17           .dropdown {
18             margin: 8px 0;
19           }
20           .button {
21             background-color: #007bff;
22             color: white;
23             padding: 10px;
24             border: none;
25             border-radius: 5px;
26             cursor: pointer;
27           }
28           .settings {
29             margin-top: 16px;
30           }
31         </style>
32         <div class="container">
33           <div class="title">Join Screen</div>
34           <div class="dropdown">
35             <label for="camera-select">Select Camera:</label>
36             <select id="camera-select">
37               ${this.config.cameras.map(camera => `<option value="${camera}">${camera}</option>`).join('')}
38             </select>
39           </div>
40           <button class="button" id="connect-btn">Connect</button>
41           <div class="settings">
42             <label for="audio-toggle">Audio:</label>
43             <input type="checkbox" id="audio-toggle" checked>
44             <label for="quality-select">Quality:</label>
45             <select id="quality-select">
46               <option value="hd">HD</option>
47               <option value="sd">SD</option>
48             </select>
49           </div>
50         </div>
51       `;
52
53       this.querySelector('#connect-btn').addEventListener('click', () => {
54         this.startStream();
55       });
56     }
57
58     startStream() {
59       const camera = this.querySelector('#camera-select').value;
60       const audio = this.querySelector('#audio-toggle').checked;
61       const quality = this.querySelector('#quality-select').value;
62
63       // Call Home Assistant service to start WebRTC stream
64       this.callService('webrtc', 'start', {
65         camera: camera,
66         audio: audio,
67         quality: quality,
68       });
69     }
70
71     callService(domain, service, serviceData) {
72       const event = new Event('hass-call-service', {
73         bubbles: true,
74         composed: true,
75       });
76       event.detail = { domain, service, serviceData };
77       this.dispatchEvent(event);
78     }
79   }
80
81   customElements.define('webrtc-join-screen', WebRTCJoinScreen);

1   resources:
2     - url: /local/webrtc-join-screen.js
3       type: module
4
5   views:
6     - title: WebRTC
7       cards:
8         - type: custom:webrtc-join-screen
9           cameras:
10             - Living Room Camera
11             - Front Door Camera

1   script:
2     webrtc_start:
3       sequence:
4         - service: webrtc.start
5           data_template:
6             camera: "{{ camera }}"
7             audio: "{{ audio }}"
8             quality: "{{ quality }}"

1   class WebRTCJoinScreen extends HTMLElement {
2     setConfig(config) {
3       this.config = config;
4       this.render();
5     }
6
7     render() {
8       this.innerHTML = `
9         <style>
10           .container {
11             padding: 16px;
12           }
13           .title {
14             font-size: 24px;
15             font-weight: bold;
16           }
17           .dropdown {
18             margin: 8px 0;
19           }
20           .button {
21             background-color: #007bff;
22             color: white;
23             padding: 10px;
24             border: none;
25             border-radius: 5px;
26             cursor: pointer;
27             margin: 4px;
28           }
29           .settings {
30             margin-top: 16px;
31           }
32         </style>
33         <div class="container">
34           <div class="title">Join Screen</div>
35           <div class="dropdown">
36             <label for="camera-select">Select Camera:</label>
37             <select id="camera-select">
38               ${this.config.cameras.map(camera => `<option value="${camera}">${camera}</option>`).join('')}
39             </select>
40           </div>
41           <button class="button" id="start-btn">Start Stream</button>
42           <button class="button" id="stop-btn">Stop Stream</button>
43           <div class="settings">
44             <label for="audio-toggle">Audio:</label>
45             <input type="checkbox" id="audio-toggle" checked>
46             <label for="quality-select">Quality:</label>
47             <select id="quality-select">
48               <option value="hd">HD</option>
49               <option value="sd">SD</option>
50             </select>
51           </div>
52         </div>
53       `;
54
55       this.querySelector('#start-btn').addEventListener('click', () => {
56         this.startStream();
57       });
58       this.querySelector('#stop-btn').addEventListener('click', () => {
59         this.stopStream();
60       });
61     }
62
63     startStream() {
64       const camera = this.querySelector('#camera-select').value;
65       const audio = this.querySelector('#audio-toggle').checked;
66       const quality = this.querySelector('#quality-select').value;
67
68       // Call Home Assistant service to start WebRTC stream
69       this.callService('webrtc', 'start', {
70         camera: camera,
71         audio: audio,
72         quality: quality,
73       });
74     }
75
76     stopStream() {
77       // Call Home Assistant service to stop WebRTC stream
78       this.callService('webrtc', 'stop', {});
79     }
80
81     callService(domain, service, serviceData) {
82       const event = new Event('hass-call-service', {
83         bubbles: true,
84         composed: true,
85       });
86       event.detail = { domain, service, serviceData };
87       this.dispatchEvent(event);
88     }
89   }
90
91   customElements.define('webrtc-join-screen', WebRTCJoinScreen);

1   resources:
2     - url: /local/webrtc-join-screen.js
3       type: module
4
5   views:
6     - title: WebRTC
7       cards:
8         - type: custom:webrtc-join-screen
9           cameras:
10             - Living Room Camera
11             - Front Door Camera

1   script:
2     webrtc_start:
3       sequence:
4         - service: webrtc.start
5           data_template:
6             camera: "{{ camera }}"
7             audio: "{{ audio }}"
8             quality: "{{ quality }}"
9
10     webrtc_stop:
11       sequence:
12         - service: webrtc.stop