The quick answer is that you can have two different players on the same page and you should be able to control each, for example start and stop playback, without a page load.
However, it would probably be useful to look at how the two streaming technologies differ in case it helps with your design also.
- WebRTC is a (near) real time, typically two way, steaming protocol. It is used for applications like live video calls and it leverages streaming technologies such as Real Time protocol, RTP, which are generally configured to prioritise latency. Note low latency in video call terms is typically 200-500ms.
- HLS is typically not 'near real time'. It is an ABR streaming technology that will usually check that the receiver has enough of the stream buffered to ensure that the video can playback without and 'buffering' interruptions. Low latency in HLS or DASH video streaming is usually measured in multiple seconds.
In very simple terms, WebRTC prioritises latency and is prepared to allow some video artefacts or to drop frames to keep the video as near real time as possible. This is obviously important in a two way video call, for example.
HLS on the other hands prioritises video quality and will avoid dropping any frames. It tries to have enough of a buffer also to avoid pausing the video with a buffering message.
Note that both approaches support the ability to negotiate the bit rate streamed during the transmission.
As with many technologies the boundaries are blurring with WebRTC being suggested for live entertainment video streaming use cases and HLS low latency looking to reduce the latency also, although not to the near real time levels at this point.
One approach to combine to two technologies is to have a Live video call or stream which you capture as it proceeds and make available for playback, or catchup or 'start over', by streaming the recorded stream using HLS. This would also allow you to capture as high a quality as possible for the recording without having to worry about real time latency.