diff --git a/src/domain/session/room/CallViewModel.ts b/src/domain/session/room/CallViewModel.ts
index 95d9b188..7fcabf02 100644
--- a/src/domain/session/room/CallViewModel.ts
+++ b/src/domain/session/room/CallViewModel.ts
@@ -42,7 +42,6 @@ export class CallViewModel extends ViewModel<Options> {
     }
 
     get localTracks(): Track[] {
-        console.log("localTracks", this.getOption("call").localMedia);
         return this.getOption("call").localMedia?.tracks ?? [];
     }
 }
diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js
index 1d4bca42..81ca58d2 100644
--- a/src/domain/session/room/RoomViewModel.js
+++ b/src/domain/session/room/RoomViewModel.js
@@ -347,12 +347,17 @@ export class RoomViewModel extends ViewModel {
     }
 
     async startCall() {
-        const session = this.getOption("session");
-        const mediaTracks = await this.platform.mediaDevices.getMediaTracks(true, true);
-        const localMedia = new LocalMedia().withTracks(mediaTracks);
-        console.log("localMedia", localMedia.tracks);
-        // this will set the callViewModel above as a call will be added to callHandler.calls
-        await session.callHandler.createCall(this._room.id, localMedia, "A call " + Math.round(this.platform.random() * 100));
+        try {
+            const session = this.getOption("session");
+            const mediaTracks = await this.platform.mediaDevices.getMediaTracks(true, true);
+            const localMedia = new LocalMedia().withTracks(mediaTracks);
+            console.log("localMedia", localMedia.tracks);
+            // this will set the callViewModel above as a call will be added to callHandler.calls
+            await session.callHandler.createCall(this._room.id, localMedia, "A call " + Math.round(this.platform.random() * 100));
+        } catch (err) {
+            console.error(err.stack);
+            alert(err.message);
+        }
     }
 }
 
diff --git a/src/matrix/Session.js b/src/matrix/Session.js
index dbc0b17e..e604e068 100644
--- a/src/matrix/Session.js
+++ b/src/matrix/Session.js
@@ -88,7 +88,11 @@ export class Session {
                 const devices = await this._deviceTracker.devicesForTrackedRoom(roomId, this._hsApi, log);
                 const encryptedMessage = await this._olmEncryption.encrypt(message.type, message.content, devices, this._hsApi, log);
                 return encryptedMessage;
-            }
+            },
+            storage: this._storage,
+            webRTC: this._platform.webRTC,
+            ownDeviceId: sessionInfo.deviceId,
+            ownUserId: sessionInfo.userId,
         });
         this._deviceMessageHandler = new DeviceMessageHandler({storage, callHandler: this._callHandler});
         this._olm = olm;
diff --git a/src/matrix/calls/CallHandler.ts b/src/matrix/calls/CallHandler.ts
index a9b59f4f..269f6020 100644
--- a/src/matrix/calls/CallHandler.ts
+++ b/src/matrix/calls/CallHandler.ts
@@ -63,7 +63,9 @@ export class CallHandler {
             }
             throw err;
         }
+        console.log("joining call I just created");
         await call.join(localMedia);
+        console.log("joined!");
         return call;
     }
 
@@ -73,6 +75,7 @@ export class CallHandler {
 
     /** @internal */
     handleRoomState(room: Room, events: StateEvent[], log: ILogItem) {
+        console.log("handling room state");
         // first update call events
         for (const event of events) {
             if (event.type === EventType.GroupCall) {
diff --git a/src/matrix/calls/group/GroupCall.ts b/src/matrix/calls/group/GroupCall.ts
index 8ea4528a..d22135d1 100644
--- a/src/matrix/calls/group/GroupCall.ts
+++ b/src/matrix/calls/group/GroupCall.ts
@@ -49,7 +49,7 @@ export type Options = Omit<MemberOptions, "emitUpdate" | "confId" | "encryptDevi
 export class GroupCall {
     public readonly id: string;
     private readonly _members: ObservableMap<string, Member> = new ObservableMap();
-    private _localMedia?: LocalMedia;
+    private _localMedia?: LocalMedia = undefined;
     private _memberOptions: MemberOptions;
     private _state: GroupCallState;
 
@@ -87,10 +87,12 @@ export class GroupCall {
         }
         this._state = GroupCallState.Joining;
         this._localMedia = localMedia;
+        this.options.emitUpdate(this);
         const memberContent = await this._joinCallMemberContent();
         // send m.call.member state event
         const request = this.options.hsApi.sendState(this.roomId, "m.call.member", this.options.ownUserId, memberContent);
         await request.response();
+        this.options.emitUpdate(this);
         // send invite to all members that are < my userId
         for (const [,member] of this._members) {
             member.connect(this._localMedia);
@@ -119,6 +121,7 @@ export class GroupCall {
         };
         const request = this.options.hsApi.sendState(this.roomId, "m.call", this.id, this.callContent);
         await request.response();
+        this._state = GroupCallState.Created;
     }
 
     /** @internal */
diff --git a/src/observable/value/PickMapObservableValue.ts b/src/observable/value/PickMapObservableValue.ts
index a20ec04e..67f9d562 100644
--- a/src/observable/value/PickMapObservableValue.ts
+++ b/src/observable/value/PickMapObservableValue.ts
@@ -53,7 +53,9 @@ export class PickMapObservableValue<K, V> extends BaseObservableValue<V | undefi
         }
     }
 
-    onUpdate(key: K, value: V, params: any): void {}
+    onUpdate(key: K, value: V, params: any): void {
+        this.emit(this.get());
+    }
 
     onRemove(key: K, value: V): void {
         if (key === this.key) {
diff --git a/src/platform/web/ui/session/room/CallView.ts b/src/platform/web/ui/session/room/CallView.ts
index 29d4eee9..c4ae64b4 100644
--- a/src/platform/web/ui/session/room/CallView.ts
+++ b/src/platform/web/ui/session/room/CallView.ts
@@ -33,8 +33,8 @@ function bindVideoTracks<T>(t: TemplateBuilder<T>, video: HTMLVideoElement, prop
 export class CallView extends TemplateView<CallViewModel> {
     render(t: TemplateBuilder<CallViewModel>, vm: CallViewModel): HTMLElement {
         return t.div({class: "CallView"}, [
-            t.p(`Call ${vm.name} (${vm.id})`),
-            t.div({class: "CallView_me"}, bindVideoTracks(t, t.video(), vm => vm.localTracks)),
+            t.p(["Call ", vm => vm.name, vm => ` (${vm.id})`]),
+            t.div({class: "CallView_me"}, bindVideoTracks(t, t.video({autoplay: true}), vm => vm.localTracks)),
             t.view(new ListView({list: vm.memberViewModels}, vm => new MemberView(vm)))
         ]);
     }
@@ -42,6 +42,6 @@ export class CallView extends TemplateView<CallViewModel> {
 
 class MemberView extends TemplateView<CallMemberViewModel> {
     render(t: TemplateBuilder<CallMemberViewModel>, vm: CallMemberViewModel) {
-        return bindVideoTracks(t, t.video(), vm => vm.tracks);
+        return bindVideoTracks(t, t.video({autoplay: true}), vm => vm.tracks);
     }
 }